TODO list with DOM

 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO List with DOM</title>
</head>
<body>
    <h1>TODO List</h1>
    <input placeholder="Enter Task">
    <button>Add Task</button>
    <ul>
        <li>Eat <button class="delbtn">delete</button></li>
        <li>Sleep<button class="delbtn">delete</button></li>
    </ul>
    <script src="TODOwithDOM.js"></script>
</body>
</html>

JS

let btn=document.querySelector("button");
let inp=document.querySelector("input");
let ul=document.querySelector("ul");

btn.addEventListener("click",function(){
    let item=document.createElement("li");
    item.innerText=inp.value;
let delbtn=document.createElement("button");
delbtn.innerText="Delete";
delbtn.classList.add("delete");
inp.value="";
ul.appendChild(item);

item.appendChild(delbtn);


});

let delbtns=document.querySelectorAll(".delbtn");
for(delbtn of delbtns)
delbtn.addEventListener("click",function(){


let par=this.parentElement;
par.remove();

})




******TASKS ENTERED THROUGH INPUT CANNOT BE DELTED HENCE WE USE EVENT DELAGATION********

Comments

Post a Comment

Popular posts from this blog

Callback Hell

Image
      < h1 > call Hell Demo </ h1 > let h1 = document . querySelector ( "h1" ); function changeColor ( color , delay , NextchangeColor ) {   setTimeout (() => {     h1 . style . color = color ;     if ( NextchangeColor ) NextchangeColor ();   }, delay ); } changeColor ( "red" , 1000 ,() => {     changeColor ( "blue" , 1000 ,() => {         changeColor ( "orange" , 1000 ,() => {             changeColor ( "green" , 1000 ,() => {                 changeColor ( "yellow" , 1000 );             })         })     }) });
Read more

Refactoring callback hell code

Image
  let h1 = document . querySelector ( "h1" ); function changeColor ( color , delay ) {   return new Promise (( resolve , reject ) => {     setTimeout (() => {       h1 . style . color = color ;       resolve ( "color changed" );     }, delay );   }); } changeColor ( "red" , 1000 )   . then (() => {     console . log ( "Color changed to Red" );     return changeColor ( "orange" , 1000 );   })   . then (() => {     console . log ( "color changed to orange" );     return changeColor ( "green" , 1000 );   })   . then (() => {     console . log ( "color changed to green" );     return changeColor ( "blue" , 1000 );   })   . then (() => {     console . log ( "color changed to blue" );   });
Read more