Stop Watch using HTML CSS and JavaScript | JavaScript Project - codeitwise

Here we are going to build a stop watch using html css and javascript. After learning basics of HTML CSS and JavaScript, you must start creating projects immediately. If you want to be a good developer you must practice developing. Stop Watch is one of the best beginner project in javascript. Also at beginner level, html css javascript projects like digital clock, tic-tac-toe game, simple calculator, basic website etc etc are the best ones to polish your developing skills.

A stop watch is a simple device designed to measure amount of time elapsed. Stop watch can be analog and digital. Nowadays, digital stop watch is widely used. You must have seen a stop watch in your smartphone. It is used for many purposes. So today we are going to create a digital stop watch with the help of html css and javascript. In my opinion stop watch is one of the best javascript project as it requires a lot of javascript which will help to apply your theoretical knowledge and improve your skills. Also you are going learn a lot from this project. Keep doing such web development projects as it helps to polish your developing skills. Now, without any further adeu lets start!

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code.

Create three new files for html css and javascript seperately and link them all in html file. HTML is the skeleton of our website, css adds design to the contents of HTML file and JavaScript adds the functionality in our clock.

Demo -

00

:

00

:

00

:

00

This is how our project actually looks like -

Build Stop Watch using HTML CSS and JavaScript-

HTML Code (index.html)

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body onload="f()">
    <div class="stopcontainer">
        <div class="watch">
            <p id="t">00</p><b style="font-size: xx-large;">:</b>
            <p id="t1">00</p><b style="font-size: xx-large;">:</b>
            <p id="t2">00</p><b style="font-size: xx-large;">:</b>
            <p id="t3">00</p>
        </div>
        <button id="start" disabled="disabled" onclick="l()">Start</button>
        <button id="stop" disabled="disabled">Pause</button><button type="reset" id="reset"
            disabled="disabled">Reset</button>
    </div>
</body>
<script src="script.js"></script>

</html>

CSS Code (style.css)

body {
    background-image: url(pexels-gradienta-7135082.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ededf9;
}

.stopcontainer {
    display: grid;
    /* flex-direction:row */
    justify-content: center;
    align-content: center;
    width: 437px;
    height: 280px;
    border-radius: 10px;
    /* border: 1px solid black; */
    padding-top: 35px;
    background-color: #1c0050;
    box-shadow: 0px 0px 10px 0px #ffeb3b,inset 1px -20px 120px 20px #04144e,inset 0px 20px 20px 20px #0b247c,inset 0px 20px 20px 20px #04144e,inset 0px 20px 98px 65px #0c1e5c;
}

.watch {
    background-color: rgb(19, 18, 18);
    color: snow;
    border: 1px solid black;
    height: 100px;
    width: 415px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding: 20px 25px 20px 25px;
    box-shadow: 1px 0px 0px 0px rgb(0 0 0), -1px 0px 0px 0px rgb(0 0 0), 0px 0px 4px 0px rgb(0 0 0);
    display: flex;
    /* flex-direction:row */
    grid-column-end: auto;
    grid-column-start: span 3;
    /* justify-content: center; */
    /* align-items: center; */
}

#t {
    color: #00fb00;
    font-size: xxx-large;
    font-weight: bolder;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

#t1 {
    color: #00fb00;

    font-size: xxx-large;
    font-weight: bolder;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

#t2 {
    color: #00fb00;

    font-size: xxx-large;
    font-weight: bolder;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
#t3{
    color: #00fb00;

    font-size: xxx-large;
    font-weight: bolder;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
/* #start {
    background-color: #4300c9;
    color: blue;
    background-color: #4300c9;
    color: snow;

} */

button {
    box-shadow: 0px 5px 2px 0px rgb(0 0 0);
    padding: 10px;
    border-radius: 20px;
    border: none;
    /* border: -0.99em solid black; */
    margin: 25px;
    /* background-color: #4300c9; */
    /* color: snow; */
    font-size: large;
    font-weight: bolder;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100px;
}

button:active {
    box-shadow: 0px 4px 2px 0px rgb(0 0 0);
    /* background-color: black; */
    /* box-shadow: 0 5px #666; */
    transform: translateY(3px);
}

p {
    margin: 10px;
}

JavaScript Code (script.js)

function f(){
    document.getElementById("start").disabled = false;
    document.getElementById("start").style.backgroundColor = "rgb(203 31 31)";
    document.getElementById("start").style.color = "snow";
}
function l()
{
    document.getElementById("start").style.backgroundColor = "";
    document.getElementById("start").style.color = "";
    document.getElementById("start").disabled = true;
}
document.getElementById("start").addEventListener("click", timer);
document.getElementById("stop").addEventListener("click", s);
document.getElementById("reset").addEventListener("click", r);
function s() {
    document.getElementById("reset").disabled = false;
    document.getElementById("reset").style.backgroundColor = "rgb(203 31 31)";
    document.getElementById("reset").style.color = "snow";
    document.getElementById("start").disabled = false;
    document.getElementById("start").style.backgroundColor = "rgb(203 31 31)";
    document.getElementById("start").style.color = "snow";
    clearInterval(interval);
}
function r() {
    location.reload();
}
var ms = 0;
var d = 1;
var d1 = 1;
var d2 = 1;
function timer() {
    document.getElementById("stop").disabled = false;
    document.getElementById("stop").style.backgroundColor = "rgb(203 31 31)";
    document.getElementById("stop").style.color = "snow";
    document.getElementById("start").innerHTML = "Resume";
    
    // document.getElementById("start").style.visibility="hidden";
    // document.getElementById("stop").style.visibility="visible";
    // document.getElementById("reset").style.visibility="visible";
    interval = setInterval(() => {
        if (ms < 10) {
            document.getElementById('t3').innerHTML = "0" + ms;
            ms = ms + 1;
        }
        else if (ms > 9 && ms < 100) {
            document.getElementById('t3').innerHTML = ms;
            ms = ms + 1;
        }
        else {
            ms = 0;
            if (d < 10) {
                document.getElementById('t2').innerHTML = "0" + d;
                d = d + 1;
            }
            else if (d > 9 && d < 60) {
                document.getElementById('t2').innerHTML = d;
                d = d + 1;
            }
            else {
                d = 0;
                if (d1 < 10) {
                    document.getElementById('t1').innerHTML = "0" + d1;
                    d1 = d1 + 1;
                }
                else if (d1 > 9 && d1 < 60) {
                    document.getElementById('t1').innerHTML = d1;
                    d1 = d1 + 1;
                }
                else {
                    d1 = 0;
                    if (d2 < 10) {
                        document.getElementById('t').innerHTML = "0" + d2;
                        d2 = d2 + 1;
                    }
                    else {
                        document.getElementById('t').innerHTML = d2;
                        d2 = d2 + 1;
                    }
                }
            }
        }

    }, 10);
}

Now that we have build a good looking stop watch using html css and javascript, I will suggest you to not just copy paste the code but also to practice on your own. Go ahead and make changes in the code and see what visible changes you see, try to give this stop watch a different look. Code the entire stop watch on your own and if at any point you feel any problem or feel like stuck at some point, come back and see the code, understand the code and then again code yourself. Remember copy pasting won't make you good at developing but practicing on your own will.

Tutorial -