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

byPiyush Patil -
0
Simple Stopwatch using HTML, CSS and JavaScript

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!

Join us on Telegram Join Now

Before we start, here are some more 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. QR Code Generator using JavaScript


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


Demo


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

Simple Stopwatch using HTML, CSS and JavaScript

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();
});
Join us on Telegram Join Now

Written by: Coding Torque | 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💖
 
 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post