Breakdown of the code
1. HTML Document Structure
<!DOCTYPE html>Declares the document type and version of HTML being used.
<html lang="en">:The root element of the HTML document, with lang="en" indicating that the content is in English.
<head>...</head>: Contains meta-information about the document.
<meta charset="UTF-8">Specifies the character encoding for the document as UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ensures the page is responsive and sets the viewport to match the device's width.
<title>StopWatch<title>Sets the title of the document shown in the browser tab.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" ...>Includes Font Awesome icons.
<style>...</style>: Contains CSS to style the elements of the document.
<body>...</body>: Contains the content of the document.
2. CSS Styling
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #111;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.container {
width: 90%;
margin: auto;
}
.time {
display: flex;
justify-content: center;
}
.number {
width: 80px;
height: 80px;
font-size: 60px;
margin: 0;
line-height: 80px;
text-align: center;
}
.minutes, .seconds {
color: #007FFF;
}
.colon {
height: 80px;
width: 20px;
font-size: 50px;
text-align: center;
line-height: 70px;
}
.buttons {
display: flex;
font-size: 100px;
justify-content: center;
margin: 24px;
}
.buttons div {
width: 120px;
margin: 0 24px;
cursor: pointer;
}
.buttons div.reset {
pointer-events: none;
color: rgb(124, 117, 117);
}
.buttons div.active {
pointer-events: all;
color: white;
}
@media (max-width: 900px) {
.buttons {
font-size: 80px;
}
}
- Resetting Default Styles: ensures no default margins or padding and uses the border-box model for sizing.
- Body Styles: The body is styled to center its content vertically and horizontally, set a background color, and use a specific font.
- Container: Centers the content within the container and sets its width to 90%.
- Time: Uses flexbox to center the time display horizontally.
- Number: Sets the size and alignment for the time numbers.
- Minutes and Seconds: Changes the color of the minutes and seconds to blue.
- Colon: Styles the colons between the time units.
- Buttons: Uses flexbox to center the buttons, sets their size, and adds spacing.
- Reset Button: Initially, disables pointer events and sets its color to grey.
- Active Button: Enables pointer events and sets the color to white.
- Media Query: Adjusts the button size for screens smaller than 900px.
3. HTML Content
- <div class="container"> is a wrapper for the content.
- <div class="time"> contains the stopwatch display.
- <div class="buttons"> contains the play/pause and reset buttons.
4. JavaScript Functionality
<script>...</script>: Contains JavaScript to add interactivity to the page.
const play = document.querySelector('.play');
const reset = document.querySelector('.reset');
const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');
const centiSeconds = document.querySelector('.centi-seconds');
let interval;
let count = 0;
let second = 0;
let minute = 0;
let hour = 0;
let timer = true;
play.addEventListener('click', () => {
if(timer){
play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
interval = setInterval(stopWatch, 10);
timer = false;
reset.classList.remove('active');
} else {
clearInterval(interval);
timer = true;
play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
reset.classList.add('active');
}
});
reset.addEventListener('click', () => {
if (!timer) {
return;
}
clearInterval(interval);
count = 0;
second = 0;
minute = 0;
hour = 0;
centiSeconds.innerHTML = '00';
seconds.innerHTML = '00';
minutes.innerHTML = '00';
hours.innerHTML = '00';
});
function stopWatch(){
count++;
if(count == 100){
second++;
count = 0;
}
if(second == 60){
minute++;
second = 0;
}
if(minute == 60){
hour++;
minute = 0;
}
centiSeconds.innerHTML = count < 10 ? "0" + count : count;
seconds.innerHTML = second < 10 ? "0" + second : second;
minutes.innerHTML = minute < 10 ? "0" + minute : minute;
hours.innerHTML = hour < 10 ? "0" + hour : hour;
}
1. Selecting Elements: 'document.querySelector' is used to select the play, reset buttons, and time display elements.
2. Variables: Initializes variables for the interval, counts for centiSeconds, seconds, minutes, hours, and a timer state.
3. Play Button Event Listener:
- When clicked, it toggles between starting and pausing the stopwatch.
- If the timer is true (paused), it changes the button to a pause icon, starts the interval to call stopWatch every 10 milliseconds, and disables the reset button.
- If the timer is false (running), it stops the interval, changes the button to a play icon, and enables the reset button.
4. Reset Button Event Listener:
- When clicked, it resets the time only if the timer is paused.
- Stops the interval, resets all counts to 0, and updates the display to '00'.
5. stopWatch Function:
- Increments the centi-seconds count.
- If centi-seconds reach 100, it resets to 0 and increments the seconds count.
- If seconds reach 60, it resets to 0 and increments the minutes count.
- If minutes reach 60, it resets to 0 and increments the hours count.
- Updates the display to show the current counts, ensuring two digits for each unit by adding a leading zero if necessary.