چگونه با جاوااسکریپت(To do list)بسازیم؟

یه همچین چیزی قراره بسازیم که وقتی کار رو از لیست تیک می زنیم به شکل پائین نمایش داده بشه و آیکن حذف هم فعال بشه.

html
<div id=&quotconteaner&quot>
<input type=&quottext&quot id=&quotadd-work&quot placeholder=&quotNAME...&quot>
<button id=&quotbtn&quot>+
</button>
</div>
<div id=&quotlistcont&quot></div>

قسمت css

css
#conteaner,#listcont{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-end;
justify-content: center;
align-items: baseline;
}

#listcont{
display: flex;
align-content: space-between;
justify-content: space-evenly;
flex-direction: column;
align-items: baseline;
}
#add-work{
width: 60%;
padding: 1rem;
}
button{
width: 10%;
padding: 1rem;
font-size: 14px;
font-weight: 900;
background-color: green;
}
span{
font-size: 30px;}
#listcont p{
width: 100%;
background-color: rgb(197 213 202);
color: rgb(0, 0, 0);
display: flex;
align-content: space-around;
justify-content: space-between
}
a{
background-color: #000000;
color: aliceblue;
font-size: 29px;
border-radius: 102%;
}
span{
margin-right: auto;

}

قسمت جاوااسکریپت

js

//'گرفتن المنت ها'
const getvalue=document.getElementById(&quotadd-work&quot)
const btn=document.getElementById(&quotbtn&quot)
const listcont=document.getElementById(&quotlistcont&quot)
//چون اول باید المنت ساخته بشه و بعد ما بتونیم بگیریمش  این یعنی ویژگی تک رشته ای
// جاوااسکریپت که به
//Asynchronous Javascript
//معروفه و برای حل این مشکل می تونیم از

//callback
//promise
//async await
//استفاده کنیم
function first( callback){
// ساختن المنت ها در جاوااسکریپت و اضافه کردن آن به دام
btn.addEventListener(&quotclick&quot,e=>{
const deletel=document.createElement(&quota&quot)
deletel.textContent='x'
const elementp=document.createElement(&quotp&quot)
const inpu=document.createElement(&quotinput&quot)
const tags=document.createElement(&quotspan&quot)
inpu.setAttribute(&quottype&quot,&quotcheckbox&quot)
elementp.append(inpu)
elementp.append(tags)
tags+=getvalue.value
elementp.append( deletel)
listcont.append(elementp)
getvalue.value=&quot&quot
callback()
})
}
//تابع دوم که باید بعد تابع اول اجرا بشه و بتونه المنت های رو که میخواهیم رو بگیره

function two(){
const taker=document.querySelectorAll('input[type=checkbox]')
const span=document.querySelectorAll(&quotspan&quot)
const alla=document.querySelectorAll(&quota&quot)
//  چون آرایه ای از المنت ها رامی گیریم به همین خاطر از فور ایچ
//استفاده می کنیم
taker.forEach(e=>{
e.addEventListener(&quotchange&quot,e=>{
//دسترسی به والد وبرادر و خواهر المنت ها

const feed=e.target.nextSibling
const parentelem=e.target.parentElement
const aelem=e.target.nextSibling.nextSibling
if(e.target.checked){
aelem.style.background=&quot#FF0000&quot

aelem.style.borderColor=&quotblack&quot
parentelem.style.background=&quot#33333&quot
feed.style.textDecoration=&quotline-through&quot
}else{
parentelem.style.background=&quot&quot
feed.style.color=&quot&quot
feed.style.textDecoration=&quot&quot
aelem.style.background=&quot&quot
console.log(e.target.checked);
}
})
})
alla.forEach(e=>{

e.addEventListener(&quotclick&quot,e=>{
const checkfordelet=e.target.previousSibling.previousSibling
if (checkfordelet.checked) {
const e_target=e.target.parentElement
e_target.remove()
}else if(!checkfordelet.checked){
return false
}
})
})
}
//در نهایت فراخوانی تابع اول با کال بک تابع دوم

first(two)

کد ها رو می تونید از لینک زیر دانلود کنید