Have you ever wanted to add a stopwatch to your website or web application? With the power of HTML and CSS, you can easily create a sleek and functional stopwatch that will impress your users. In this tutorial, we’ll guide you through the steps to create a stopwatch from scratch, without any external libraries or frameworks. Let’s dive in!
Preview (Stopwatch with HTML and CSS)
HTML
<div class="container">
<h1>Stopwatch with HTML and CSS</h1>
<p class="time">00 : 00 : 00</p>
<div class="buttons">
<button id="start" onclick="this.disabled= true;calltimer()">Start</button>
<button onclick="laptimer()">Lap</button>
<button id="stop" onclick="stoptimer()">Stop</button>
<button id="clear" onclick="cleartimer()">Clear</button>
</div>
<p id="lap"></p>
</div>The code begins with a container div element, which acts as the main wrapper for our stopwatch. Inside the container, we have an h1 heading displaying the title “Stopwatch” to provide a clear indication of the purpose of the component.
Below the heading, we have a paragraph element with a class of “time.” This is where the elapsed time will be displayed in the format of “00 : 00 : 00”. Initially, the time is set to all zeros, indicating that the stopwatch hasn’t started yet.
Inside the container, we also have a div element with a class of “buttons.” This div holds the buttons that control the stopwatch. The first button has an id of “start” and an onclick event that triggers the function calltimer(). When clicked, this button disables itself using the disabled attribute, preventing multiple start actions. The second button is labeled “Lap” and triggers the laptimer() function when clicked. The third button, with an id of “stop,” triggers the stoptimer() function. Finally, the last button has an id of “clear” and triggers the cleartimer() function.
Lastly, we have an empty paragraph element with an id of “lap.” This element will be used to display any lap times recorded during the stopwatch’s operation.
CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: rgb(15, 20, 0);
font-family: 'Open Sans', sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
max-width: 300px;
width: 100%;
border-radius: 8px;
background: #fff;
}
.time {
margin-top: 20px;
font-size: 32px;
}
.buttons {
margin-top: 16px;
}
button {
border: 0;
padding: 8px 12px;
background: #ff7b17;
border-radius: 4px;
font-size: 14px;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
transition: 0.15s;
}
button:hover {
background: #f06800;
}
button:disabled {
background: #ffbd8a;
box-shadow: none;
}
button:focus {
outline: 0;
}
#lap {
margin-top: 12px;
}The CSS code provides styling rules for different elements of our stopwatch. Firstly, the .container class sets the text alignment to center and adds a margin on top to create visual spacing.
The .buttons class sets a bottom margin of 20 pixels, providing spacing between the buttons and other elements.
The button selector styles all the buttons within the .buttons div. It sets the margin-right to 10 pixels, creating a small gap between buttons. The padding, font size, background color, text color, border, and border-radius properties combine to create a visually appealing button style. The background color is set to a shade of blue (#4285F4), and the text color is white (#fff) to ensure readability.
Lastly, the button:disabled pseudo-class targets the disabled state of the start button. It changes the background color to a lighter shade of gray (#aaa) and sets the cursor to “not-allowed,” indicating that the button is disabled and cannot be interacted with.
These CSS styles enhance the visual aesthetics of our stopwatch, making it more engaging and user-friendly. You can always add more taste to the design of the Stopwatch.
JavaScript
let time = document.querySelector('.time');
let start = document.querySelector('#start');
let stop = document.querySelector('#stop');
let clear = document.querySelector('#clear');
let lap = document.querySelector("#lap");
let seconds = 0, minutes = 0, hours = 0, t
function addtime() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
time.innerHTML = (hours ? (hours <= 9 ? "0" + hours : hours) : "00") + " : " +
(minutes ? (minutes <= 9 ? "0" + minutes : minutes) : "00") + " : " +
(seconds ? (seconds <= 9 ? "0" + seconds : seconds) : "00")
calltimer();
}
function calltimer() {
t = setTimeout(addtime, 1000);
}
function laptimer() {
if (seconds > 0) {
let newlap = document.createElement("p");
lap.appendChild(newlap);
newlap.innerHTML =
(hours ? (hours <= 9 ? "0" + hours : hours) : "00") + " : " +
(minutes ? (minutes <= 9 ? "0" + minutes : minutes) : "00") + " : " +
(seconds ? (seconds <= 9 ? "0" + seconds : seconds) : "00")
}
}
function stoptimer() {
clearTimeout(t);
start.disabled = false;
}
function cleartimer() {
time.textContent = "00 : 00 : 00";
lap.innerHTML = "";
seconds = 0; minutes = 0; hours = 0;
}The addtime() function is responsible for incrementing the time values. It increases the seconds and checks if they have reached 60. If so, it resets the seconds to 0 and increments the minutes. Similarly, if the minutes reach 60, it resets them to 0 and increments the hours. The function then updates the time display by modifying the HTML content of the time element.
The calltimer() function is used to start the timer by setting a timeout using setTimeout(). It invokes the addtime() function every second (1000 milliseconds) to keep the stopwatch running.
The laptimer() function creates a new paragraph element dynamically and appends it to the lap display area. It updates the content of the newly created element with the current lap time, which is obtained from the values of hours, minutes, and seconds.
The stoptimer() function stops the timer by clearing the timeout using clearTimeout(). It also enables the start button for subsequent timer starts. The cleartimer() function resets the stopwatch by setting the time display to all zeros, clearing the lap display area, and resetting the values of seconds, minutes, and hours to zero.
Thank you for reading the blog about Stopwatch project. Here is the Github repository link.
