How do I make line breaks in a Javascript countdown timer?

Question

I have a countdown timer in an inline JS element.

As of now they are all in one line, I would like days/hours/mins/secs to appear under each number, as shown here: http://prnt.sc/b8le72 - also, is it possible to style the text and numbers individually in CSS? (like making the text orange but keep numbers white)

https://jsfiddle.net/eyd8fd4x/

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>

<body>

<div id="forsidediv">
<img id="forsidepic" src="forsidepic.png">
</div>

<div id="countdowner">
<div id="countdown"></div>
</div>

<script>
CountDownTimer('06/25/2016 10:00 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 = days + ' dage ';
        document.getElementById(id).innerHTML += hours + ' timer ';
        document.getElementById(id).innerHTML += minutes + ' minutter ';
        document.getElementById(id).innerHTML += seconds + ' sekunder';
    }

    timer = setInterval(showRemaining, 1000);
}
</script>


</body>
</html>

CSS:

@charset "utf-8";

body {
margin:0;   
}

#countdowner {
color:white;
position:absolute;
margin:0;
margin-top:5em;
padding:0;
text-align:center;
width:100%;
font-size:1em;
font-family:Helvetica;
}

#forsidediv {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}

#forsidepic {
width: 100%;
}

Any chance you can tell me where to wrap? Adding
infront of document.getElementById does not work and it just disappears. — Thor Kousted, May 26 '16 at 09:49
Thanks. But now how do I style each div? If I give them an ID the timer disappears. — Thor Kousted, May 26 '16 at 10:11

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Approach #1: Involving no change to the current div layout:

Use nbsp or such equivalent whitespace characters to pad the text. This is pure hard coding of the text content and shall break for many situations.

Working fiddle here.

Approach #2: Splitting the current div (that holds the whole data) into four separate divs - one each for days, hours, etc.

Ensure these fours divs are laid out "side-by-side" rather than "one above another". The easiest approach I am aware of for solving this 'side-by-side' problem is the old school table layout. So, put all the divs in a single <tr> of the table, to render them as a single row. That'll do the trick.

Also, I found this answer helpful, although I could not get it to work here.

Working fiddle with the table layout here.

Working fiddle with the table layout and color formatting : Used the answer here for guidance: span in JS: here span in the HTML: here

edited May 23 '17 at 11:44

Community

1
1

answered May 26 '16 at 09:33

Sarath Chandra

1,850
19
40

Adding
both infront and behind does indeed work, however, all the text are now on top of each other, whereas I want it to be horizontally aligned, as shown in the picture in my first post. This is how it looks now: http://prntscr.com/b8lu52 – Thor Kousted May 26 '16 at 09:41
Where am I supposed to add text-align:center? Its alread in the CSS but its not horizontal. Your updated working fiddle is not horizontal. – Thor Kousted May 26 '16 at 09:57
I've put each section into a div as such: https://jsfiddle.net/s8rmycto/ However I do not know how to style each div. If I give them an ID the timer disappears. – Thor Kousted May 26 '16 at 10:13
Thanks. It works lovely. Do you know how to style the numbers and text separately? So that I can adjust font-size, color etc. for the numbers and the text like shown in this picture: http://prnt.sc/b8le72 ? Again, thanks for your help so far. – Thor Kousted May 26 '16 at 10:32
I believe that as a beginner on SO, you may have realized that StackOverflow is NOT a code writing service. Many of our code related problems might have solutions in some part of this amazing website. Take the time to search and find them. Glad I could help !! – Sarath Chandra May 26 '16 at 11:00

mplungjan · Answer 2 · 2016-05-26T13:09:59.310

My working suggestion which also pads the numbers and handles plural day/days hour/hours in Danish

CountDownTimer('06/25/2016 10:00 AM', 'countdown');

function pad(num) {
  return String("0" + num).slice(-2);
}

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;
  document.getElementById(id).innerHTML = '<div class="tm" id="' + id + 'days"></div>' +
    '<div class="tm" id="' + id + 'hours"></div>' +
    '<div class="tm" id="' + id + 'mins"></div>' +
    '<div class="tm" id="' + id + 'secs"></div>';

  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 + "days").innerHTML = days + '<br/>dag' + (days == 1 ? "" : "e");
    document.getElementById(id + "hours").innerHTML = pad(hours) + '<br/>time' + (hours == 1 ? "" : "r");
    document.getElementById(id + "mins").innerHTML = pad(minutes) + '<br/> minut' + (minutes == 1 ? "" : "ter");
    document.getElementById(id + "secs").innerHTML = pad(seconds) + '<br/>sekund' + (seconds == 1 ? "" : "er");
  }

  timer = setInterval(showRemaining, 1000);
}

@charset "utf-8";
body {
  margin: 0;
}

#countdowner {
  color: red;
  position: absolute;
  margin: 0;
  margin-top: 5em;
  padding: 0;
  text-align: center;
  width: 100%;
  font-size: 1em;
  font-family: Helvetica;
}

#forsidediv {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

#forsidepic {
  width: 100%;
}

#countdown {
  width: 100%
}

.tm {
  text-align: center;
  display: inline-block;
  padding-left: 20px
}

<div id="forsidediv">
  <img id="forsidepic" src="forsidepic.png">
</div>

<div id="countdowner">
  <div id="countdown"></div>
</div>

How do I make line breaks in a Javascript countdown timer?

2 Answers2