black' n' yellow countdown with utc date - responsive

by ian_smithz

HTML

<section id="countdown-background" class="bg-yellow"></section>

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

CSS

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

@media (min-width: 768px) {

    .countdown h4 {
        margin-bottom: 2rem;
    }
}

.countDown_digit_cont {
  perspective: 2.3em;
  width: 24px;
  height: 36px;
  position: relative;
  line-height: 1.125em;
  font-size: 34px;
  font-weight: bold;
  border-radius: 0.08em;
}

@media (min-width: 375px) {

  .countDown_digit_cont {
    width: 33px;
    height: 48px;
    font-size: 42px;
  }
}

@media (min-width: 768px) {

  .countDown_digit_cont {
    width: 43px;
    height: 54px;
    line-height: 1em;
    font-size: 57px;
  }
}

@media (min-width: 1025px) {

  .countDown_digit_cont {
    perspective: 2.3em;
    width: 52px;
    height: 76px;
    line-height: 1.125em;
    font-size: 68px;
  }
}

.countDown_interval_basic_cont_description {
  margin-top: 0.6em;
  font-size: 11px;
  font-weight: bold;
  color: white;
  text-align: center;
}

@media (min-width: 768px) {

  .countDown_interval_basic_cont_description {
    font-size: 15px;
  }
}

@media (min-width: 1025px) {

  .countDown_interval_basic_cont_description {
    font-size: 17px;
  }
}

.countDown__interval_basic_cont:nth-child(n + 1):not(:last-child) {
    margin-right: .7em;
}

@media (min-width: 768px) {

  .countDown__interval_basic_cont:nth-child(n + 1):not(:last-child) {
    margin-right: 1.4em;
  }
}

.countDown_cont {
  font-family: 'screwfix_bold', Arial, sans-serif;
  font-size: 14px;
  display: flex;
  color: #0053a0;
  display: flex;
/*  width: fit-content;*/
  margin: 0 auto;
}
.countDown_interval_cont {
  display: flex;
  justify-content: space-around;
  width: auto;
}

.countDown_interval_basic_cont {
  display: flex;
  flex-direction: column;
}

.countDown_digit_cont:nth-child(n + 1):not(:last-child) {
  margin-right: 0.10em;
}
.countDown_digit_last_placeholder,
.countDown_digit_new_placeholder {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  text-align: center;
  overflow:...

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 {
               ...