AnswerBun.com

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

Stack Overflow Asked by inKABusser on December 21, 2020

  • 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

<div class="container">
  <h2>We're launching soon</h2>
  <div class="countdown">
    <div id="day" class="item"> <p>00</p></div>
    <div id="hour" class="item"><p>00</p></div>
    <div id="minute" class="item"><p>00</p></div>
    <div id="second" class="item"><p>00</p></div>
  </div>
  <div class="tex">
    <div>Days</div>
    <div>Hours</div>
    <div>Minutes</div>
    <div>Seconds</div>
  </div>
</div>
<div class="icons">
  <a href="#" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path id="fb" fill="#8385A9" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a>
  <a href="#" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path id="ig" fill="#8385A9" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
  <a href="#" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path id="pt" fill="#8385A9" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg></a>
</div>

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

const observer = new MutationObserver((mutations) => {
  // clear 'active' class from all items
  items.forEach(el => el.classList.remove("active"));
  // add 'active' for items that mutated
  for (let mutation of mutations) {
    if (mutation.type === "childList") {
      mutation.target.classList.add("active");
    } else {
      mutation.target.classList.remove("active");
    }
  }
});

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

Correct answer by domenikk on December 21, 2020

Add your own answers!

Related Questions

Replace duplicates items in array with different values

3  Asked on November 7, 2021 by mohamed-eshaftri

         

How to fix object “x” not found

2  Asked on November 7, 2021 by ronie-febriansah

 

link error when using random_device from boost

2  Asked on November 7, 2021 by dikiidog

     

Error: invalid input syntax for type integer

0  Asked on November 7, 2021 by hammad-ali

     

android studio : My app crashes immediately after start

5  Asked on November 7, 2021 by user13930404

   

Int + Str type python

1  Asked on November 7, 2021

     

Javascript Output is giving empty response

0  Asked on November 7, 2021 by manish-jha

     

Create many CSV Files based on Pandas df column value

2  Asked on November 7, 2021 by eithar

       

How to change radio button checked attribute

2  Asked on November 7, 2021 by white-death

       

Vue js/Javascript Objects.assign() not working

0  Asked on November 7, 2021 by madsongr

     

Problems with HTTP/2 on nginx for Windows?

0  Asked on November 7, 2021 by camaross

     

Error to start application after insert Entity Framework

1  Asked on November 7, 2021 by bircastri

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP