diff --git a/week-9/stopwatch/index.html b/week-9/stopwatch/index.html index 33661f3..5f7a04d 100644 --- a/week-9/stopwatch/index.html +++ b/week-9/stopwatch/index.html @@ -6,22 +6,24 @@ Stopwatch

-

+ diff --git a/week-9/stopwatch/js/main.js b/week-9/stopwatch/js/main.js index 9b648b7..c22b4a4 100644 --- a/week-9/stopwatch/js/main.js +++ b/week-9/stopwatch/js/main.js @@ -1,53 +1,50 @@ - // Define a counter variable for the number of seconds and set it to zero. - let secondCount = 0; - // Define a global to store the interval when it is active. - let stopWatch; - // Store a reference to the display paragraph in a variable - const displayPara = document.querySelector('.clock'); - - // Function to calculate the current hours, minutes, and seconds, and display the count - function displayCount() { - // Calculate current hours, minutes, and seconds - let hours = Math.floor(secondCount/3600); - let minutes = Math.floor((secondCount % 3600)/60); - let seconds = Math.floor(secondCount % 60) - - // Display a leading zero if the values are less than ten - let displayHours = (hours < 10) ? '0' + hours : hours; - let displayMinutes = (minutes < 10) ? '0' + minutes : minutes; - let displaySeconds = (seconds < 10) ? '0' + seconds : seconds; - - // Write the current stopwatch display time into the display paragraph - displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds; - - // Increment the second counter by one - secondCount++; - } - - // Store references to the buttons in constants - const startBtn = document.querySelector('.start'); - const stopBtn = document.querySelector('.stop'); - const resetBtn = document.querySelector('.reset'); - - // When the start button is pressed, start running displayCount() once per second using setInterval() - startBtn.addEventListener('click', () => { - stopWatch = setInterval(displayCount, 1000); - startBtn.disabled = true; - }); - - // When the stop button is pressed, clear the interval to stop the count. - stopBtn.addEventListener('click', () => { - clearInterval(stopWatch); - startBtn.disabled = false; - }); - - // When the reset button is pressed, set the counter back to zero, then immediately update the display - resetBtn.addEventListener('click', () => { - clearInterval(stopWatch); - startBtn.disabled = false; - secondCount = 0; - displayCount(); - }); - - // Run displayCount() once as soon as the page loads so the clock is displayed - displayCount(); \ No newline at end of file +//Counter variable for # of SECONDS (set to zero) +let count = 0; + +//Global variable defined to store the interval when it is active: +let stopWatch = 0; + +//Reference to the display paragraph in a variable +const displayPara = document.querySelector(".clock"); + +//Callback function to calculate current hours, minutes, and seconds, and display the count +function displayCount() { //(abbreviated to hrs, min, sec) + let hrs = Math.floor(count/3600); //3600 sec in 1 hr. + let min = Math.floor((count % 3600)/60); //remainder of seconds left over when all hrs are removed, DIVIDED by 60 + let sec = Math.floor(count % 60); //remainder of seconds left over when all the min are removed + + //Show a leading zero if the values are less than 10 + let displayHrs = (hrs < 10) ? '0' + hrs : hrs; + let displayMin = (min < 10) ? '0' + min : min; + let displaySec = (sec < 10) ? '0' + sec : sec; + + //Stopwatch display time written into the display paragraph varable + displayPara.textContent = displayHrs + ":" + displayMin + ":" + displaySec; + + count++; //counter variable increments by one every second (constant loop) +} + +//References to the button classes +const startBtn = document.querySelector(".start"); +const stopBtn = document.querySelector(".stop"); +const resetBtn = document.querySelector(".reset"); + +//Once the start btn is pressed, start running displayCount() once per second using setInterval() + startBtn.addEventListener("click", function() { + stopWatch = setInterval(displayCount, 1000); + startBtn.disabled = true; //start btn is UNCLICKABLE (diabled) upon clicking on it as it's already running! + }); +//Once the stop btn is pressed, clear the interval + stopBtn.addEventListener("click", function() { + clearInterval(stopWatch); + startBtn.disabled = false; //start btn is CLICKABLE upon clicking the stop btn for the user to start count again! + }); +//Once the reset btn is pressed, clear the interval AND the display (00:00:00) + resetBtn.addEventListener("click", function() { + clearInterval(stopWatch); + startBtn.disabled = false; //start btn is CLICKABLE upon clicking the reset btn for the user to start count again! + count = 0; //set counter back to zero + displayCount(); + }); + + displayCount(); \ No newline at end of file