Home
Programming

Simple Design Stopwatch With Vanilla JavaScript

Syiainfoku make a Simple Design Stopwatch With Vanilla JavaScript

Simple Design Stopwatch With Vanilla JavaScript

Hello friends!

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Stopwatch with Vanilla JavaScript.

Ok, let's get started

Preview Stopwatch

Preview Stopwatch

In this Stopwatch there are several elements, including:

  1. Several Buttons, namely Start, Pause, Stop, Restart, Wipe, and Reset Lap
  2. The number line 00.00.00 which is the counter

Source Code and Brief Explanation

To make this program [Simple Design Stopwatch]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Stopwatch from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Stopwatch Vanilla JavaScript | hitoricoding</title>
  <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
  <div class="control">
    <button onclick="start()">Start</button>
    <button onclick="pause()">Pause</button>
    <button onclick="stop()">Stop</button>
    <button onclick="restart()">Restart</button>
    <button onclick="lap()">Lap</button>
    <button onclick="resetlaps()">Reset Lap</button>
  </div>
  <div class="stopwatch">00:00:00</div>
  <ul class="laps"></ul>


  <script src="./assets/main.js" charset="utf-8"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background: #da51ec;
  color: #fff;
}

.stopwatch {
  font-size: 150px;
  font-family: sans-serif;
  text-shadow: 5px 5px 0px #000;
}

ul li {
  list-style: none;
  padding: 10px 0;
}

button {
  cursor: pointer;
  border: 1px solid #d4d4d4;
  box-shadow: 5px 5px 0px #000;
  outline: none;
  border-radius: 5px;
  margin: 0px 5px;
  padding: 10px 20px;
}

button:nth-child(1) {
  color: #fff;
  background: #0ebe1d;
}

button:nth-child(2) {
  color: #fff;
  background: #c7ca05;
}

button:nth-child(3) {
  color: #fff;
  background: #df1811;
}

button:nth-child(4) {
  color: #fff;
  background: #1141df;
}

button:nth-child(5) {
  color: #fff;
  background: #df8611;
}

button:nth-child(6) {
  color: #fff;
  background: #11d8df;
}

Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

let ms = 0,
  s = 0,
  m = 0;
let timer;

let stopwatchElement = document.querySelector('.stopwatch');
let lapsContainer = document.querySelector('.laps');




// function for start
function start() {
  if (!timer) {
    timer = setInterval(run, 10);
  }
}

// function for pause
function pause() {
  stopTime();
}

// function for stop
function stop() {
  stopTime();
  ms = 0;
  s = 0;
  m = 0;
  stopwatchElement.textContent = getTime();
}

// function for restart
function restart() {
  stop();
  start();
}

// function for laps
function lap() {
  if (timer) {
    let li = document.createElement('li');
    li.innerText = getTime();
    lapsContainer.appendChild(li);
  }
}

// function for reset laps
function resetlaps() {
  lapsContainer.innerHTML = '';
}

// function for stop time
function stopTime() {
  clearInterval(timer);
  timer = false;
}

// function for get time
function getTime() {
  return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
}

// function update number
function run() {
  stopwatchElement.textContent = getTime();
  ms++;
  if (ms == 100) {
    ms = 0;
    s++;
  }
  if (s == 60) {
    s = 0;
    m++;
  }
}

That's it, now you have successfully created a Simple Design Stopwatch With Vanilla JavaScript, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment