Skip to content
Permalink
Browse files

added stopwatch

  • Loading branch information
Alex Mueller
Alex Mueller committed Mar 28, 2020
1 parent f59c43e commit 902eaa1e0fb56fb9cade9deee39550accb025e1d
Showing with 59 additions and 0 deletions.
  1. +59 −0 week-9/index.html
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Simple setInterval clock</title>
<style>
p {
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="clock">0</p>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset" disabled>Reset</button>
<script>
let seconds = 0;
let counting = false;
let startButton = document.querySelector('#start');
let stopButton = document.querySelector('#stop');
let resetButton = document.querySelector('#reset');
startButton.addEventListener('click', start);
stopButton.addEventListener('click', stop)
resetButton.addEventListener('click', reset)
let startWatch;
function displayTime() {
let date = new Date();
let time = date.toLocaleTimeString();
document.querySelector('.clock').textContent = seconds;
}
function start() {
if (!counting) {
startWatch = setInterval(function() {
seconds++;
document.querySelector('.clock').innerHTML = seconds;
}, 1000);
counting = true;
startButton.disabled = true;
}
}
function stop() {
clearInterval(startWatch);
counting = false;
resetButton.disabled = false;
startButton.disabled = false;
}
function reset() {
clearInterval(startWatch);
counting = false;
seconds = 0;
document.querySelector('.clock').textContent = seconds;
startButton.disabled = false;
resetButton.disabled = true;
}
</script>
</body>
</html>

0 comments on commit 902eaa1

Please sign in to comment.
You can’t perform that action at this time.