i need to add a an active class to the flip clock countdown

Question

I have this countdown clock for the new year let countDate = new Date('Jan 1, 2021 00:00:00').getTime(); const newYear = () => { let now = new Date().getTime(); gap = countDate - now; let second = 1000; let minute = second * 60; let hour = minute * 60; let day = hour * 24; let d = Math.floor(gap / (day)); let h = Math.floor((gap % (day)) / (hour)); let m = Math.floor((gap % (hour)) / (minute)); let s = Math.floor((gap % (minute)) / (second)); document.getElementById('day').innerText= d; document.getElementById('hour').innerText= h; document.getElementById('minute').innerText= m; document.getElementById('second').innerText= s; } setInterval(function(){ newYear(); },1000) it works fine but I'm trying to add an active class so when the time change it flips i tried to use mutationobserver but it adds the active class for every element (days, hours, minutes. seonds) and I only want to add the active class for the elements that changes const myItems = document.queryselector('div .item') const observer = new MutationObserver(mutations => { console.log(mutations); for(let mutation of mutations) { if (mutation.type == 'childList') { mutation.target.classList.add('active') }else { mutation.target.classList.remove('active'); } } }); observer.observe(myItems, { innerText: true, childList:true, subtree:true, characterData:true }); here's the HTMl

We're launching soon

00

Days

Hours

Minutes

Seconds

domenikk · Accepted Answer

One issue is you're setting the innerText every second, so all elements are mutated.
Another is that you need to remove .active class if element is not the mutation target.
Give this code a try, if it achieves what you have in mind:
let countDate = new Date("Jan 1, 2021 00:00:00").getTime();

const newYear = () => {
  let now = new Date().getTime();
  const gap = countDate - now;

let second = 1000;
  let minute = second * 60;
  let hour = minute * 60;
  let day = hour * 24;

let d = Math.floor(gap / day);
  let h = Math.floor((gap % day) / hour);
  let m = Math.floor((gap % hour) / minute);
  let s = Math.floor((gap % minute) / second);

const dayEl = document.getElementById("day");
  const hourEl = document.getElementById("hour");
  const minuteEl = document.getElementById("minute");
  const secondEl = document.getElementById("second");
  // only set innerText if it changed
  if (dayEl.innerText != d) dayEl.innerText = d;
  if (hourEl.innerText != h) hourEl.innerText = h;
  if (minuteEl.innerText != m) minuteEl.innerText = m;
  if (secondEl.innerText != s) secondEl.innerText = s;
};
setInterval(newYear, 1000);

//

const itemsContainer = document.querySelector(".countdown");
const items = Array.from(document.getElementsByClassName("item"));

observer.observe(itemsContainer, {
  innerText: true,
  childList: true,
  subtree: true,
  characterData: true
});

i need to add a an active class to the flip clock countdown

One Answer

Add your own answers!

Ask a Question