<section class="countdown-container">
  
  <div class="days-container">
    <div class="days"></div>
    <div class="days-label">days</div>
  </div>
  
  <div class="hours-container">
    <div class="hours"></div>
    <div class="hours-label">hours</div>
  </div>
  
  <div class="minutes-container">
    <div class="minutes"></div>
    <div class="minutes-label">minutes</div>
  </div>
  
  <div class="seconds-container">
    <div class="seconds"></div>
    <div class="seconds-label">seconds</div>
  </div>
  
</section>

body, html {
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background: url('https://images.unsplash.com/photo-1472148083604-64f1084980b9?dpr=2&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=') no-repeat center center / cover;
  color: white;
}

.countdown-container {
  display: flex;
  width: 100%;
  max-width: 70%;
  justify-content: space-between;
}

.days-container,
.hours-container,
.minutes-container, 
.seconds-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.1);
  border: 5px solid rgba(255,255,255,0.3);
  width: 140px;
  height: 140px;
  border-radius: 99px;
}

.days,
.hours,
.minutes,
.seconds {
  font-size: 2.5em; 
  margin: 10px 0;
}


.days-label,
.hours-label,
.minutes-label,
.seconds-label {
  text-transform: uppercase;
  margin-bottom: 5px;
}

@media (max-width: 800px) {
  
  .countdown-container {
    max-width: 90%;
  }
  
  .days-container,
  .hours-container,
  .minutes-container, 
  .seconds-container {
    font-size: 0.8em;
    width: 100px;
    height: 100px;
  }
}

const countDownClock = (number = 100, format = 'seconds') => {
  
  const d = document;
  const daysElement = d.querySelector('.days');
  const hoursElement = d.querySelector('.hours');
  const minutesElement = d.querySelector('.minutes');
  const secondsElement = d.querySelector('.seconds');
  let countdown;
  convertFormat(format);
  
  
  function convertFormat(format) {
    switch(format) {
      case 'seconds':
        return timer(number);
      case 'minutes':
        return timer(number * 60);
        case 'hours':
        return timer(number * 60 * 60);
      case 'days':
        return timer(number * 60 * 60 * 24);             
    }
  }

  function timer(seconds) {
    const now = Date.now();
    const then = now + seconds * 1000;

    countdown = setInterval(() => {
      const secondsLeft = Math.round((then - Date.now()) / 1000);

      if(secondsLeft <= 0) {
        clearInterval(countdown);
        return;
      };

      displayTimeLeft(secondsLeft);

    },1000);
  }

  function displayTimeLeft(seconds) {
    daysElement.textContent = Math.floor(seconds / 86400);
    hoursElement.textContent = Math.floor((seconds % 86400) / 3600);
    minutesElement.textContent = Math.floor((seconds % 86400) % 3600 / 60);
    secondsElement.textContent = seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;
  }
}


/*
  start countdown
  enter number and format
  days, hours, minutes or seconds
*/
countDownClock(20, 'days');