Create stopwatch with HTML
CSS and JavaScript
Timers are used to measure specific time intervals. But in electrical engineering terms, timers are also referred to as counters often. The timer is a component which is extensively used in different embedded systems. They are used to keep a record of time for different events occurring in the embedded systems.
Video Tutorial of stopwatch
Stopwatch [Source Codes]
To Create Stopwatch with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Stopwatch</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <div id="timer">00:00:00</div>
- <div id="buttons">
- <button id="start">Start</button>
- <button id="stop">Stop</button>
- <button id="reset">Reset</button>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 100vh;
- overflow: hidden;
- align-items: center;
- background-image: linear-gradient(#1F9CEE,#785BF8);
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
- .container{
- background-color: darkgrey;
- color: #FFF;
- border-radius: 8px;
- }
- #timer {
- font-size: 7rem;
- font-weight: 700;
- text-shadow: 3px 3px #000;
- width: 600px;
- text-align: center;
- margin: 40px auto;
- }
-
- #buttons {
- display: flex;
- justify-content: center;
- }
-
- button {
- background-color: #1F9CEE;
- color: white;
- border: none;
- font-size: 2.5rem;
- font-weight: bold;
- padding: 1.5rem 4rem;
- margin: 1rem;
- border-radius: 60px;
- cursor: pointer;
- box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.3);
- transition: all 0.2s;
- }
-
- button:hover {
- background-color: #785BF8;
- box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
- }
-
- button[disabled] {
- opacity: 0.5;
- cursor: default;
- }
-
- @media (max-width: 800px) {
- #timer {
- font-size: 4rem;
- width: 350px;
- }
-
- button {
- font-size: 1.5rem;
- padding: 1rem 2rem;
- }
- }
Now paste the following codes into your script.js file
- const timerEl = document.getElementById("timer");
- const startButtonEl = document.getElementById("start");
- const stopButtonEl = document.getElementById("stop");
- const resetButtonEl = document.getElementById("reset");
-
- let startTime = 0;
- let elapsedTime = 0;
- let timerInterval;
-
- function startTimer() {
- startTime = Date.now() - elapsedTime;
-
- timerInterval = setInterval(() => {
- elapsedTime = Date.now() - startTime;
- timerEl.textContent = formatTime(elapsedTime);
- }, 10);
-
- startButtonEl.disabled = true;
- stopButtonEl.disabled = false;
- }
-
- function formatTime(elapsedTime) {
- const milliseconds = Math.floor((elapsedTime % 1000) / 10);
- const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
- const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
- const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
- return (
- (hours ? (hours > 9 ? hours : "0" + hours) : "00") +
- ":" +
- (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
- ":" +
- (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") +
- "." +
- (milliseconds > 9 ? milliseconds : "0" + milliseconds)
- );
- }
- function stopTimer() {
- clearInterval(timerInterval);
- startButtonEl.disabled = false;
- stopButtonEl.disabled = true;
- }
- function resetTimer() {
- clearInterval(timerInterval);
-
- elapsedTime = 0;
- timerEl.textContent = "00:00:00";
-
- startButtonEl.disabled = false;
- stopButtonEl.disabled = true;
- }
-
- startButtonEl.addEventListener("click", startTimer);
- stopButtonEl.addEventListener("click", stopTimer);
- resetButtonEl.addEventListener("click", resetTimer);
If you face any difficulties while creating Stopwatch or your code is not working as expected, you can download the source code files by clicking download button.