Learn how to build a stopwatch in HTML, CSS and JavaScript using modern syntax. A timer stopwatch using start, stop and reset event listeners on click.
In this first part, we build the stopwatch's user interface with HTML and CSS:
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 JavaScript</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</link>
</head>
<body>
<div class="stopwatch">
<h1>Stopwatch <span class="gold">JavaScript</span></h1>
<div class="circle">
<span class="time" id="display">00:00:00</span>
</div>
<div class="controls">
<button>
<ion-icon class="play" name="play-outline"></ion-icon>
<ion-icon class="pause" name="pause-outline"></ion-icon>
</button>
<button>
<ion-icon class="reset" name="refresh-outline"></ion-icon>
</button>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
body {
background-color: #31394c;
color: #fff;
}
h1 {
font-size: 48px;
font-family: 'Poppins', sans-serif;
font-weight: 200;
text-align: center;
line-height: 59px;
padding: 0 64px;
margin: 0;
}
.stopwatch {
margin-top: 15rem;
display: grid;
justify-items: center;
grid-row-gap: 23px;
width: 100%;
padding-top: 25px;
}
.gold {
font-weight: 900;
color: #f2c94c;
text-shadow: 0 0 0px #fff, 0 0 50px #f2c94c;
}
.time {
font-family: sans-serif, monospace;
font-weight: 300;
font-size: 48px;
}
.circle {
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
width: 270px;
height: 270px;
border-radius: 50%;
font-family: sans-serif;
}
.controls {
display: flex;
justify-content: space-between;
width: 178px;
}
button {
background: transparent;
padding: 0;
border: none;
margin: 0;
outline: none;
font-size: 50px;
color: #fff;
cursor: pointer;
transition: all 0.5s ease;
}
button:active {
transform: scale(.90);
}
button:hover {
color: #f2c94c;
}
.play {
display: block;
}
.pause {
display: none;
}
Then we'll make the user interface functional with JavaScript (the stopwatch works).
//Create Event Listeners
const playButton = document.querySelector('.play')
const pauseButton = document.querySelector('.pause')
const resetButton = document.querySelector('.reset')
playButton.addEventListener('click', start)
pauseButton.addEventListener('click', pause)
resetButton.addEventListener('click', reset)
//Declare variable to use in our Functions Below
let startTime
let elapsedTime = 0
let timerInterval
//Convert time to a format of hours, minutes, and milliseconds
function timeToString(time){
let diffInHrs = time / 3600000
let hh = Math.floor(diffInHrs)
let diffInMin = (diffInHrs - hh) * 60
let mm = Math.floor(diffInMin)
let diffInSec = (diffInMin - mm) * 60
let ss = Math.floor(diffInSec)
let diffInMs = (diffInSec - ss) * 100
let ms = Math.floor(diffInMs)
let formattedMM = mm.toString().padStart(2, '0')
let formattedSS = ss.toString().padStart(2, '0')
let formattedMS = ms.toString().padStart(2, '0')
return `${formattedMM}:${formattedSS}:${formattedMS}`
}
function showButton(buttonKey){
const buttonToShow = buttonKey === 'play' ? playButton : pauseButton
const buttonToHide = buttonKey === 'play' ? pauseButton :playButton
buttonToShow.style.display = 'block'
buttonToHide.style.display = 'none'
}
//Create Function to Modify innerHTML
function print(txt){
document.getElementById('display').innerHTML = txt
}
// Create start, pause and reset functions
function start(){
startTime = Date.now() - elapsedTime
timerInterval = setInterval(function printTime(){
elapsedTime = Date.now() - startTime
print(timeToString(elapsedTime))
},10)
showButton('pause')
}
function pause(){
clearInterval(timerInterval)
showButton('play')
}
function reset(){
clearInterval(timerInterval)
print('00:00:00')
elapsedTime = 0
showButton('play')
}
🛴 Follow Me If You Want to Increase Your Dev Skills with 💡Project-Based Learning:
👉YouTube: https://bit.ly/WDevMadeEasy
👉Facebook: https://bit.ly/3cp2S5W
👉Instagram (New): https://bit.ly/3ura3TW
Top comments (0)