Trying to build JavaScript timer with reset button

[pattonh84]

What I am trying to build is a JavaScript timer that when done the button appears which I have done. But on click of the button I would like to add 90 days to the timer and start it again but am having trouble doing this.

 

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">226 manually greased zerks</h5>
    <h6 class="card-subtitle mb-2 text-muted">3 Month timer</h6>
    <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#"><h5 id="days"></h5></a>
  
  <li class="nav-item">
    <a class="nav-link" href="#"><h5 id="hours"></h5></a>
  
  <li class="nav-item">
    <a class="nav-link" href="#"><h5 id="mins"></h5></a>
  
  <li class="nav-item">
    <a class="nav-link" href="#"><h5 id="secs"></h5></a>
  
</ul>
    <br>
    <p class="card-text">
    <button type="button" id="success" onclick="myFunction()" class="btn btn-success">Complete <i class="fas fa-check"></i></button>
  </div>
</div>
         
    <script>
    // The data/time we want to countdown to
    var countDownDate = new Date("Oct 31, 2020 14:55:10").getTime();

    // Run myfunc every second
    var myfunc = setInterval(function() {

    var now = new Date().getTime();
    var timeleft = countDownDate - now;
        
    // Calculating the days, hours, minutes and seconds left
    var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
        
    // Result is output to the specific element
    document.getElementById("days").innerHTML = days + "d "
    document.getElementById("hours").innerHTML = hours + "h " 
    document.getElementById("mins").innerHTML = minutes + "m " 
    document.getElementById("secs").innerHTML = seconds + "s " 
     
     setInterval(function()  {
  if(timeleft > "0") document.getElementById("success").style.display="none";
     
});
        
        
    // Display the message when countdown is over
    if (timeleft < "0") {
        clearInterval(myfunc);
        document.getElementById("days").innerHTML = "0" + "d "
        document.getElementById("hours").innerHTML = "0" + "h "
        document.getElementById("mins").innerHTML = "0" + "m "
        document.getElementById("secs").innerHTML = "0" + "s "
        document.getElementById("success").style.display = "inline";
        document.getElementById("days").style.color = "#FF0000";
        document.getElementById("hours").style.color = "#FF0000";
        document.getElementById("mins").style.color = "#FF0000";
        document.getElementById("secs").style.color = "#FF0000";
    }
    }, 1000);
    </script>

 

[colonel_mortis]

What exactly are you having trouble with? We won't write all of your code for you, but if there are specific things that you are struggling with then we can point you in the right direction for those. At the moment you don't seem to have any code for handling the button press events - what have you tried so far?

[C2dan88]

You could wrap all your javascript code into a function, call it startTimer

 

function startTimer() {
 ... your existing code ...
}

Changing this line of you code

var countDownDate = new Date("Oct 31, 2020 14:55:10").getTime();

to this

  // create a new date
  var countDownDate = new Date()
  // adding 90 days to date
  countDownDate.setDate(countDownDate.getDate() + 90);

The above will set the countdown time to 90 days in the future.

 

Set the onclick event for the complete button to startTimer to reset/start the count down

<button type="button" id="success" onclick="startTimer()" class="btn btn-success">Complete <i class="fas fa-check"></i></button>

 

Live demo

https://jsfiddle.net/01jthdkv/1/

 

 

[pattonh84]

51 minutes ago, C2dan88 said:

You could wrap all your javascript code into a function, call it startTimer

 

function startTimer() {
 ... your existing code ...
}

Changing this line of you code

var countDownDate = new Date("Oct 31, 2020 14:55:10").getTime();

to this

  // create a new date
  var countDownDate = new Date()
  // adding 90 days to date
  countDownDate.setDate(countDownDate.getDate() + 90);

The above will set the countdown time to 90 days in the future.

 

Set the onclick event for the complete button to startTimer to reset/start the count down

<button type="button" id="success" onclick="startTimer()" class="btn btn-success">Complete <i class="fas fa-check"></i></button>

 

Live demo

https://jsfiddle.net/01jthdkv/1/

 

 

is there a way to save the state so it doesn't keep updating and restarting the countdown?

[C2dan88]

8 hours ago, pattonh84 said:

is there a way to save the state so it doesn't keep updating and restarting the countdown?

Do you mean you don't want the timer to reset  when you close and reopen it?

[pattonh84]

2 minutes ago, C2dan88 said:

Do you mean you don't want the timer to reset  when you close and reopen it?

exactly! this timer is being used for work and indicates when a piece of machinery should be worked on.

[vorticalbox]

Save the state in local storage

[C2dan88]

Yes can be done using localstoreage api

I have updated the demo

https://jsfiddle.net/v9djufsm/

[pattonh84]

22 minutes ago, C2dan88 said:

Yes can be done using localstoreage api

I have updated the demo

https://jsfiddle.net/v9djufsm/

it returns with on button click

• "<a class='gotoLine' href='#107:36'>107:36</a> Uncaught TypeError: Cannot read property 'getItem' of null"

[mariushm]

one option would be to put the time variables outside that function and have two separate functions, displayTimer (in the setInterval) and a updateTimer function which adds the 90 days.

 

(you can do it more optimal compared to using while and additions, less cpu cycles, but i was lazy to do the math and deal with rounding/ converting to integers)

var secondsLeft = 0

var countDownDate = new Date("Nov 31, 2020 14:55:10").getTime();
var   currentDate = new Date().getTime();
secondsLeft = countDownDate - currentDate;
console.log( secondsLeft)

setInterval(displayTime,1000)

function displayTime() {
	var value = secondsLeft
  var days = 0
  var hours = 0
  var minutes = 0
  var seconds = 0
  while (value > 86400000) { days=days+1; value=value-86400000; }
  while (value >  3600000) { hours=hours+1; value=value-3600000;}
  while (value >    60000) { minutes=minutes+1; value=value-60000;}
  while (value >        0) { seconds=seconds+1; value=value-1000;}
  
  document.getElementById("days").innerHTML = days + "d "
  document.getElementById("hours").innerHTML = hours + "h " 
  document.getElementById("mins").innerHTML = minutes + "m " 
  document.getElementById("secs").innerHTML = seconds + "s " 
  secondsLeft = secondsLeft-1000   

}

function updateTimer(daysCount) {
	console.log(daysCount)
	currentDate = new Date().getTime();
	secondsLeft = countDownDate + daysCount*24*3600*1000 - currentDate;
}

 

[C2dan88]

3 hours ago, pattonh84 said:

it returns with on button click

• "<a class='gotoLine' href='#107:36'>107:36</a> Uncaught TypeError: Cannot read property 'getItem' of null"

What browser you using?

You running the code from jsfiddle or your own file?