black' n' yellow countdown with utc date - responsive

by ian_smithz

HTML

<section class="countdown-container bg-yellow d-flex flex-wrap flex-column flex-lg-row flex-justify-content-centre flex-align-items-center">
<h4 class="text-black text-upper screwfix-bold t-25 t-md-38 t-lg-50 lh-1 my-15 my-md-20 mb-lg-35 mr-lg-25">Starts in</h4>
<div id="countdown" class="mb-15 mb-md-20 mt-lg-30"></div>
</section>

<!-- use https://www.epochconverter.com/ to get date for line 145 in js -->

CSS

/* WIP */

.countDown_interval_cont_hour:after {
  content: ":";
  font-size: 34px;
  line-height: 1;
}

@media (min-width: 375px) {
  .countDown_interval_cont_hour:after {
    font-size: 42px;
  }
}
@media (min-width: 768px) {
  .countDown_interval_cont_hour:after {
    font-size: 57px;
    line-height: 0.8;
  }
}
@media (min-width: 1025px) {
  .countDown_interval_cont_hour:after {
    line-height: 1;
    font-size: 68px;
  }
}





/* background colours */
.bg-black {background-color:#000}
.bg-yellow {background-color:#fef200}

/* text */
.text-black {color: #000}
.text-upper {text-transform: uppercase}

/* fonts */
.screwfix-regular {font-family: 'screwfix_betaregular', arial, sans-serif}
.screwfix-bold {font-family: 'screwfix_betabold', arial, sans-serif}
.screwfix-heavy {font-family: 'screwfix_betaheavy', arial, sans-serif}

/* font sizes */
.t-25 {font-size: 25px}
    
@media (min-width: 768px) {
    .t-md-38 {font-size: 38px} 
}

@media (min-width: 1025px) {
    .t-lg-50 {font-size: 50px} 
}

/* line heights */
.lh-1   {line-height: 1}
.lh-1-1 {line-height: 1.1}
.lh-1-2 {line-height: 1.2}

/* margins */
.my-15 {margin-top: 15px; margin-bottom: 15px}
.mb-15 {margin-bottom: 15px}

@media (min-width: 768px) {
    .mb-md-15 {margin-bottom: 15px}
    .mb-md-20 {margin-bottom: 20px}
    .my-md-20 {margin-top: 20px; margin-bottom: 20px}
}

@media (min-width: 1025px) {
    .mt-lg-30 {margin-top: 30px}
    .mr-lg-25 {margin-right: 25px}
    .mb-lg-35 {margin-bottom: 35px}
}





/* flex */
.d-flex {display: flex}
.flex-wrap {flex-wrap: wrap}

/* flex vertical alignment */
.flex-align-items-center {align-items: center}

/* flex horizontal alignment */
.flex-justify-content-centre {justify-content: center;}

.flex-column {flex-direction: column}

@media (min-width: 1025px) {
    .flex-lg-row {flex-direction: row}
}





/* countdown timer specifically */

.countDown_digit_cont {
  perspective: 2.3em;
  width: 24px;
  height: 36px;
  position: relative;
  line-height:...

JavaScript

"use strict";

 let _typeof =
   typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
     ? function(obj) {
         return typeof obj;
       }
     : function(obj) {
         return obj && typeof Symbol === "function" && obj.constructor === Symbol
           ? "symbol"
           : typeof obj;
       };

 function Countdown(opt) {
   "use strict";

   let options = {
       cont: null,
       endDate: {
         year: 0,
         month: 0,
         day: 0,
         hour: 0,
         minute: 0,
         second: 0
       },
       endCallback: null,
       outputFormat: "year|week|day|hour|minute|second",
       outputTranslation: {
         year: "Roky",
         week: "Týdny",
         day: "Dny",
         hour: "Hodin",
         minute: "Minut",
         second: "Vteřin"
       }
     },
     lastTick = null,
     intervalsBySize = ["year", "week", "day", "hour", "minute", "second"],
     TIMESTAMP_SECOND = 1000,
     TIMESTAMP_MINUTE = 60 * TIMESTAMP_SECOND,
     TIMESTAMP_HOUR = 60 * TIMESTAMP_MINUTE,
     TIMESTAMP_DAY = 24 * TIMESTAMP_HOUR,
     TIMESTAMP_WEEK = 7 * TIMESTAMP_DAY,
     TIMESTAMP_YEAR = 365 * TIMESTAMP_DAY,
     elementClassPrefix = "countDown_",
     interval = null,
     digitConts = {};

   loadOptions(options, opt);

   /**
    * @param date
    * @returns {Date}
    */
   function getDate(date) {
     if (
       (typeof date === "undefined" ? "undefined" : _typeof(date)) === "object"
     ) {
       if (date instanceof Date) {
         return date;
       } else {
         let expectedValues = {
           day: 0,
           month: 0,
           year: 0,
           hour: 0,
           minute: 0,
           second: 0
         };

         for (let i in expectedValues) {
           if (expectedValues.hasOwnProperty(i) && date.hasOwnProperty(i)) {
             expectedValues[i] = date[i];
           }
         }

         return new Date(
           expectedValues.year,
           expectedValues.month > 0
             ?...