Create a Responsive Stopwatch App in HTML, CSS, and JavaScript A Beginner's Tutorial #stopwatch

Create a Responsive Stopwatch App in HTML, CSS, and JavaScript A Beginner's Tutorial "Welcome to an exciting tutorial on building a custom stopwatch using HTML, CSS, and JavaScript! In this step-by-step guide, you'll learn how to create a responsive and visually appealing stopwatch from scratch. We'll cover the HTML structure, apply custom CSS styles, and implement the core functionality using JavaScript. By the end of this tutorial, you'll have a fully functional stopwatch web application that you can customize and integrate into your projects. Join us and elevate your web development skills with this fun and practical coding project!"

html code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Stopwatch</title> </head> <body> <div class="stopwatch-container"> <div id="display">00:00:00</div> <button id="startBtn" onclick="startStopwatch()">Start</button> <button id="stopBtn" onclick="stopStopwatch()">Stop</button> <button id="resetBtn" onclick="resetStopwatch()">Reset</button> </div> <script src="script.js"></script> </body> </html>


css code

body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; } .stopwatch-container { text-align: center; } #display { font-size: 2em; margin-bottom: 10px; } button { font-size: 1em; margin: 5px; padding: 5px 10px; cursor: pointer; }


javascript js code


let timer; // To store the setInterval reference let seconds = 0; let minutes = 0; let hours = 0; function startStopwatch() { timer = setInterval(updateStopwatch, 1000); document.getElementById("startBtn").disabled = true; } function stopStopwatch() { clearInterval(timer); document.getElementById("startBtn").disabled = false; } function resetStopwatch() { clearInterval(timer); document.getElementById("startBtn").disabled = false; seconds = 0; minutes = 0; hours = 0; updateDisplay(); } function updateStopwatch() { seconds++; if (seconds === 60) { seconds = 0; minutes++; if (minutes === 60) { minutes = 0; hours++; } } updateDisplay(); } function updateDisplay() { const display = document.getElementById("display"); display.textContent = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`; } function formatTime(time) { return time < 10 ? `0${time}` : time; }

if you like it then share it with your friends