My question is that the first time the reset time button is clicked, it starts the timer, from then on, every time it is clicked, it resets thet timer, if closed and opened (the file html file is stored locally) i want it to carry on the timer by saving all the variablesin cookies.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
p {
font-family: 'Roboto Slab', serif;
text-align: center;
font-size: 40px;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting up from
var countupDate = new Date()
var days, hours, minutes, seconds
function display() {
document.getElementById("demo").innerHTML =
days + " Days " + hours + " Hours " + minutes + " Minutes " + seconds + " Seconds "
}
function startInterval() {
return setInterval(function () {
// Get today's date and time
var now = new Date().getTime()
// Find the distance between now and the count up date
var distance = now - countupDate
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24))
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
seconds = Math.floor((distance % (1000 * 60)) / 1000)
// Output the result in an element with id="demo"
display()
}, 1000)
}
function resetcountupDate() {
clearInterval(x)
days = hours = minutes = seconds = 0
display()
countupDate = new Date()
x = startInterval()
}
// Update the count up every 1 second
var x = startInterval()
</script>
<p>
<input type=button value="Reset time" onclick="resetcountupDate();">
</p>
</body>
</html>