Creating a Stopwatch Web Application using JavaScript Tutorial

Submitted by oretnom23 on Wednesday, March 22, 2023 - 09:12.

In this tutorial, you can learn to create a simple Stopwatch web application using JavaScript. This tutorial aims to provide students and beginners with a reference for learning to create a Stopwatch. Here, I will be providing a simple web page script that demonstrates the creation of a simple Stopwatch Web Application.

What is Stopwatch Web App

It is a simple web application that simulates the Stopwatch functionalities. Stopwatch web application allows the user to start, pause/stop, and reset time measurement between the time activation (0) and deactivation (n). Stopwatches are often used for a game with a time races scenario.

How to Create a Stopwatch Web Application?

The Stopwatch web application can be easily achieved using JavaScript's built methods and APIs. To create stopwatch functionalities, we can use the setInterval function/method, date, and some of the formulas to calculate the difference between the start time and end time. Also, we will need to manipulate the stopwatch container element text to update the current measurement of the time every millisecond/second. Check out the web page scripts that I provided below to understand more about how to create a simple stopwatch web application.

Sample Web Page Scripts

The scripts below result in a simple web application that contains a stopwatch time measurement container, start button, pause button, and reset button elements. The application allows the user to start the stopwatch from zero and pause/continue/reset the time measurement.

Page Interface

Here is the HTML file script known as index.html. It contains the HTML codes for the page layout and the stopwatch containers and button elements.

<!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>JS - Stopwatch</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="content-md-lg py-3">
        <div class="page-title">Creating a Stopwatch using JavaScript</div>
        <hr style="margin:auto; width:25px" class="border-light opacity-100">
        <div class="container-lg">
            <div class="row py-3">
                <!-- Stopwatch Wrapper -->
                <div id="stopwatch-wrapper" class="col-lg-5 col-md-5 col-sm-10 col-12 mx-auto">
                    <div class="card bg-dark rounded-0 border-dark-subtle">
                        <div class="card-body rounded-0">
                            <div class="container-fluid">
                                <div id="timer-wrapper">
                                    <div class="timer">00:00:00</div>
                                </div>
                                <div id="timer-buttons">
                                    <button type="button" id="startBTN" class="timer-btn btn btn-dark border border-dark-subtle rounded-pill text-info"><span class="material-symbols-outlined">play_arrow</span> Start</button>
                                    <button type="button" id="pauseBTN" class="timer-btn btn btn-dark border border-dark-subtle rounded-pill text-info"><span class="material-symbols-outlined">pause</span> Pause</button>
                                    <button type="button" id="resetBTN" class="timer-btn btn btn-dark border border-dark-subtle rounded-pill text-info"><span class="material-symbols-outlined">restart_alt</span> Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Stopwatch Wrapper -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Stylesheet

Next, here is the custom stylesheet or the CSS file script known as style.css. It contains the custom codes for some of the page elements.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
:root{
    --space-mono-font: 'Space Mono', monospace;
    --border-dark-subtle: #373838; 
}
*{
    box-sizing: border-box;
}
body *{
    font-family: var(--space-mono-font);
}
/**
Page Design
*/
body,
html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    background-color: #282A3A;
}
.page-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    font-family: var(--secular-font);
    text-align: center;
    text-shadow: 0px 0px 3px #2020208c;
}
.border-dark-subtle{
    border-color: var(--border-dark-subtle) !important;
}
 
 
/* Timer */
#timer-wrapper{
    width: 300px;
    height: 300px;
    margin: auto;
    border: 1px solid #2a2a2a;
    box-shadow: 0px 0px 10px #a0e1ffa1;
    padding: 0.5em;
    border-radius: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
#timer-wrapper .timer{
    color: #fff;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 2.5rem;
}
/* timer-wrapper buttons */
#timer-buttons {
    width: fit-content;
    margin: 1em auto;
    display: flex;
}
 
#timer-buttons .timer-btn{
    display: none;
    align-items: center;
    margin: 0 .5em;
    justify-content: center;
}

Main Script

Lastly, here is the Javascript file script that is known as script.js. It contains the JS codes that make the stopwatch and its buttons functional.

// Buttons Selector
const startBTN = document.getElementById('startBTN')
const pauseBTN = document.getElementById('pauseBTN')
const resetBTN = document.getElementById('resetBTN')
 
const TimerField = document.querySelector('#timer-wrapper .timer')
 
var timerStart = 0,
    now;
window.addEventListener('load', ()=>{
    startBTN.style.display = `flex`
})
 
class Timer{
    elapsedTime;
    currentTime;
    started;
    timerInterval;
    constructor(){
        this.elapsedTime = 0
    }
    timerIntervalFunc=()=>{
        console.log(this.currentTime)
        this.currentTime = Date.now() - this.started;
    }
    timerStart (){
        this.started = Date.now() - this.elapsedTime ;
        startBTN.innerHTML = `<span class="material-symbols-outlined">resume</span> Continue`
        startBTN.style.display = `none`
        pauseBTN.style.display = `flex`
        resetBTN.style.display = `flex`
        this.timerInterval = setInterval(()=>{
            this.currentTime = Date.now() - this.started;
            this.displayTimer()
        }, 0)
    } 
 
    displayTimer(){
        var timerData = this.currentTime
        this.elapsedTime = timerData
        var difMin = timerData / (1000 * 60);
        var min = Math.floor(difMin)
        var difsec = (difMin - min) * 60;
        var sec = Math.floor(difsec)
        var difms = 100 * (difsec - sec);
        var ms = Math.floor(difms)
        min = String(min).padStart(2, 0)
        sec = String(sec).padStart(2, 0)
        ms = String(ms).padStart(2, 0)
        
        TimerField.innerText = `${min}:${sec}:${ms}`
    }
    pauseTimer(){
        clearInterval(this.timerInterval)
        startBTN.style.display = `flex`
        pauseBTN.style.display = `none`
    }
    resetTimer(){
        clearInterval(this.timerInterval)
        startBTN.innerHTML = `<span class="material-symbols-outlined">play_arrow</span> Start`
        startBTN.style.display = `flex`
        pauseBTN.style.display = `none`
        resetBTN.style.display = `none`
        this.elapsedTime = 0
        TimerField.innerText = `00:00:00`
    }
}
let TimerObj = new Timer();
window.addEventListener('load', ()=>{
    startBTN.style.display = `flex`;
})
startBTN.addEventListener('click', ()=>{
    TimerObj.timerStart()
})
pauseBTN.addEventListener('click', ()=>{
    TimerObj.pauseTimer()
})
resetBTN.addEventListener('click', ()=>{
    TimerObj.resetTimer()
})

Snapshots

Here are the snapshots or images of the overall result of the given stopwatch web app scripts above.

Not Started

Started

DEMO VIDEO

There you go! I have also provided the complete source code zip file of the web page scripts that I created on this site and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code the way you wanted.

That's it! I hope that this Creating a Stopwatch using JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

256 views