Countdown Timer

Countdown Timer from localstorage when a button click the value has to be reset.

by Bhavanaditya D R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="div__time">
  <div id="overall_time"></div>
  <div id="overall_times"></div> /
  <div class="total_time">
    00:00:10
  </div>
</div>
<button onclick="start_over_all_time(this);" id="over_all_time">Over All Time</button>

CSS

#overall_time {
  display: none;
}

.div__time,
.total_time,
#overall_times {
  display: inline-block;
}

JavaScript

var hms = $(".div__time .total_time").text();
var a = hms.split(':');
var hrs_min_sec = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);

var time_hrs_min_sec = hrs_min_sec;
if (localStorage.getItem("counter")) {
  if (localStorage.getItem("counter") <= 0) {
    var value = time_hrs_min_sec;
  } else {
    var value = localStorage.getItem("counter");
  }
} else {
  var value = time_hrs_min_sec;
}

document.getElementById('overall_time').innerHTML = value;

var counter = function() {
  if (value <= 0) {
    localStorage.setItem("counter", time_hrs_min_sec);
  } else {
    value = parseInt(value) - 1;
    console.log(value);
    localStorage.setItem("counter", value);
  }
  document.getElementById('overall_time').innerHTML = value;


  if (value == 0) {
    // var redirect_url = "<?php echo site_url('home'); ?>";
    // window.location.href = redirect_url;
  }

  var hours = Math.floor(value / 3600);
  var minutes = Math.floor(value % 3600 / 60);
  var seconds = Math.floor(value % 3600 % 60);
  var red_time = hours + ' : ' + minutes + ' : ' + seconds;
  document.getElementById('overall_times').innerHTML = red_time;
};
var interval = setInterval(function() {
  counter();
}, 1000);