JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

JavaScript

/* 1
const listItems = document.getElementById("list").children;
for(let i=0; i<listItems.length; i++)
  listItems[i].style.backgroundColor = "red";
 */
 
/* 2 
const listItems = document.getElementById("list").children;
let i=0;
const id = setInterval(() => {
  listItems[i].style.backgroundColor = "red";
  i++;
  
  // once we've gone through all the items
  if(i == listItems.length)
  clearInterval(id);
}, 500);
*/

/* 3 
function applyForEach(color, delay){
 const listItems = document.getElementById("list").children;
 let i=0;
 const id = setInterval(() => {
  listItems[i].style.backgroundColor = color;
  i++;
  
  // once we've gone through all the items
  if(i == listItems.length)
    clearInterval(id);
  }, delay);
}

// applyForEach("red", 500);
applyForEach("blue", 300);
*/

/* 4 */
function applyForEach(action, delay){
 const listItems = document.getElementById("list").children;
 let i=0;
 const id = setInterval(() => {
  action(listItems[i]);
  i++;
  
  // once we've gone through all the items
  if(i == listItems.length)
    clearInterval(id);
  }, delay);
}

function makeBlueBackground(item){
	item.style.backgroundColor = "blue";
}

function removeNode(item) {
	item.remove();
}

function makeTextBold(item){
	item.style.fontWeight = "bold";
}

applyForEach(makeBlueBackground, 300);
applyForEach(makeTextBold, 1000);