Customizing the appearance of a JavaScript countdown timer's output on an individual basis

Question

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute values. However, when I attempted to implement this, the timer did not replace the previous numbers as expected, resulting in a messy display.

Below is the code snippet that contains the output I am trying to customize:

document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';

Here's a fiddle where the counter works correctly but lacks separate styling

However, my attempts to place each unit in separate divs resulted in unexpected behavior, as the counter failed to update and simply added numbers instead. Here's a fiddle demonstrating this issue

Can anyone advise me on how to achieve the desired custom styling for the JavaScript date counter?

javascript html css

Answer 1

Answer №1

When adding the innerHTML values to the div, you should enclose them in a span with a specified class.

Check out the JSfiddle demo here

document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';

CountDownTimer('01/01/2016 10:01 AM', 'countdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
    document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
    document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
    document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
  }

  timer = setInterval(showRemaining, 1000);
}

#countdown {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: 20px;
  color: #ff0000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 32px;
  display: inline;
}
.days {
  color: lightblue;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.minutes {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.seconds {
  color: gray;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.hours {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}

<div id="countdown">


</div>

Answer 2

When adding the innerHTML values to the div, you should enclose them in a span with a specified class.

Check out the JSfiddle demo here

document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';

CountDownTimer('01/01/2016 10:01 AM', 'countdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
    document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
    document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
    document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
  }

  timer = setInterval(showRemaining, 1000);
}

#countdown {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: 20px;
  color: #ff0000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 32px;
  display: inline;
}
.days {
  color: lightblue;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.minutes {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.seconds {
  color: gray;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.hours {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}

<div id="countdown">


</div>

Answer 3

Answer №2

By simply removing the line

document.getElementById(id).innerHTML = days + 'days ';

You will avoid "creating a big mess.". It's important to clear the div before adding new content.

document.getElementById(id).innerHTML = '';

Answer 4

By simply removing the line

document.getElementById(id).innerHTML = days + 'days ';

You will avoid "creating a big mess.". It's important to clear the div before adding new content.

document.getElementById(id).innerHTML = '';

Answer 5

Answer №3

Why not distribute your time elements among four distinct div containers within the existing one, instead of consolidating them under a single ID? By employing getElementById, you can then place each time element into its respective sub-division.

This approach enables you to apply unique styling using CSS for each individual time element.

Answer 6

Why not distribute your time elements among four distinct div containers within the existing one, instead of consolidating them under a single ID? By employing getElementById, you can then place each time element into its respective sub-division.

This approach enables you to apply unique styling using CSS for each individual time element.

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

Answer №1

Answer №2

Answer №3

Similar questions

Deactivate a button when clicked on a card that has been mapped

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

The key to highlighting the search terms in bold format

Utilizing the fs module in Node.js

TinyMCE toolbar missing the "hr" option

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

Creating a type definition for the createSelector function based on the useQuery result

gRaphael - the struggle of animating a line chart

Troubleshooting server-side sorting issues with AJAX implementation, encountering problems with headers functionality

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

"Creating an array object in the state of Reactjs - a step-by-step

I want to hide jqvmap when viewing on mobile devices

Hexagonal Shape with Rotating Border Gradient in CSS

Set a value for the hidden field on the page using client-side scripting

Adjusting a NodeJS module for easier integration into codebases

Does the Mirage addon work effectively in the ember.js tutorial?

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

Navigation that remains fixed while scrolling

Add slides in PowerPoint before or after the currently selected slide to enhance your presentation flow

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?