Set Countdown timer then display voting open then after voting period display voting ends

Question

Here are my code on my current program. I have a running code for countdown timer my problem now is when the VOTING PERIOD ENDS I want to display Voting Ends instead of it always displaying voting open.

<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new date("<?php echo $countdown['dateend']; ?>").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 an 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("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text 
if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Voting now Opens";
}

// If date end is over display some text
   //display voting period ends

}, 1000);
</script>

There isn't a need to show the PHP, just give what it parses into, also there a typo's here. The code won't run (ex: `new date` should be `new Date` ). — Spencer Wieczorek, Aug 17 '17 at 00:50
What have you tried so far to display voting closed? Maybe add a `setTimeout()` after the voting is open or check the current time to the time of closing? If time/date is more than closing time/date... — NewToJS, Aug 17 '17 at 00:50
How to do a setTimeout()? I did was voting opens. I want to display voting ends when var endDate is greater than NOW — Nathaniel Nathan, Aug 17 '17 at 00:56
What are the values of *datestart* and *dateend*? They may not be parsed correctly by the built-in parser, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) Also, *setInterval* does not run at exactly the time specified, it will drift over time so you need to update the time remaining based on the actual elapsed time, not the value derived from *setInterval* calls. — RobG, Aug 17 '17 at 01:03

OwChallie · Answer 1 · 2017-08-17T01:32:29.167

To add the end voting message, you will need to continue the interval until the voting has ended. To make things a little simpler, we have split the code into 3 sections using if...else if...else. In each of these, we handle the respective display for that scenario. It has the added benefit of not doing calculations when it is not needed.

If distance > 0, the voting has not started. If endDate > now, the voting hasn't ended. I am assuming that the PHP output will result in an accurate date for this scenario. Read more. Any other scenario means voting has ended.

<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new Date("<?php echo $countdown['dateend']; ?>").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 an the count down date
  var distance = countDownDate - now;

  if (distance > 0) {
    // 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("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
  }
  else if (endDate > now) {
    // If the count down is over, write some text 
    document.getElementById("demo").innerHTML = "Voting now Opens";
  }
  else {
    // If date end is over display some text
    //display voting period ends
    document.getElementById("demo").innerHTML = "Voting Ended";
    clearInterval(x);
  }
}, 1000);
</script>

score 0 · Answer 2 · answered Aug 17 '17 at 01:10

At a glance, i can see that your "endDate" line has an error:

var endDate = new date(.....

it should be Date with a capital 'D' as is for the var countDownDate i.e.

var endDate = new Date(.....

Assuming the rest of the code is correct (and it seems ok) - should be fine.

If that doesn't solve it - from your question it is easy to decipher that the if the following function always resolves to false and hence will never fire enclosed code which clears the 'x' interval and shows that voting is open.

if (distance < 0) {...}

If what I would do is console.log(countDownDate);, console.log(now); and why not also console.log(distance); ideally immidiately after the declaration:

// Find the distance between now an the count down date
var distance = countDownDate - now;

if you are unsure how to use the console.log() function please refer to the following link: https://developers.google.com/web/tools/chrome-devtools/console/

Set Countdown timer then display voting open then after voting period display voting ends

2 Answers2