Timer

by Corentin Ballot

HTML

<div class="js-timer" data-end="1606460400000">
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
  <div style="font-family: Montserrat;font-size: 30px;font-weight: 600;">:</div>
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
  <div style="font-family: Montserrat;font-size: 30px;font-weight: 600;">:</div>
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
</div>

CSS

body {
  background-color: #000;
}

.js-timer {
  max-width: 340px;
  border: 1px solid #FFF;
  padding: 24px 0;
  display: flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items: center;
  margin:0 auto;
  text-align:center;
  color: #FFFFFF;
  justify-content: space-evenly;
}

.js-timer_auto {
}

.js-timer_value {
  color: #FFFFFF;
  font-family: "Montserrat";
  font-size: 50px;
  font-weight: bold;
}

.js-timer_unit {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

JavaScript

(function updateTimer() {
	for (const timer of document.querySelectorAll(".js-timer")) {
      const end = timer.dataset.end;
      const v = timer.querySelectorAll(".js-timer_auto")
      let rest = end - Date.now();
      
      // Plus de 3 jours restant
      if(rest > 259200000) {
      	// JOURS
        let days = Math.floor(rest/1000/60/60/24);
      	v[0].querySelector(".js-timer_value").innerHTML = days;
      	v[0].querySelector(".js-timer_unit").innerHTML = "Jours";
        rest = rest - days*1000*60*60*24;
        // HEURES
        let hours = Math.floor(rest/1000/60/60);
      	v[1].querySelector(".js-timer_value").innerHTML = hours>9? hours: "0" + hours;
      	v[1].querySelector(".js-timer_unit").innerHTML = "Heures";
        rest = rest - hours*1000*60*60;
        // MINUTES
        let minutes = Math.floor((rest/1000/60)%60);
      	v[2].querySelector(".js-timer_value").innerHTML = minutes>9? minutes: "0" + minutes;
      	v[2].querySelector(".js-timer_unit").innerHTML = "Minutes";
        rest = rest - minutes*1000*60*60;
      }
      // Moins de 3 jours restant
      else {
        // HEURES
        let hours = Math.floor(rest/1000/60/60);
      	v[0].querySelector(".js-timer_value").innerHTML = hours>9? hours: "0" + hours;
      	v[0].querySelector(".js-timer_unit").innerHTML = "Heures";
        rest = rest - hours*1000*60*60;
        // MINUTES
        let minutes = Math.floor((rest/1000/60)%60);
      	v[1].querySelector(".js-timer_value").innerHTML = minutes>9? minutes: "0" + minutes;
      	v[1].querySelector(".js-timer_unit").innerHTML = "Minutes";
        rest = rest - minutes*1000*60*60;
        // SECONDES
        let seconds = Math.floor((rest/1000/60)%60);
      	v[2].querySelector(".js-timer_value").innerHTML = seconds>9? seconds: "0" + seconds;
      	v[2].querySelector(".js-timer_unit").innerHTML = "Secondes";
        rest = rest - minutes*1000*60*60;
      }
	}
  setTimeout(updateTimer, 100);
})();