Building a Simple Stopwatch with HTML and JavaScript

In the fast-paced world of web development, it's crucial to have tools that help us manage time effectively. One such tool is a stopwatch, and in this tutorial, we'll walk through the process of building a simple stopwatch using HTML and JavaScript.

How We can create A simple stopwatch with use of HTML CSS and JavaScript.

Output:

Output of project : Stopwatch

HTML Structure

To begin, let's take a look at the HTML structure that forms the foundation of our stopwatch:

html
<div class="stopWatch">
  <div id="timer">00:00:00</div>
  <div id="buttons">
    <button id="start">Start</button>
    <button id="stop">Stop</button><button id="reset">Reset</button>
  </div>
</div>

Here, we have a container div with the class stopWatch that houses the display area (timer) and control buttons (start, stop, and reset

We recently create a structure of Our Projects Now Its Time to Design it With the help of CSS Okay Kindly Select the Whole Code and Paste it Your Styles.css File and Save it Successfully.

body {
background-color: #f0f0f0;
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
overflow: hidden;
align-items: center;
}
.stopWatch{
height: 300px;
width: 70%;
background-color: #223;
border-radius: 10px;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
#timer {
font-size: 7rem;
font-weight: 700;
text-shadow: 2px 2px #223;
color: #f0f0f0;
width: 600px;
text-align: center;
margin: 40px auto;
}

#buttons {
display: flex;
justify-content: center;
}

button {
background-color: #fff;
color: black;
border: none;
font-size: 20px;
font-weight: 600;
padding: 1.1rem 3rem;
margin: 1rem;
border-radius: 10px;
cursor: pointer;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
transition: all 0.2s;
transition: 0.5s ease-in-out;
}

button:hover {
background-color: rgb(44, 44, 66);
color: #f0f0f0;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 800px) {
#timer {
font-size: 4rem;
width: 350px;
}

button {
font-size: 1.1rem;
padding: 1rem 1.5rem;
}
}

JavaScript Implementation

Let's break down the JavaScript code that powers our enhanced stopwatch:

javascript
const timerEl = document.getElementById("timer");
const startButtonEl = document.getElementById("start");
const stopButtonEl = document.getElementById("stop");
const resetButtonEl = document.getElementById("reset");

let startTime = 0;
let elapsedTime = 0;
let timerInterval;

In this section, we set up variables to capture elements from the HTML and define variables to manage the stopwatch's state.

Start Timer Function

javascript
function startTimer() {
  startTime = Date.now() - elapsedTime;

  timerInterval = setInterval(() => {
    elapsedTime = Date.now() - startTime;
    timerEl.textContent = formatTime(elapsedTime);
  }, 10);

  startButtonEl.disabled = true;
  stopButtonEl.disabled = false;
}

The startTimer function initializes the timer, capturing the start time and updating the elapsed time at regular intervals. It also disables the start button while enabling the stop button.

Format Time Function

javascript
function formatTime(elapsedTime) {
  // ... precise time formatting logic
}

The formatTime function takes the elapsed time and formats it into hours, minutes, seconds, and milliseconds for a user-friendly display.

Stop and Reset Functions

javascript
function stopTimer() {
  clearInterval(timerInterval);
  startButtonEl.disabled = false;
  stopButtonEl.disabled = true;
}

function resetTimer() {
  clearInterval(timerInterval);
  elapsedTime = 0;
  timerEl.textContent = "00:00:00.00";
  startButtonEl.disabled = false;
  stopButtonEl.disabled = true;
}

The stopTimer function stops the timer and toggles button states, while the resetTimer function resets the timer to zero and updates the display accordingly.

Event Listeners

javascript
startButtonEl.addEventListener("click", startTimer);
stopButtonEl.addEventListener("click", stopTimer);
resetButtonEl.addEventListener("click", resetTimer);

Lastly, we set up event listeners for the start, stop, and reset buttons to trigger their respective functions.

Conclusion

Congratulations! You've successfully built an enhanced stopwatch with JavaScript, featuring precise time formatting and intuitive controls. Feel free to customize and integrate this stopwatch into your projects. Time is on your side!

Spydev Code

Search This Blog