Amazing Stopwatch in HTML, CSS & JavaScript | Project Series Day - 14 | Frontend everything

Hello Everyone 👋Welcome to My New Blog. Today I have made a Stopwatch with the help of HTML, CSS & JavaScript | It is Project Series Day 14. 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making this simple stopwatch step by step.

Video of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

<!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>
    <script src="js/script.js" async></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrapper">
        <p><span id="seconds">00</span>:<span id="tens">00</span></p>
        <button id="button-start">Start</button>
        <button id="button-stop">Stop</button>
        <button id="button-reset">Reset</button>
    </div>


</body>

</html>

CSS🎈( step - 2)

/* Variabes */
/* Mixin's */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
    background: #e4e4e4;
    display: flex; justify-content: center; align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Poppins';
  }
  
  .wrapper {
    color: #fff;
    text-align: center;
    background-color: #171717;
    padding: 20px;
    border-radius: 12px ;
    letter-spacing: 4px;
  }
    
  #seconds, #tens {
    font-size: 2em;
  }
  
  button {
       border-radius: 5px;
    background: #0c4691;
    color: #fff;
    border: solid 1px #fff;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 18px 10px;
    width: 180px;
    margin: 10px;
    outline: none;
    transition: all 0.2s ease-in-out;
  }
  button:hover {
        background-color: transparent;
        color: #fff;
  }

JavaScript🎈( step - 3)

window.onload = function () {
  var seconds = 00;
  var tens = 00;
  var appendTens = document.getElementById("tens");
  var appendSeconds = document.getElementById("seconds");
  var buttonStart = document.getElementById("button-start");
  var buttonStop = document.getElementById("button-stop");
  var buttonReset = document.getElementById("button-reset");
  var Interval;

  buttonStart.onclick = function () {
    clearInterval(Interval);
    Interval = setInterval(startTimer, 10);
  };

  buttonStop.onclick = function () {
    clearInterval(Interval);
  };

  buttonReset.onclick = function () {
    clearInterval(Interval);
    tens = "00";
    seconds = "00";
    appendTens.innerHTML = tens;
    appendSeconds.innerHTML = seconds;
  };

  function startTimer() {
    tens++;

    if (tens <= 9) {
      appendTens.innerHTML = "0" + tens;
    }

    if (tens > 9) {
      appendTens.innerHTML = tens;
    }

    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }

    if (seconds > 9) {
      appendSeconds.innerHTML = seconds;
    }
  }
};

All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

1 Comments

piyushaggarwal0190@gmail.com

Claudio Falabella Malone25 January 2022 at 03:23
Le hice algunos cambios a tu código. Que te parece

window.onload = function () {
var seconds = 00;
var tens = 00;
var minut = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var appendMinut = document.getElementById("minut");
var buttonStart = document.getElementById("button-start");
var buttonStop = document.getElementById("button-stop");
var buttonReset = document.getElementById("button-reset");
var Interval;

buttonStart.onclick = function () {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
};

buttonStop.onclick = function () {
clearInterval(Interval);
};

buttonReset.onclick = function () {
clearInterval(Interval);
tens = "00";
seconds = "00";
minut = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
appendMinut.innerHTML = minut;
};

function startTimer() {
tens++;

if (tens <= 9) {
appendTens.innerHTML = "0" + tens;
}

if (tens > 9) {
appendTens.innerHTML = tens;
}

if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}

if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}

if (seconds > 59) {
console.log("minut");
minut++;
appendSeconds.innerHTML = "00";
appendMinut.innerHTML = "0" + minut;
seconds = 0;
appendTens.innerHTML = "0" + 0;
}
}
};

Simple StopWatch in JavaScript - frontend everything