Countdown clock in JS using HTML and CSS

Question

I want to display a countdown timer and progress bar. I have this javascript code but I can not add css, html and progress bar code to my javascript code.

<script>
var hoursleft =  3;
var minutesleft = 0; 
var secondsleft =  0; 
var finishedtext = "Countdown finished!";
var end1;
if(localStorage.getItem("end1")) {
end1 = new Date(localStorage.getItem("end1"));
} else {
end1 = new Date();
end1.setMinutes(end1.getMinutes()+minutesleft);
end1.setSeconds(end1.getSeconds()+secondsleft);}
var counter = function () {
var now = new Date();
var diff = end1 - now;
diff = new Date(diff);
	var milliseconds = parseInt((diff%1000)/100)
    var sec = parseInt((diff/1000)%60)
    var mins = parseInt((diff/(1000*60))%60)
    var hours = parseInt((diff/(1000*60*60))%24);
if (hours < 10) { 
    hours = "0" + hours;} 
if (mins < 10) {
    mins = "0" + mins;}
if (sec < 10) { 
    sec = "0" + sec;}     
if(now >= end1) {     
    clearTimeout(interval);
    localStorage.setItem("end", null);
     localStorage.removeItem("end1");
     localStorage.clear();
    document.getElementById('divCounter').innerHTML = finishedtext;
     if(confirm("TIME UP!"))
     window.location.href= "result.php";
} else {
    var value = hours+":" +mins + ":" + sec;
    localStorage.setItem("end1", end1);
    document.getElementById('divCounter').innerHTML = value;}}
var interval = setInterval(counter, 1000);
</script>

can someone please help me to add css and progressbar with this countdown timer as shows the picture??

What do you mean by cannot add can not add css, html and progress bar when you are already doing document.getElementById('divCounter') — brk
– brk, Commented Nov 9, 2018 at 13:32
I have timer without css and can you help me to add a progressbar with this countdown timer? — sonia
– sonia, Commented Nov 9, 2018 at 13:35

TheNewCivilian · Accepted Answer · 2018-11-12 15:39:54Z

Maybe I don't understand your question completely. But here are some ideas I would come up with.

maybe the html part of your code got lost by copying it into your Post.
I assume you understood the Basics about adding a script to html code.

I made a super simple example based on your code:

<html>
  <body>
    <progress id="progressBar" value="22" max="100"></progress>
    <div id="divCounter"></div>
  </body>
</html>

<script>
var hoursleft =  0;
var minutesleft = 5;
var secondsleft =  0;
var finishedtext = "Countdown finished!";
var end1;
var progressBar = document.getElementById('progressBar')
if(localStorage.getItem("end1")) {
  end1 = new Date(localStorage.getItem("end1"));
} else {
  end1 = new Date();
  end1.setHours(end1.getHours()+hoursleft); // Why is this line missing?
  end1.setMinutes(end1.getMinutes()+minutesleft);
  end1.setSeconds(end1.getSeconds()+secondsleft);
}
progressBar.max = end1 - new Date();


var counter = function () {
  var now = new Date();
  var diff = end1 - now;
  diff = new Date(diff);
  var milliseconds = parseInt((diff%1000)/100)
  var sec = parseInt((diff/1000)%60)
  var mins = parseInt((diff/(1000*60))%60)
  var hours = parseInt((diff/(1000*60*60))%24);

  if (hours < 10) {
      hours = "0" + hours;
    }
  if (mins < 10) {
      mins = "0" + mins;
    }
  if (sec < 10) {
      sec = "0" + sec;}
  if(now >= end1) {
    clearTimeout(interval);
    localStorage.setItem("end", null);
    localStorage.removeItem("end1");
    localStorage.clear();
    document.getElementById('divCounter').innerHTML = finishedtext;
    if(confirm("TIME UP!")) window.location.href= "result.php";
  } else {
      progressBar.value = progressBar.max - (end1-now);
      var value = hours+":" +mins + ":" + sec;
      localStorage.setItem("end1", end1);
      document.getElementById('divCounter').innerHTML = value;
  }
}
var interval = setInterval(counter, 1000);
</script>

I hope that helps. Don't hesitate to make your question more clear.

Thank you for your efforts, but when the time has expired,"result.php" appears empty(sending the query from current page to the result.php page does not work)!! any idea please ?

Collectives™ on Stack Overflow

Countdown clock in JS using HTML and CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related