<div class="showcontent">
<div class="doheader">
<h2 style="text-align: center; color:white;">My To Do List</h2>
<div class="content">
<input type="text" id="add" placeholder="Title...">
<button onclick="addList()">Add List</button>
</div>
</div>
<div class="works">
<ul>
<li class="checked">Go to Gym</li>
<li>Read the books</li>
<li>Buy Newspaper</li>
</ul>
</div>
</div>
addcross();
function addcross(){
// console.log(cross.innerHTML);
let lists=document.querySelectorAll(".works ul li");
//console.log(lists);
for(let i=0;i< lists.length;i++){
let cross=document.createElement("span");
let txt=document.createTextNode("\u00D7");
cross.appendChild(txt);
lists[i].appendChild(cross);
}
//console.log(lists);
}
function addList(){
if(document.getElementById("add").value==""){
return false;
}
let li=document.createElement("LI");
li.innerHTML=document.getElementById("add").value;
document.querySelector(".works ul").appendChild(li);
document.getElementById("add").value="";
//console.log(li);
//addd cross to the last li Element
let last=document.querySelectorAll(".works ul li");
let cross=document.createElement("span");
let txt=document.createTextNode("\u00D7");
cross.appendChild(txt);
last[last.length-1].appendChild(cross);
}
let list=document.querySelector(".works ul");
list.addEventListener( "click", event=>{
//console.log(event.target.className);
if(event.target.tagName=="LI"){
event.target.classList.toggle("checked");
//console.log(event.classList);
}
//console.log(event.target.tagName);
if(event.target.tagName=="SPAN"){
event.target.parentElement.style.display='none';
//console.log(event.target.parentElement);
}
})
.doheader{
background-color: red;
padding: 10px;
margin: auto;
}
.doheader .content{
display: flex;
align-items: center;
justify-content: center;
}
.doheader input,button{
padding: 14px 16px;
font-size: 18px;
margin-right: 5px;
}
.doheader input{
width: 70%;
}
.doheader button{
border: none;
background-color: rgb(0, 255, 64);
color: white;
border-radius: 10px;
cursor: pointer;
}
.doheader button:hover{
opacity: .7;
}
.works ul{
background-color: hwb(141 5% 6%);
padding: 0;
z-index: 5;
}
.works ul li{
list-style: none;
cursor: pointer;
padding: 10px;
position: relative;
}
.works ul li:nth-child(odd){
background-color: rgb(165, 244, 7);
}
.works ul li.checked{
text-decoration: line-through;
opacity: 0.7;
background-color:black;
color: white;
z-index: 10;
}
li.checked::before{
content: " ";
width: 10px;
height: 20px;
display: inline-block;
border-color: red ;
border-style: solid;
border-width: 0px 3px 3px 0;
transform: rotate(45deg);
margin-right: 10px;
}
.works li span{
font-size: 28px;
font-weight: bold;
position: absolute;
right: 10px;
}
.works li span:hover{
color:red;
}