Animating component based on the time that has passed

Question

I'm trying to do a timer component, until now I have the following:

https://jsfiddle.net/dqj1x89z/

All the logic I guess should go there:

function startTimer() {
        timerInterval = setInterval(() => {
        timePassed = timePassed += 1;
        timeLeft = TIME_LIMIT - timePassed;
        document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
        // var formattedTimeLabel = $('.base-timer__label').html();
        // formattedTimeLabel.replaceWith(`${formatTime(timeLeft)}`);

        //  if (timeLeft === 0) {
        //     onTimesUp();
        //     }
        }, 1000);
    }

Ignore the point that is out of the box, what I want is to do something like that:

Basically I want to fill the dots with the color orange based on the passed time and on the current dot to do something different, I don't expect help with the CSS, but I can't figure it out the logic behind it using JQuery or JS.

Answer 1

jQuery might be a good way to solve the issue indeed. You can add classes to the elements to represent if

1. They represent a time in the pass
2. They represent the current time

.tbi-phone-verification-loader div.passed {
  background-color: orange !important;
}
.tbi-phone-verification-loader div.current {
  transform: scale(1.5);
  // shadow

}

To determine which classes to add to the elements, you can loop over the divs and check if the index corresponds to a time in the past. You also need to keep track of the last one so you can add another class to it. You could optimize things further but this achieves the expected result.

function startTimer() {
  timerInterval = setInterval(() => {
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML =
      formatTime(timeLeft);

    const dots = $(".tbi-phone-verification-loader > div");

    let lastIndex = 0;

    dots.each((index, element) => {
      $(element).removeClass("current");

      if (index * 10 < timePassed) {
        $(element).addClass("passed");

        if (lastIndex <= index) {
          lastIndex = index;
        }
      }
    });

    dots[lastIndex].classList.add("current");
  }, 1000);
}