 |
| Stopwatch using html css javascript |
In this article, we given a Stopwatch using html css javascript with source code as a project. Stopwatch is the unique projected which is popular tool that helps to set a timer of any task. It shows a miliseconds, seconds, minutes and hours. It is useful where we want to check the timing for task completion. It is used in games such as racing, kabbadi, etc. In this project, we given a same structure as tic-tac-toe game to play the game using the html, css and javascript.
So, Must try this project for practice in vs code to check how it works. We have given a complete source code of Stopwatch using html css javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Stopwatch.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Stopwatch using html css javascript source code
Here we given a html, css and js source code of Stopwatch project as given -
HTML
In HTML, we created a structure by adding div tags. In Div tags, we added a counting in hours, minutes, seconds and miliseconds to show the timer and added a start, pause and reset to use the stopwatch as per action. Linked css and javascript file for styling and funtionality in the html. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timer">
<div class="display">
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="milliseconds">000</span>
</div>
<div class="controls">
<button id="startBtn">Start</button>
<button id="pauseBtn">Pause</button>
<button id="resetBtn">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
We given a styling to the project with css. Added a position to the elements including div, count and buttons. We given a better responsivness with media query and made it better for user experience. Copy the given css code and paste it style.css file.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.timer {
text-align: center;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
min-width: 250px;
max-width: 80%;
margin: 20px;
}
.display {
font-size: 2em;
margin-bottom: 20px;
color: #333;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: inline-block;
}
.display span {
margin: 0 5px;
}
.controls {
margin-top: 10px;
}
.controls button {
font-size: 1em;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.controls button:hover {
background-color: #0056b3;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@media (max-width: 480px) {
.timer {
padding: 10px;
}
.display {
font-size: 1.5em;
}
.controls button {
padding: 8px 16px;
margin:10px;
}
}Javascript
We given a functionality to the code with the functions that are used in javascript. Used selector to select the elements and functions from html code. If-else statement is used to perform the action as per clicking on button of start, pause and reset. Copy the given javascript code and paste it into script.js file.
let timerInterval;
let timerRunning = false;
let hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
const displayHours = document.getElementById('hours');
const displayMinutes = document.getElementById('minutes');
const displaySeconds = document.getElementById('seconds');
const displayMilliseconds = document.getElementById('milliseconds');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
function startTimer() {
if (!timerRunning) {
timerRunning = true;
timerInterval = setInterval(updateTimer, 10);
}
}
function pauseTimer() {
clearInterval(timerInterval);
timerRunning = false;
}
function resetTimer() {
clearInterval(timerInterval);
timerRunning = false;
hours = 0;
minutes = 0;
seconds = 0;
milliseconds = 0;
updateDisplay();
}
function updateTimer() {
milliseconds++;
if (milliseconds === 100) {
milliseconds = 0;
seconds++;
}
if (seconds === 60) {
seconds = 0;
minutes++;
}
if (minutes === 60) {
minutes = 0;
hours++;
}
updateDisplay();
}
function updateDisplay() {
displayHours.textContent = padTime(hours);
displayMinutes.textContent = padTime(minutes);
displaySeconds.textContent = padTime(seconds);
displayMilliseconds.textContent = padTimeMilliseconds(milliseconds);
}
function padTime(num) {
return num < 10 ? `0${num}` : num;
}
function padTimeMilliseconds(num) {
if (num < 10) {
return `00${num}`;
} else if (num < 100) {
return `0${num}`;
} else {
return num;
}
}
startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);Output
Check this output of Stopwatch -
Also see this -
Hope this helps you to know about Stopwatch using html css javascript. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects