Flip Clockdown

flip-clockdown.markdown

Flip Clockdown

A Pen by Gulnara on CodePen.

License.

index.html

<h1>Countdown Clock</h1>
<iv id="clockdiv" class="container">
  <div>
      <span class="minutes1"></span>
      <div class="smalltext"></div>
  </div>
  <div>
    <span class="minutes2"></span>
    <div class="smalltext"></div>
  </div>  
  <div>
    <span class="seconds1"></span>
    <div class="smalltext"></div>
  </div>
  <div>
    <span class="seconds2"></span>
    <div class="smalltext"></div>
  </div>
</div>
<div>
  <span class="bigtext1">Minutes</span>
</div>
<div> 
  <span class="bigtext2">Seconds</span>
</div>

script.js

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds1 = Math.floor((total / 1000) % 60);
  const seconds2 = Math.floor((total / 1000) % 60);
  const minutes1 = Math.floor((total / 1000 / 60) % 60);
  const minutes2 = Math.floor((total / 1000 / 60) % 60);
  
  return{
    total, 
    minutes1,
    minutes2,
    seconds1,
    seconds2
  };
}

function initializeClock(id, endtime){
  const clock = document.getElementById(id);
  const minutes1Span = clock.querySelector('.minutes1');
  const minutes2Span = clock.querySelector('.minutes2');
  const seconds1Span = clock.querySelector('.seconds1');
  const seconds2Span = clock.querySelector('.seconds2');

  function updateClock(){
    const t = getTimeRemaining(endtime);
    minutes1Span.innerHTML = ('0' + t.minutes1).slice(-2).slice(0, -1);
    minutes2Span.innerHTML = ('0' + t.minutes2).slice(-1);
    seconds1Span.innerHTML = ('0' + t.seconds1).slice(-2).slice(0, -1);
    seconds2Span.innerHTML = ('0' + t.seconds2).slice(-1);
    
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock, 1000);
}

const deadline = new Date(Date.parse(new Date()) + 3 * 24 * 60 * 60 * 1000);

initializeClock('clockdiv', deadline);

style.scss

body{
  text-align: center;
  background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div{
  padding: 10px;
  border-width: 3px 0 3px 0;
  border-color: #00ECB9; 
  border-style: solid; 
  border-radius: 5px;
  background: #00BF96;
  display: inline-block;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  border-width: 0 3px 0 3px;
  display: inline-block;
  background: #00816A;
}

.smalltext{
  padding-top: 5px;
}

.bigtext1{
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  border-radius: 3px;
  width: 82px;
  background: #00BF96;
  display: inline-block;
}

.bigtext2{
  margin: 5px;
  padding: 10px;
  font-size: 16px;
  color: #fff; 
  border-radius: 3px;
  width: 82px;
  background: #00BF96;
  display: inline-block;
}

.container {
  padding: 10px;
  height: 190px;
  width: 400px;
}