Countdown

countdown.markdown

Countdown

A Pen by Henry on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet">

<div>
  <h1 class="counter"/>
    <h1 class="counterms"/>
</div>

script.js

let time = 1000 * 60 * 2; // in ms
const enableMilisecs = true;

const el = document.querySelector('.counter');
const od = new Odometer({
  el: el,
  value: 0,
  duration: 900,
  // Any option (other than auto and selector) can be passed in here
  format: enableMilisecs ? '(ddd:dd:ddd)' : '(ddd:dd)',
});

let timeLeft = time;

const interval = setInterval(()=> {
  timeLeft -= 200;
  let mili = parseInt((timeLeft%1000))  
  let secs = parseInt((timeLeft/1000)%60)
  let mins = parseInt((timeLeft/(1000*60))%60) 
   if (timeLeft == 0) {
      el.remove();
      el1 = document.querySelector(".counterms");
      el1.innerHTML = "Der Stream startet gleich!";
      clearInterval(interval);
      return
  }
  let innermilisecs = enableMilisecs && mili.toString().padStart(3, "0");
  el.innerHTML = `${mins.toString().padStart(2, "0")}${secs.toString().padStart(2, "0")}${innermilisecs}`
}, 200)

scripts

<script src="https://cdn.rawgit.com/HubSpot/odometer/v0.4.6/odometer.min.js"></script>

style.css

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1, .odometer-inside *, .odometer-digit, .odometer-value, .odometer-last-value, .odometer-first-value, .odometer-animating {
  font-size: 30vmin;
  font-family: "Roboto" !important;
background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);    -webkit-background-clip: text !important;
    -webkit-text-fill-color: #1919191c;
}

.counterms {
  font-size: 10vmin;
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  transition: transform .25s;
}

styles

<link href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-default.min.css" rel="stylesheet" />