How To Create A Stopwatch In JAVASCRIPT (Source Code)

How To Create A Stopwatch In JAVASCRIPT (Source Code)

Stopwatch is a good standalone project as well. A stopwatch is basically used on many websites to track the time of user who’s surfing on the site. It’s an JavaScript Intermediate project for the Front-End Developer.

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.

Prerequisites for this project:

Before we start the coding you must have basic knowledge of HTML5, CSS3 & little bit of JS. 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.

HTML Code for Stopwatch

<head>
    <meta charset="UTF-8">
    <title>Stopwatch by imrohitsoni</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>

</head>
<body>
    <div class = "wrap">
        <div id="timer">

            <svg width="260" height="260">
                <circle class="defaultCircle" cx="125" cy="125" r="120" stroke="#635bfc" stroke-width="10" fill="none" stroke-linecap="round" />
                <circle class="animateCircle" cx="125" cy="125" r="120" stroke="#635bfc" stroke-width="10" fill="none" stroke-linecap="round" />

            </svg>

            <span id="hours">00</span> :
            <span id="minutes">00</span> :
            <span id="seconds">00</span> :
            <span id="milliseconds">00</span> 
        </div>
        <p>Your time starts now</p>
            <div class="option">
                <a id="play" onclick="playFunc();" href="javascript:void(0)"><i class="fa fa-play"></i></a>
                <a id="stop" onclick="stopFunc();" href="javascript:void(0)"><i class="fa fa-stop"></i> Stop</a>
                <a id="reset" onclick="resetFunc();" href="javascript:void(0)"><i class="fa fa-undo"></i></a>
            </div>
        </div>
</body>

 

In this code we have divided the class in the wrap and given an id as timer and then in the svg tag we have created circles as a clock design so that it looks like a stop watch.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

Then we have created a span id in which we have mentioned hours, minutes, seconds & milliseconds. Now lets design the page using CSS.

CSS Code for Stopwatch

* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto;
    font-weight: 300;
    background: linear-gradient(to left, #635bfc, #8ffcf0);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 800px;
    margin: 150px auto;
    color: #ffffff;
    text-align: centre;
}

.wrap {
    display: inline-block;
    min-width: 360px;
    min-height: 400px;
    padding: 50px 15px;
    background-color: #fff;
    box-shadow: 0 5px 25px #0000004a;
    border-radius: 8px;
    text-align: center;
}

#timer {
    position: relative;
    width: 250px;
    height: 250px;
    line-height: 250px;
    border-radius: 50%;
    font-size: 32px;
    margin: 0 auto;
    background-color: #fff;
}

p {
    font-weight: 400;
    color: gray;
    padding: 30px 0;
}

.option a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
}

#play, #reset {
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50px;
    color: #fff;
    background: linear-gradient(45deg, #8ffcf0, #635bfc);
    box-shadow: 0 8px 25px #bf5fc045, 0 8px 25px, #ff00ec50;
    transition: all ease 0.1s;
}

#stop {
    padding: 15px 20px;
    border-radius: 50px;
    color: #fff;
    font-weight: 400;
    background: linear-gradient(45deg, #8ffcf0, #635bfc);
    box-shadow: all ease 0.1s;
}

#play:active, #reset:active, #stop:active {
    transform: scale(0.95);
}

#stop .fa {
    margin-right: 5px;
}

#fa-play {
    padding-left: 5px;
}

.pause .fa-play,
.fa-pause {
    display: none;
}

.pause .fa-pause {
    display: inline-block;
}

/* Circle Animation */
#timer svg {
    position:absolute;
    left: 0;
}

.defaultCircle {
    opacity: 0.3;
}

#animateCircle.addAnimation {
    stroke-dasharray: 770;
    stroke-dashoffset: -770;
    animation: animateCircle 60s linear infinite;
    animation-play-state: paused;
}

@keyframes animateCircle {
    from {
        stroke-dashoffset: 0;
    }
}

 

In the styling part we designed the body to make creative & attractive as we have styled the circles which will be the shape of our stopwatch as well as the buttons now we have created the structure we styled the pre defined tags now we have make it responsive to do it we have to code in Javascript.

100+ Front-end Projects for Web developers (Source Code)

JavaScript Code in Stopwatch

window.onload = function() {

    var milliseconds = 00;
    var seconds = 00;
    var minutes = 00;
    var hours = 00;

    var appendMilliseconds = document.getElementById("milliseconds");
    var appendSeconds = document.getElementById("seconds");
    var appendMinutes = document.getElementById("minutes");
    var appendHours = document.getElementById("hours");

    var buttonStart = this.document.getElementById("play");
    var buttonStop = this.document.getElementById("stop");
    var buttonReset = this.document.getElementById("reset");

    var Interval;

    // Function for starting timer

    function startTimer() {
        milliseconds++;

        // Milliseconds Counter

        if (milliseconds < 9) {
            appendMilliseconds.innerHTML = "0" + milliseconds;
            

        }
        if (milliseconds > 9) {
            appendMilliseconds.innerHTML = milliseconds;
        }
        if (milliseconds > 99) {
            seconds++;
            appendSeconds.innerHTML = "0" + seconds;
            milliseconds = 0;
            appendMilliseconds.innerHTML = "0" + milliseconds;
        }
        if (seconds > 9) {
            appendSeconds.innerHTML = seconds;
        } 

        //Second Counter

        if (seconds > 59) {
            minutes++;
            appendMinutes.innerHTML = "0" + minutes;
            seconds = 0;
            appendSeconds.innerHTML = "0" + seconds;
        }
        if (minutes > 9) {
            appendMinutes.innerHTML = minutes;
        }

        //Minutes Counter
        if (minutes > 59) {
            hours++;
            appendHours.innerHTML = "0" + hours;
            minutes = 0;
            appendminutes.innerHTML = "0" + minutes;
        }
        if (hours > 9) {
            appendHours.innerHTML = hours;
        }
    }
    
    // Button to start timer
    buttonStart.onclick = function() {
        clearInterval(Interval);
        Interval = setInterval(startTimer, 10);
        $("#animateCircle").addClass("addAnimation");
        $("#animateCircle.addAnimation").css("animation-play-state", "running")
    }

    // Button to stop timer
    buttonStop.onclick = function() {
        clearInterval(Interval);
        $("#animateCircle").css("animation-play-state", "paused")

    }

    // Button to reset timer
    buttonReset.onclick = function() {
        clearInterval(Interval);
        milliseconds = "00";
        seconds = "00";
        minutes = "00";
        hours = "00";
        appendMilliseconds.innerHTML = milliseconds;
        appendSeconds.innerHTML = seconds;
        appendMinutes.innerHTML = minutes;
        appendHours.innerHTML = hours;
    }


}

The last and the most important part of the project is been code as you can see we have create onload function() and defined many if-statement in it. As well as we have defined onclick function for the button of start, stop & pause. Let’s see the output of this project.

 

FINAL OUTPUT of Stopwatch

We have Successfully created our Stopwatch using HTML5, CSS3 & JS (Source Code) | How to Create a Stopwatch in JavaScript You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

WRITTEN BY – Harsh Sawant

Code BY – Rohit Kumar Soni(@imrohitsoni)

Share on:

Leave a Comment