ADVERTISEMENT

Create Stopwatch Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Stopwatch Using HTML,CSS and JavaScript

 
Create Stopwatch Using HTML,CSS and JavaScript
Create Stopwatch Using HTML,CSS and JavaScript

In this tutorial, we will discuss, how to construct a Stopwatch in JavaScript. A stopwatch is used on many websites to track time. Moreover, it is also a good standalone project as well.

ADVERTISEMENT

ADVERTISEMENT

The stopwatch we are creating is similar to a regular stopwatch that is used to keep track of time. Albeit, it is unique for its ability to track hours, minutes, seconds, and milliseconds.

Code by Ankit Joshi
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive Yes
Stopwatch Table

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

ADVERTISEMENT

Prerequisites for this project:

ADVERTISEMENT

This article requires a basic understanding of HTML, CSS, and a little bit of Javascript. I’ll explain the project in a manner that makes it easy to follow even for complete beginners with a basic understanding of the listed technologies.

Live Demo Of  Stopwatch Using HTML,CSS and JavaScript:

Before we start the programming, let’s discuss the UI of the project. First, we are creating a stopwatch container that will have a screen to display the current stopwatch time. The stopwatch also has three buttons — Pause, Start, Reset — to control the stopwatch.

ADVERTISEMENT

Step 1: Create the basic structure of the stopwatch

After writing the HTML boilerplate and connecting it with the CSS file, we create the basic framework of this timer.

<div class="container">
 </div>

Here, I am using blue as the webpage’s background color and white as the design’s background color. You can customize the color as per your choice.

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background: #448aff;
}

This box has width: 40% and a minimum width of 500px. There is no specified height; the height will be determined by the amount of content. 

ADVERTISEMENT

.container {
    background-color: #ffffff;
    width: 40%;
    min-width: 500px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 20px 0;
    padding-bottom: 50px;
    border-radius: 10px;
}

Step 2: Create a display to see the time

ADVERTISEMENT

We will create a div element to display the current time — hours, minutes, seconds, and milliseconds.

Portfolio Website using HTML and CSS (Source Code)

<div class="timerDisplay"> 00 : 00 : 00 : 000 </div>

Next, style the display using CSS.

.timerDisplay {
    position: relative;
    width: 92%;
    background: #ffffff;
    left: 4%;
    padding: 40px 0;
    font-family: "Roboto mono", monospace;
    color: #0381bb;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 139, 253, 0.25);
}

Step 3: Create 3 buttons in Stopwatch using HTML CSS

After the display block, we will create three buttons to control the stopwatch. The three buttons  — Pause, Start, Reset  — pause the countdown, start the countdown, and restart the countdown all over again. Use HTML’s button tag to create these buttons. 

ADVERTISEMENT

<div class="buttons">
    <button id="pauseTimer">Pause</button>
    <button id="startTimer">Start</button>
    <button id="resetTimer">Reset</button>
</div>

To arrange buttons in a same horizontal line and responsively adjust them vertically for smaller screens, we will use flex display for the buttons container.

ADVERTISEMENT

.buttons {
    width: 90%;
    margin: 60px auto 0 auto;
    display: flex;
    justify-content: space-around;
}
.buttons button {
    width: 120px;
    height: 45px;
    background-color: #205e94;
    color: #ffffff;
    border: none;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

I changed the background color of the second and third buttons using the following two lines of CSS code. Nth-last-child has been used to change the background color.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

.buttons button:nth-last-child(2) {
    background-color: #d23332;
}
.buttons button:nth-last-child(1) {
    background-color: #20b380;
}

Step 4: Activate Simple Stopwatch using JavaScript

ADVERTISEMENT

Now the user interface of our stopwatch is ready and it is time to add functionality to the project using JavaScript. 

First, we are initializing milliseconds, seconds, minutes, and hours variables to store their respective information. Initially, all these values are set equal to zero.

Initialize a variable (timerRef) for the display block.

let [milliseconds,
seconds,
minutes,
hours]=[0,
0,
0,
0];
let timerRef=document.querySelector('.timerDisplay');
let currentInterval=null;

Using JavaScript, we will activate the start button. When you press this button, a countdown begins.

document.getElementById("startTimer").addEventListener("click", () => {
    if (currentInterval !== null) {
        clearInterval(currentInterval);
    }
    currentInterval = setInterval(displayTimer, 10);
});

Also, add functionality to the pause button. As a result, if you hit this button during the stopwatch, the countdown will come to a halt.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

document.getElementById("pauseTimer").addEventListener("click", () => {
    clearInterval(currentInterval);
});

The following codes creates the reset button. Hours, minutes, seconds, and milliseconds will be 0 when you click the reset button.

document.getElementById("resetTimer").addEventListener("click", () => {
    clearInterval(currentInterval);
    [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
    timerRef.innerHTML = "00 : 00 : 00 : 000 ";
});

Next create a displayTimer function that controls the display.

function displayTimer() {
    milliseconds += 10;
    if (milliseconds == 1000) {
        milliseconds = 0;
        seconds++;
        if (seconds == 60) {
            seconds = 0;
            minutes++;
            if (minutes == 60) {
                minutes = 0;
                hours++;
            }
        }
    }

Before each one-digit interval, we add zero. When the values of hours, minutes, and seconds are less than ten we add zero before the number. Moreover, in the case of milliseconds if the value is less than 10 we add ’00’ before the number, and if the value is between 10 and 100 add ‘0’ before the number.

let h = hours < 10 ? "0" + hours : hours;
let m = minutes < 10 ? "0" + minutes : minutes;
let s = seconds < 10 ? "0" + seconds : seconds;
let ms =
    milliseconds < 10
        ? "00" + milliseconds
        : milliseconds < 100
        ? "0" + milliseconds
        : milliseconds;

Finally we display these values in the display block of our stopwatch, using innerHTML. 

timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

This is how the Javascript file will look at the end.

let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
let timerRef = document.querySelector(".timerDisplay");
let currentInterval = null;
document.getElementById("startTimer").addEventListener("click", () => {
    if (currentInterval !== null) {
        clearInterval(currentInterval);
    }
    currentInterval = setInterval(displayTimer, 10);
});
document.getElementById("pauseTimer").addEventListener("click", () => {
    clearInterval(currentInterval);
});
document.getElementById("resetTimer").addEventListener("click", () => {
    clearInterval(currentInterval);
    [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
    timerRef.innerHTML = "00 : 00 : 00 : 000 ";
});
function displayTimer() {
    milliseconds += 10;
    if (milliseconds == 1000) {
        milliseconds = 0;
        seconds++;
        if (seconds == 60) {
            seconds = 0;
            minutes++;
            if (minutes == 60) {
                minutes = 0;
                hours++;
            }
        }
    }
    let h = hours < 10 ? "0" + hours : hours;
    let m = minutes < 10 ? "0" + minutes : minutes;
    let s = seconds < 10 ? "0" + seconds : seconds;
    let ms =
        milliseconds < 10
            ? "00" + milliseconds
            : milliseconds < 100
            ? "0" + milliseconds
            : milliseconds;
    timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

Our stopwatch is ready to use, now you can add it to your GitHub and share it with your friends. 

Thanks for reading!

 

Which code editor do you use for this Stopwatch coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT