Simple Stopwatch using HTML, CSS and JavaScript (Source Code)

Welcome to Coding Torque, fellow coders! Are you ready to take your skills to the next level? In this tutorial, we will be creating a Simple Stopwatch using HTML, CSS, and JavaScript. Not only will this project help you improve your coding skills, but it will also come in handy as a practical tool in your daily life. Let’s get started!

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Simple Stopwatch using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag

<section class="container">
    <div class="watch">
        <h2 id="watch">00:00:00:00</h2>
    </div>
    <div class="buttons">
        <button id="start">Start</button>
        <button id="pause">Pause</button>
        <button id="reset">Reset</button>
    </div>
</section>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap");
:root {
  --primary-color: rgb(149, 0, 255);
  --primary-color-darker: rgb(85, 112, 84);
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--primary-color);
  font-family: "Poppins", sans-serif;
  font-size: 1.3em;
  line-height: 1.5em;
}

.container {
  max-width: 640px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
}

.watch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: white;
  height: 10rem;
  border-radius: 20px;
}

h2 {
  font-size: 3em;
  font-weight: 400;
  height: 50px;
  width: 335px;
}

h2.paused {
  color: red;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10px 0;
}

.buttons button {
  margin: 10px;
  margin-top: 20px;
  border: none;
  padding: 15px 30px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 4px;
  border-radius: 5px;
  cursor: pointer;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

const watch = document.querySelector('#watch');
let milliseconds = 0;
let timer;

function startWatch() {
    watch.classList.remove('paused');
    clearInterval(timer);
    timer = setInterval(() => {
        milliseconds += 10;
        let dateTimer = new Date(milliseconds);
        watch.innerHTML =
            ('0' + dateTimer.getUTCHours()).slice(-2) + ':' +
            ('0' + dateTimer.getUTCMinutes()).slice(-2) + ':' +
            ('0' + dateTimer.getUTCSeconds()).slice(-2) + ':' +
            ('0' + dateTimer.getUTCMilliseconds()).slice(-3, -1);
    }, 10);
};

function pauseWatch() {
    watch.classList.add('paused');
    clearInterval(timer);
};

function resetWatch() {
    watch.classList.remove('paused');
    clearInterval(timer);
    milliseconds = 0;
    watch.innerHTML = '00:00:00:00';
};

document.addEventListener('click', (e) => {
    const el = e.target;
    if (el.id === 'start') startWatch();
    if (el.id === 'pause') pauseWatch();
    if (el.id === 'reset') resetWatch();
});

Written by: Piyush Patil

Code Credits: @henriquelothammer

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖