index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Stopwatch</h1>
<p>
<span id="seconds">00</span>:<span id="tens">00</span>
</p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
body {
background-color: skyblue;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
.wrapper {
width: 600px;
margin: 30px auto;
color: snow;
text-align: center;
}
.container {
border-radius: 15px;
border: 1px solid white;
padding: 18px 10px;
margin: 20px;
}
h1, h2, h3 {
font-size: 2.6rem;
font-weight: 100;
text-transform: uppercase;
}
#seconds, #tens {
font-size: 2rem;
}
button {
border-radius: 5px;
background-color: blue;
color: white;
border: 1px solid white;
padding: 18px 10px;
width: 120px;
margin: 10px;
}
button:hover {
transition: 0.3s;
background-color: white;
border-color: steelblue;
color: blue;
}
script.js
window.onload = function() {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var buttonStart = document.getElementById("button-start");
var buttonStop = document.getElementById("button-stop");
var buttonReset = document.getElementById("button-reset");
var interval;
buttonStart.onclick = function () {
clearInterval(interval);
interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function () {
clearInterval(interval);
}
buttonReset.onclick = function () {
clearInterval(interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer() {
tens++;
if (tens < 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
seconds++;
appendSeconds.innerHTML = "0" + seconds
tens = 0;
appendTens.innerHTML = "0" +0;
}
if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}
}
}
Result View Example