BS4 Dynamic Countdown Clock

Question

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code:

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

For further reference and demonstration, visit: https://codepen.io/Darlton29/pen/OJNzXEB

The challenge I am facing is creating a responsive design for mobile devices. I want the 4 time blocks to form a cube layout, stacked in pairs of 2 with even spacing. While I've made progress with one block, achieving the same for the others while maintaining consistency has proven difficult. My coding structure relies on Bootstrap 4.

CSS:

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

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

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

.smalltext{
    padding-top: 2px;
  padding-bottom: -10px;
    font-size: 16px;
}

javascript html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Problem solved! Here is the solution: https://codepen.io/Ultra_Hopeful/pen/bGpLeRK

function GetTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeCounter(id, endtime) {
  var countdown = document.getElementById(id);
  var daysSpan = countdown.querySelector('.days');
  var hoursSpan = countdown.querySelector('.hours');
  var minutesSpan = countdown.querySelector('.minutes');
  var secondsSpan = countdown.querySelector('.seconds');

  function updateCounter() {
    var t = GetTimeRemaining(endtime);

    daysSpan.innerHTML = ('0' + t.days).slice(-2);
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(interval);
    }
  }

  updateCounter();
  var interval = setInterval(updateCounter, 1000);
}

var deadlineDate = new Date(Date.parse(new Date("sep 18, 2020 15:37:25")));

initializeCounter('counterDiv', deadlineDate);

#counterDiv{
  font-family: sans-serif;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:5px;
  width:fit-content;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}
#counterDiv div{
  border-radius: 3px;
  padding:5px;
  background: #00BF96;
}

#counterDiv div > span{
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 3px;
  font-size:100%;
  background: #00816A;
}

.smalltext{
  padding: 4px 0px 5px 0px;
  font-size:16px;
}
/* Media Queries */
@media only screen and (max-width: 600px) { #counterDiv { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 600px) { #counterDiv { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 768px) { #counterDiv { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media only screen and (min-width: 992px) {...}
@media only screen and (min-width: 1200px) {...}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section style="background-color: pink; color: white;">
  <div class="container-fluid mt-5">
    <h1>BIRTHDAY COUNTDOWN</h1>
    <div id="counterDiv">

      <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
      </div> 

      <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
      </div> 

      <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
      </div> 

      <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
      </div>

    </div>
  </div>
</section>

Answer 2

Problem solved! Here is the solution: https://codepen.io/Ultra_Hopeful/pen/bGpLeRK

function GetTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeCounter(id, endtime) {
  var countdown = document.getElementById(id);
  var daysSpan = countdown.querySelector('.days');
  var hoursSpan = countdown.querySelector('.hours');
  var minutesSpan = countdown.querySelector('.minutes');
  var secondsSpan = countdown.querySelector('.seconds');

  function updateCounter() {
    var t = GetTimeRemaining(endtime);

    daysSpan.innerHTML = ('0' + t.days).slice(-2);
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(interval);
    }
  }

  updateCounter();
  var interval = setInterval(updateCounter, 1000);
}

var deadlineDate = new Date(Date.parse(new Date("sep 18, 2020 15:37:25")));

initializeCounter('counterDiv', deadlineDate);

#counterDiv{
  font-family: sans-serif;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap:5px;
  width:fit-content;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}
#counterDiv div{
  border-radius: 3px;
  padding:5px;
  background: #00BF96;
}

#counterDiv div > span{
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 3px;
  font-size:100%;
  background: #00816A;
}

.smalltext{
  padding: 4px 0px 5px 0px;
  font-size:16px;
}
/* Media Queries */
@media only screen and (max-width: 600px) { #counterDiv { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 600px) { #counterDiv { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 768px) { #counterDiv { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media only screen and (min-width: 992px) {...}
@media only screen and (min-width: 1200px) {...}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section style="background-color: pink; color: white;">
  <div class="container-fluid mt-5">
    <h1>BIRTHDAY COUNTDOWN</h1>
    <div id="counterDiv">

      <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
      </div> 

      <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
      </div> 

      <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
      </div> 

      <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
      </div>

    </div>
  </div>
</section>

BS4 Dynamic Countdown Clock

Answer №1

Similar questions

Pinia alert: The function "getActivePinia()" was invoked without an active Pinia instance. Could it be possible that you overlooked installing Pinia?

How can I prevent an image from scrolling on a webpage?

The issue with the NextJS Layout component is that it is failing to display the page content, with an error message indicating that objects cannot be used

Values in Local Storage are not located upon first attempt, but after a reload they function properly

Please refresh the page after acknowledging the error

What is causing the poor color and contrast of equirectangular backgrounds in Three.js, and what steps can be taken to improve them?

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Ways to conceal ad container when ad space remains empty

Improving Vue Method with Lodash?

Starting Web Server using File (file://) protocol

Unable to assign an IP address to an Express JS application

Ways to access the HTML content of a component in vue.js

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

The background image does not appear on the animated div until the browser window is resized

Is there a way to begin using the :nth-child() selector from the last element instead of the first?

Changing the color of an element on click using jQuery's .css() method,

What is the best way to ensure that the maximum price is mandatory when entering a minimum price?

What is the best way to incorporate PHP code within a JavaScript function?

Utilizing the datepicker options function within a different function