How to add event through time?

Question

I have a countup function. I want some event happen on specific time for example: I want to add a class on element if the time has already crossed 10 days or 10 hours.

You can check the thing here: https://stackblitz.com/edit/web-platform-cysyfo?file=index.html

//Here is my countup code:
function updateTimer() {
    // yyyy-MM-dd HH:mm:ss
    past = Date.parse("2023-01-18 06:00:00");
    now = new Date();
    diff = now - past;

    years = Math.floor(diff / (1000 * 60 * 60 * 24 * 30 * 12));
    months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
    days = Math.floor(diff / (1000 * 60 * 60 * 24));
    hours = Math.floor(diff / (1000 * 60 * 60));
    mins = Math.floor(diff / (1000 * 60));
    secs = Math.floor(diff / 1000);

    y = years;
    M = months - years * 12;
    d = days - months * 30;
    h = hours - days * 24;
    m = mins - hours * 60;
    s = secs - mins * 60;
    document.getElementById("timer")
        .innerHTML =
        '<div><span>since: 19.01.2023</span></div><br>' +
        '<div class="number">' + M + '<span>Months</span></div>' +
        '<div class="number">' + d + '<span>Days</span></div>' +
        '<div class="number">' + h + '<span>Hours</span></div>' +
        '<div class="number">' + m + '<span>Minutes</span></div>' +
        '<div class="number">' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);


//And this is what I have tried:
let Hello = document.querySelector('.hello')
let Timer = document.getElementById('timer')

if (timer.innerHTML == '<div class="number">10<span>Days</span></div>') {
    Hello.classList.add("Level-10");
} else {
    Hello.classList.remove("Level-10");
}

Answer 1

Why don't you simply add the class in the innerHtml instead of comparing the string?

<div class=" ${
      d === 10 ? '' : ''
    }">

// if (timer.innerHTML == '<div class="number">10<span>Days</span>

PS: setInterval(updateTimer, 1000);

https://stackblitz.com/edit/web-platform-kxeyt3?file=script.js