Skip to main content

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 #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

Comments

Post a Comment

Popular posts from this blog

Code: Form Input Types

  Code: Form Input Types Send Feedback For now, we have created a simple form. But there is a problem that the inputs can take any value other than what they are meant to be. So, we need to change the type of the input element for proper functioning. Your task is to change the type of input according to the meaning of each of them. The meaning of each input element is provided below - 1. Comment - to provide a comment for the blog 2. Name - the name of the person who wants to comment on the blog. 3. Email - to provide the email id of the person. 4. Website - to provide the link to a website that belongs to the above said person. The expected output is - code for this  <!DOCTYPE html> <html>     <head>         <title>Best Coding Practices</title>     </head>     <body>         <div>             <header>       ...
Post a Comment
Read more

Add View Section to Blog

  Add View Section to Blog Send Feedback Let's add a view section ( using a div tag ) to our blog, which represents the number of visits to our blog. Although it would be static for now, we can change it to dynamic later. So, we will use some text formatting tags to add the views section. The instructions are provided below. Note: The text formatting tags are always inline. Instructions to follow - 1. Add a separate view section (using a div tag ) inside the article in the container (div tag )of the first image of the article. 2. Now, add 2 span's with content as: 'Views:' and '1,137'. Make these span's bold using the appropriate text formatting tag. Expected Blog page is - <!DOCTYPE html> <html>     <head>         <title>Best Coding Practices</title>     </head>     <body>         <div>             <header>       ...
Post a Comment
Read more

Acer Nitro V ANV15-51 2023 Gaming Laptop: A Comprehensive Review

Acer Nitro V ANV15-51 (2023): A Capable Contender in the Mid-Range Gaming Arena (2000 Words) Acer Nitro V ANV15-51 2023 Gaming Laptop (13th Gen Core i5/ 16GB/ 512GB SSD/ Win11/ 6GB Graph) price in India starts from ₹77,790 It is available at lowest price on Amazon in India as on Apr 24, 2024. Take a look at Acer Nitro V ANV15-51 2023 Gaming Laptop (13th Gen Core i5/ 16GB/ 512GB SSD/ Win11/ 6GB Graph) detailed specifications and features. Acer Nitro V ANV15-51 2023 Gaming Laptop (13th Gen Core i5/ 16GB/ 512GB SSD/ Win11/ 6GB Graph) Quick Specifications Specification Value Display 15.6 inches CPU 13th Gen Intel Core i5 13420H GPU NVIDIA GeForce RTX 4050 RAM 16 GB DDR5 SDRAM Brand Acer Model Name ANV15-51 Screen Size 15.6 Inches Colour Black Hard Disk Size 512 GB CPU Model Core i5 RAM Memory Installed Size 16 GB Operating System Windows 11 Home Special Feature Backlit Keyboard The world of gaming laptops is a constant battleground, with manufacturers vying for dominance with ever-more pow...
Post a Comment
Read more