Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Trying to build JavaScript timer with reset button

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>

 

Link to post
Share on other sites

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?

HTTP/2 203

Link to post
Share on other sites

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/

 

 

Link to post
Share on other sites
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?

Link to post
Share on other sites
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?

Link to post
Share on other sites
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.

Link to post
Share on other sites

Save the state in local storage

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites
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"
Link to post
Share on other sites

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

 

Link to post
Share on other sites
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?

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×