Welcome to Coding Torque, fellow coders! Are you ready to take your skills to the next level? In this tutorial, we will be creating a Simple Stopwatch using HTML, CSS, and JavaScript. Not only will this project help you improve your coding skills, but it will also come in handy as a practical tool in your daily life. Let's get started!
Before we start, here are some more JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Simple Stopwatch using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<section class="container">
<div class="watch">
<h2 id="watch">00:00:00:00</h2>
</div>
<div class="buttons">
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
</section>
Output Till Now
CSS Code
@import url("https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap");
:root {
--primary-color: rgb(149, 0, 255);
--primary-color-darker: rgb(85, 112, 84);
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
background: var(--primary-color);
font-family: "Poppins", sans-serif;
font-size: 1.3em;
line-height: 1.5em;
}
.container {
max-width: 640px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
}
.watch {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: white;
height: 10rem;
border-radius: 20px;
}
h2 {
font-size: 3em;
font-weight: 400;
height: 50px;
width: 335px;
}
h2.paused {
color: red;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px 0;
}
.buttons button {
margin: 10px;
margin-top: 20px;
border: none;
padding: 15px 30px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 4px;
border-radius: 5px;
cursor: pointer;
} Output Till Now
JavaScript Code
const watch = document.querySelector('#watch');
let milliseconds = 0;
let timer;
function startWatch() {
watch.classList.remove('paused');
clearInterval(timer);
timer = setInterval(() => {
milliseconds += 10;
let dateTimer = new Date(milliseconds);
watch.innerHTML =
('0' + dateTimer.getUTCHours()).slice(-2) + ':' +
('0' + dateTimer.getUTCMinutes()).slice(-2) + ':' +
('0' + dateTimer.getUTCSeconds()).slice(-2) + ':' +
('0' + dateTimer.getUTCMilliseconds()).slice(-3, -1);
}, 10);
};
function pauseWatch() {
watch.classList.add('paused');
clearInterval(timer);
};
function resetWatch() {
watch.classList.remove('paused');
clearInterval(timer);
milliseconds = 0;
watch.innerHTML = '00:00:00:00';
};
document.addEventListener('click', (e) => {
const el = e.target;
if (el.id === 'start') startWatch();
if (el.id === 'pause') pauseWatch();
if (el.id === 'reset') resetWatch();
});