<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// AA: Global variables to hold the number of clicks and the var startTime values...etc;
const secsInMinute = 60;
const minutesInHour = 60;
var numOfClicks = 0;
var startTime;
var interval;
var timerObject = {
secs : 0, minutes : 0, hours : 0
}
var lastTimerObject = []
var counter = -1;
function displayTimer(){
// The constant variables
const secsInMinute = 60;
const minutesInHour = 60;
document.getElementById("timer").innerHTML = timerObject.hours.toFixed(0) + 'h ' +
// AA: Subtract the number of elapsed minutesInHour passed from the captured minutes
(timerObject.minutes - (timerObject.hours * minutesInHour)).toFixed(0)+ 'm ' +
// AA: Subtract the number of elapsed secsInMinutes passed from the captured seconds
(timerObject.secs- (timerObject.minutes * secsInMinute)).toFixed(0) + 's';
}
function timer () {
var elapsedtime = Date.now() - startTime;
timerObject.secs = Math.floor(elapsedtime / 1000) ;
timerObject.minutes = Math.floor(elapsedtime / (1000 * 60)) ;
timerObject.hours = Math.floor(elapsedtime / (1000 * 60 * 60));
displayTimer();
};
function myFunction() {
// AA: Increment the numOfClicks to determine whether or not to start the timer
// or to save the timer values and then clear it
numOfClicks ++;
// AA: Move the startTime inside myFunction, so it captures the time
// when the user clicks the button, rather than when the document loads
startTime = Date.now();
if (numOfClicks % 2 == 1)// Start the timer
{
// AA: Start the timer
interval = setInterval(timer, 1000);
document.getElementById("timerBttn").textContent = "Stop Timer";
}
else // Save the timer values and then clear it
{
counter++;
// AA: Clear the timer
clearInterval(interval);
// Change the text on the button to Start Timer
document.getElementById("timerBttn").textContent = "Start Timer";
// Save the timer values to currentTimer Object and reset the
// timerObject to zeros.
lastTimerObject[counter] = {};
lastTimerObject[counter].secs = timerObject.secs;
lastTimerObject[counter].minutes = timerObject.minutes;
lastTimerObject[counter].hours =timerObject.hours;
timerObject.secs = 0;
timerObject.minutes = 0;
timerObject.hours = 0;
displayTimer();
// AA: The alert is optional, just to display the last timer val before stoppage
alert ('Current Timer Value: ' + lastTimerObject[counter].hours.toFixed(0) + 'h ' +
(lastTimerObject[counter].minutes - (lastTimerObject[counter].hours * minutesInHour)).toFixed(0)+ 'm ' +
(lastTimerObject[counter].secs- (lastTimerObject[counter].minutes * secsInMinute)).toFixed(0) + 's');
lastTimerObject[counter].secs = (lastTimerObject[counter].secs- (lastTimerObject[counter].minutes * secsInMinute)).toFixed(0);
lastTimerObject[counter].minutes = (lastTimerObject[counter].minutes - (lastTimerObject[counter].hours * minutesInHour)).toFixed(0) ;
// console.log("lastTimerObject.hours " + lastTimerObject[counter].hours + " lastTimerObject.minutes " + lastTimerObject[counter].minutes + " lastTimerObject.secs " + lastTimerObject[counter].secs );
console.log ("Timer Values:")
for (var item of lastTimerObject)
{
console.log(item.hours + "h " + item.minutes + "m " + item.secs + "s");
}
}
}
</script>
<!--AA: Chnaged the name of the button to indicate start/stop timer to user clearly
and added id to the button to maniplulate the name within the JavaScript-->
<button id="timerBttn" onclick="myFunction()">Start Timer</button>
<span id="timer"></span>
</body>
</html>
