Refactoring callback hell code

 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");
  });



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

TODO list with DOM

Image
 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 = do...
Read more