Change Javascript timer with CSS

Question

I want to create the following resultenter image description here

It is a cowntdown that I want to be in my html code.I have created the timer with javascript and it works fine but I cannot make it appear as I want in my html.I want it to appear exactly like the picture.

Here is my code

my html

<div class="container">
    <hr class="new4">
        <p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
        <p id="timer" class="timer text-center"></p> 
        
        
        <hr class="new4">
        
    </div>

and my javascript

// Set the date we're counting down to
var countDownDate = new Date("Sep 19, 2020 16:30:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("timer").innerHTML = days + " " + hours + " "
  + minutes + " " + seconds + " ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "Συμβαίνει Τώρα";
  }
}, 1000);

and my css

hr.new4 {
  border: 1px solid white;
}

.timer{
    font-size: 117px;
    color:white;
}

Here is how it looks for me.enter image description here

I can not understand how to make the text apear exatly bellow the numbers and I cant understand how to add paddings between each of the elements that get return by the javascript document.getElementById() function. Please help me it is an emerjency I must have it until tomorow

Note that parsing dates in any format other than certain variants of ISO 8601 are not guaranteed to work across browsers. Either reformat your date to use YYYY-MM-DDThh:mm:ss format or use numbers as arguments. See [Why does Date.parse give incorrect results?](https://stackoverflow.com/q/2587345/215552) — Heretic Monkey, Sep 08 '20 at 17:38

score 0 · Answer 1 · answered Sep 08 '20 at 17:32

0

To make each time unit a different element, update the timer HTML like so:

document.getElementById("timer").innerHTML = `
  <span data-unit="Days">${days}</span>
  <span data-unit="Hours">${hours}</span>
  <span data-unit="Minutes">${minutes}</span>
  <span data-unit="Seconds">${seconds}</span>
`;

Then style them using CSS, to add margin, and a pseudo element representing the unit:

#timer span {
  display: inline-block;
  margin: 10px;
}

#timer span:before {
  content: attr(data-unit);
  position: absolute;
  transform: translate(offsetX, offsetY); /* Here you have to find the correct X and Y values */
}

answered Sep 08 '20 at 17:32

Oskar Zanota

472
3
12

hi can you tell me how to center the text unde the numbers? transform moves all the text, i want each text to be centered – Stefanie Sep 08 '20 at 22:34
@Stefanie well for that you’ll have to try out different translate values, and you can apply specific ones for the different units using `:nth-child()`. But it seems like @Steve Cruz has a good solution too, you should check it out – Oskar Zanota Sep 09 '20 at 08:08

Steve Cruz · Answer 2 · 2020-09-08T23:51:09.450

To properly center the text under the numbers I recommend that you use flexbox.

I created additional containers to properly space things with display: flex and used flex-direction: column when necessary or did not defining any value for my flex container in some places because the default value for flex-direction is row.

Note that I separated the timer into different <p> and used static values in our <p> elements for our digits that represent days, hours, minutes and seconds:

Separating them into different <p> allow us to have more control over their positioning.
The static values are only for illustrative purposes because I did not modify your JavaScript code.
You have to modify your JavaScript code to update each <p> in the HTML individually.

Check my CodePen example with the modified HTML and CSS: https://codepen.io/stevescruz/pen/bGpLjKj.

<div class="container">
    <hr class="new4">
    <div class="timer-container">
        <p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
        <div class="content-container">
            <div class="unit-container">
                <p id="timer" class="timer text-center">22</p>
                <p class="timer-text">day</p>
            </div>
            <div class="unit-container">
                <p id="timer" class="timer text-center">23</p>
                <p class="timer-text">hours</p>
            </div>
            <div class="unit-container">
                <p id="timer" class="timer text-center">41</p>
                <p class="timer-text">min</p>
            </div>
            <div class="unit-container">
                <p id="timer" class="timer text-center">16</p>
                <p class="timer-text">sec</p>
            </div>
        </div>
    </div>
    <hr class="new4">
</div>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

hr.new4 {
    border: 1px solid white;
}

.timer-container {
    display: flex;
    flex-direction: column;
}

.content-container {
    display: flex;
    justify-content: space-around;
}

.countdown {
    font-size: 48px;
    font-weight: bold;
    color: white;

    align-self: center;
}

.unit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer {
    font-size: 117px;
    color: white;
}

.timer-text {
    font-size: 60px;
    color: white;
}

body {
    background: #194079;
}

Change Javascript timer with CSS

2 Answers2