Fault with adding numbers in javascript

Good Evening from sweden!!
I need some help with my countdown code.

In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?

Hope to be hearing from you guys soon since this have to be done before the day is over

    <!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

    font-family: Khula;

    src: url('Khula-ExtraBold.ttf');

}



p {

    text-align: center;

    font-size: 60px;

    margin-top: 0px;

    font-family: Khula;

}

#text {

    text align: center;

    font-size:9px;

}

</style>

</head>

<body>



<p id="date"></p>

<script>

// Countdown to

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



    // Get todays 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="date"

    document.getElementById("date").innerHTML = days + " " + hours + " "

    + minutes;



    // If the count down is over, write some text 

    if (distance < 0) {

        clearInterval(x);

        document.getElementById("date").innerHTML = "EXPIRED";



    // If the number of minutes left is between 0 and 9 add a 0 before it

    if (minutes < 10 && minutes < 0) {

    document.getElementById("date").innerHTML = days + " " + hours + " 0"

    + minutes;

    }

        }

}, 1000);

</script>



</body>

</html>

asked Nov 13 '18 at 16:06

Albin Karlsson

4

Are you sure you want minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0

– wowserx
Nov 13 '18 at 16:08

Also, you're missing a closing } for the if (distance < 0)

– Oram
Nov 13 '18 at 16:09

@Oram no he's not, it's just poorly indented

– Patrick Roberts
Nov 13 '18 at 16:11

You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9

– Zohir Salak
Nov 13 '18 at 16:11

How do I do that? pretty new to this, Zohir?

– Albin Karlsson
Nov 13 '18 at 16:15

|
show 5 more comments

Good Evening from sweden!!
I need some help with my countdown code.

In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?

Hope to be hearing from you guys soon since this have to be done before the day is over

    <!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

    font-family: Khula;

    src: url('Khula-ExtraBold.ttf');

}



p {

    text-align: center;

    font-size: 60px;

    margin-top: 0px;

    font-family: Khula;

}

#text {

    text align: center;

    font-size:9px;

}

</style>

</head>

<body>



<p id="date"></p>

<script>

// Countdown to

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



    // Get todays 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="date"

    document.getElementById("date").innerHTML = days + " " + hours + " "

    + minutes;



    // If the count down is over, write some text 

    if (distance < 0) {

        clearInterval(x);

        document.getElementById("date").innerHTML = "EXPIRED";



    // If the number of minutes left is between 0 and 9 add a 0 before it

    if (minutes < 10 && minutes < 0) {

    document.getElementById("date").innerHTML = days + " " + hours + " 0"

    + minutes;

    }

        }

}, 1000);

</script>



</body>

</html>

asked Nov 13 '18 at 16:06

Albin Karlsson

4

Are you sure you want minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0

– wowserx
Nov 13 '18 at 16:08

Also, you're missing a closing } for the if (distance < 0)

– Oram
Nov 13 '18 at 16:09

@Oram no he's not, it's just poorly indented

– Patrick Roberts
Nov 13 '18 at 16:11

You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9

– Zohir Salak
Nov 13 '18 at 16:11

How do I do that? pretty new to this, Zohir?

– Albin Karlsson
Nov 13 '18 at 16:15

|
show 5 more comments

Good Evening from sweden!!
I need some help with my countdown code.

In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?

Hope to be hearing from you guys soon since this have to be done before the day is over

    <!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

    font-family: Khula;

    src: url('Khula-ExtraBold.ttf');

}



p {

    text-align: center;

    font-size: 60px;

    margin-top: 0px;

    font-family: Khula;

}

#text {

    text align: center;

    font-size:9px;

}

</style>

</head>

<body>



<p id="date"></p>

<script>

// Countdown to

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



    // Get todays 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="date"

    document.getElementById("date").innerHTML = days + " " + hours + " "

    + minutes;



    // If the count down is over, write some text 

    if (distance < 0) {

        clearInterval(x);

        document.getElementById("date").innerHTML = "EXPIRED";



    // If the number of minutes left is between 0 and 9 add a 0 before it

    if (minutes < 10 && minutes < 0) {

    document.getElementById("date").innerHTML = days + " " + hours + " 0"

    + minutes;

    }

        }

}, 1000);

</script>



</body>

</html>

asked Nov 13 '18 at 16:06

Albin Karlsson

Good Evening from sweden!!
I need some help with my countdown code.

In the last part of the code I have added a part that will add a 0 before the last number if it is between 0 and 9 to always keep it six digits long, why isnt it working?

Hope to be hearing from you guys soon since this have to be done before the day is over

    <!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

    font-family: Khula;

    src: url('Khula-ExtraBold.ttf');

}



p {

    text-align: center;

    font-size: 60px;

    margin-top: 0px;

    font-family: Khula;

}

#text {

    text align: center;

    font-size:9px;

}

</style>

</head>

<body>



<p id="date"></p>

<script>

// Countdown to

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



    // Get todays 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="date"

    document.getElementById("date").innerHTML = days + " " + hours + " "

    + minutes;



    // If the count down is over, write some text 

    if (distance < 0) {

        clearInterval(x);

        document.getElementById("date").innerHTML = "EXPIRED";



    // If the number of minutes left is between 0 and 9 add a 0 before it

    if (minutes < 10 && minutes < 0) {

    document.getElementById("date").innerHTML = days + " " + hours + " 0"

    + minutes;

    }

        }

}, 1000);

</script>



</body>

</html>

javascript

asked Nov 13 '18 at 16:06

Albin Karlsson

asked Nov 13 '18 at 16:06

Albin Karlsson

asked Nov 13 '18 at 16:06

Albin Karlsson

asked Nov 13 '18 at 16:06

Albin Karlsson

asked Nov 13 '18 at 16:06

Albin Karlsson

4

Are you sure you want minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0

– wowserx
Nov 13 '18 at 16:08

Also, you're missing a closing } for the if (distance < 0)

– Oram
Nov 13 '18 at 16:09

@Oram no he's not, it's just poorly indented

– Patrick Roberts
Nov 13 '18 at 16:11

You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9

– Zohir Salak
Nov 13 '18 at 16:11

How do I do that? pretty new to this, Zohir?

– Albin Karlsson
Nov 13 '18 at 16:15

|
show 5 more comments

4

Are you sure you want minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0

– wowserx
Nov 13 '18 at 16:08

Also, you're missing a closing } for the if (distance < 0)

– Oram
Nov 13 '18 at 16:09

@Oram no he's not, it's just poorly indented

– Patrick Roberts
Nov 13 '18 at 16:11

You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9

– Zohir Salak
Nov 13 '18 at 16:11

How do I do that? pretty new to this, Zohir?

– Albin Karlsson
Nov 13 '18 at 16:15

Are you sure you want minutes < 10 && minutes < 0? I'm guessing that is a mistake. Maybe minutes < 10 && minutes > 0

– wowserx
Nov 13 '18 at 16:08

Also, you're missing a closing } for the if (distance < 0)

– Oram
Nov 13 '18 at 16:09

@Oram no he's not, it's just poorly indented

– Patrick Roberts
Nov 13 '18 at 16:11

You're writing to the dom twice, better use a ternary operator to check if the minutes/hours/seconds is between 0-9

– Zohir Salak
Nov 13 '18 at 16:11

How do I do that? pretty new to this, Zohir?

– Albin Karlsson
Nov 13 '18 at 16:15

|
show 5 more comments

3 Answers
3

active

oldest

votes

If you not familiar with ternary operator i'ts just an if statement in one line.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

add a comment |

There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.

// If the count down is over, write some text 

if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

}



// If the number of days left is between 0 and 9 add a 0 before it

if (days < 10 && days >= 0) {

document.getElementById("date").innerHTML = "0" + days + " " + hours + " "

+ minutes;

    // If the number of hours left is between 0 and 9 add a 0 before it

    if (hours < 10 && hours >= 0) {

    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "

    + minutes;

        // If the number of minutes left is between 0 and 9 add a 0 before it

        if (minutes < 10 && minutes >= 0) {

        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"

        + minutes;

        }            

    }        

}

answered Nov 13 '18 at 16:46

TLneon

add a comment |

To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284996%2ffault-with-adding-numbers-in-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

If you not familiar with ternary operator i'ts just an if statement in one line.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

add a comment |

If you not familiar with ternary operator i'ts just an if statement in one line.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

add a comment |

If you not familiar with ternary operator i'ts just an if statement in one line.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

If you not familiar with ternary operator i'ts just an if statement in one line.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);



    // after the calculation we reassigning to the variables 

    // hours < 10 ? : means if hours is less than 10

    // if so assing "0" + hours to variable hours

    // : is basically the else and then we just keep as it is

    hours = hours < 10 ? "0" + hours : hours;

    minutes = minutes < 10 ? "0" + minutes : minutes;

    seconds = seconds < 10 ? "0" + seconds : seconds;





    document.getElementById("date").innerHTML = days + ":" + hours + ":" +

      minutes + ":" + seconds;





    if (distance < 0) {

      clearInterval(x);

      document.getElementById("date").innerHTML = "EXPIRED";

    }

  },

  1000);

#date {

  font-size: 4em;

}

<p id="date"></p>

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

edited Nov 13 '18 at 16:35

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

answered Nov 13 '18 at 16:28

Zohir Salak

2,5031414

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

add a comment |

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

When I add that instead of the code I have now nothing at all appears on the screen for some reason?

– Albin Karlsson
Nov 13 '18 at 16:33

Since it Works in snippet here, you're probably doing something wrong.

– Zohir Salak
Nov 13 '18 at 16:36

Yup, just figured it out :)

– Albin Karlsson
Nov 13 '18 at 16:39

add a comment |

There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.

// If the count down is over, write some text 

if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

}



// If the number of days left is between 0 and 9 add a 0 before it

if (days < 10 && days >= 0) {

document.getElementById("date").innerHTML = "0" + days + " " + hours + " "

+ minutes;

    // If the number of hours left is between 0 and 9 add a 0 before it

    if (hours < 10 && hours >= 0) {

    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "

    + minutes;

        // If the number of minutes left is between 0 and 9 add a 0 before it

        if (minutes < 10 && minutes >= 0) {

        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"

        + minutes;

        }            

    }        

}

answered Nov 13 '18 at 16:46

TLneon

add a comment |

There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.

// If the count down is over, write some text 

if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

}



// If the number of days left is between 0 and 9 add a 0 before it

if (days < 10 && days >= 0) {

document.getElementById("date").innerHTML = "0" + days + " " + hours + " "

+ minutes;

    // If the number of hours left is between 0 and 9 add a 0 before it

    if (hours < 10 && hours >= 0) {

    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "

    + minutes;

        // If the number of minutes left is between 0 and 9 add a 0 before it

        if (minutes < 10 && minutes >= 0) {

        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"

        + minutes;

        }            

    }        

}

answered Nov 13 '18 at 16:46

TLneon

add a comment |

There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.

// If the count down is over, write some text 

if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

}



// If the number of days left is between 0 and 9 add a 0 before it

if (days < 10 && days >= 0) {

document.getElementById("date").innerHTML = "0" + days + " " + hours + " "

+ minutes;

    // If the number of hours left is between 0 and 9 add a 0 before it

    if (hours < 10 && hours >= 0) {

    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "

    + minutes;

        // If the number of minutes left is between 0 and 9 add a 0 before it

        if (minutes < 10 && minutes >= 0) {

        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"

        + minutes;

        }            

    }        

}

answered Nov 13 '18 at 16:46

TLneon

There's some formatting issues below your "output the result in an element comment with id date" section. The following should give you what you'd expect.

// If the count down is over, write some text 

if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

}



// If the number of days left is between 0 and 9 add a 0 before it

if (days < 10 && days >= 0) {

document.getElementById("date").innerHTML = "0" + days + " " + hours + " "

+ minutes;

    // If the number of hours left is between 0 and 9 add a 0 before it

    if (hours < 10 && hours >= 0) {

    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "

    + minutes;

        // If the number of minutes left is between 0 and 9 add a 0 before it

        if (minutes < 10 && minutes >= 0) {

        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"

        + minutes;

        }            

    }        

}

answered Nov 13 '18 at 16:46

TLneon

answered Nov 13 '18 at 16:46

TLneon

answered Nov 13 '18 at 16:46

TLneon

answered Nov 13 '18 at 16:46

TLneon

add a comment |

To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

add a comment |

To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

add a comment |

To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

To avoid doing multiple DOM manipulations and unneeded calculations, first check if the timer has expired. Only then, if needed construct the timer string.

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



  // Get todays date and time

  var now = new Date().getTime();



  // Find the distance between now and the count down date

  var distance = countDownDate - now;



  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("date").innerHTML = "EXPIRED";

  } else {

    // 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);



    // If the number left is between 0 and 9 add a 0 before it

    var daysStr = days < 10 ? "0" + days : days;

    var hoursStr = hours < 10 ? "0" + hours : hours;

    var minutesStr = minutes < 10 ? "0" + minutes : minutes;

    var secondsStr = seconds < 10 ? "0" + seconds : seconds;

    // Output the result in an element with id="date"

    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;

  }



}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {

  font-family: Khula;

  src: url('Khula-ExtraBold.ttf');

}



p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

  font-family: Khula;

}



#text {

  text-align: center;

  font-size: 9px;

}

<p id="date"></p>

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

edited Nov 13 '18 at 16:50

answered Nov 13 '18 at 16:21

Oram

736317

answered Nov 13 '18 at 16:21

Oram

736317

answered Nov 13 '18 at 16:21

Oram

736317

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

add a comment |

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

minutes > 0 is not needed, there's no negative values in minutes

– Zohir Salak
Nov 13 '18 at 16:26

I updated the answer.

– Oram
Nov 13 '18 at 16:27

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky