timer + there is so much to learn

28 Jan, 2025

i always thought these loaders are cool and wondered how they work. most of the time they are on the very top of the page but for this small activity i treated it as a sort of counting down timer for a container with a start and stop button.

this is a very small project written with HTML, CSS and JS that might me implemented on another project. here is the code on github.

i started this for funsies and discovered this could actually be run on JS by just toggling a class for CSS lol.

.timer {
  width: 100%;
  height: 4px;
  background-color: rgb(15, 76, 56);
}
.running {
 width: 0;
 transition: width 8s linear 1s; 
}

const timer = document.querySelector(".timer");
const startButton = document.getElementById("start")
startButton.addEventListener("click", () => {
   timerDiv.classList.toggle("running");
});

this looks and feels great, but an emphasis on the 8s. it's bad to put that kind of data on the stylesheet, right ??

Resources:

• setInterval()
• CSS transition
• How to Execute setInterval Function without Delay for the First Time in JavaScript?

anyway, as always:
there is so much to learn.

there is so much to learn :)

#notes #project #web