Create a Stopwatch using Bootstrap & JavaScript
A stopwatch tracks elapsed time, typically in hours, minutes, seconds, and fractions of a second. It can be started, stopped, and reset, providing precise timing for various activities, such as sports, experiments, or productivity tracking.
Prerequisites
Approach
- HTML, Bootstrap, and JavaScript were used to create the stopwatch.
- Bootstrap is used for layout, including card structure. JavaScript manages stopwatch functionality.
- Time values are updated every 10 milliseconds.
- Event listeners trigger actions for start, stop, and reset buttons.
- The stopwatch accurately increments seconds, minutes, and hours.
- Single-digit values padded with zeros for consistency. Provides a visually appealing interface.
- Enables tracking of elapsed time in various contexts.
- Combines styling and functionality for effective stopwatch implementation.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Bootstrap Stopwatch</ title > < link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container mt-5" > < div class = "card" > < div class = "card-body" > < div class = "row" > < div class = "col-12 text-center" > < h1 >Bootstrap Stopwatch</ h1 > </ div > </ div > < div class = "row mt-5" > < div class = "col-12" > < div class = "card" > < div class = "card-body" > < div class = "card text-white bg-primary" > < div class = "card-body text-center" id = "time" > < span class = "digit" id = "hr" >00</ span > < span class = "txt" >Hr</ span > < span class = "digit" id = "min" >00</ span > < span class = "txt" >Min</ span > < span class = "digit" id = "sec" >00</ span > < span class = "txt" >Sec</ span > < span class = "digit" id = "count" >00</ span > </ div > </ div > </ div > </ div > </ div > </ div > < div class = "row mt-3 justify-content-center" > < button class = "btn btn-success mx-2" id = "start" >Start</ button > < button class = "btn btn-primary mx-2" id = "stop" >Stop</ button > < button class = "btn btn-danger mx-2" id = "reset" >Reset</ button > </ div > </ div > </ div > </ div > < script > let startBtn = document.getElementById('start'); let stopBtn = document.getElementById('stop'); let resetBtn = document.getElementById('reset'); let hour = 0; let minute = 0; let second = 0; let count = 0; let timer; startBtn.addEventListener('click', function () { // Check if timer is not already running if (!timer) { timer = setInterval(stopWatch, 10); } }); stopBtn.addEventListener('click', function () { clearInterval(timer); timer = null; // Reset timer variable }); resetBtn.addEventListener('click', function () { clearInterval(timer); timer = null; // Reset timer variable hour = 0; minute = 0; second = 0; count = 0; updateDisplay(); }); function stopWatch() { count++; if (count == 100) { second++; count = 0; } if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; second = 0; } updateDisplay(); } function updateDisplay() { document.getElementById('hr').textContent = hour.toString().padStart(2, '0'); document.getElementById('min').textContent = minute.toString().padStart(2, '0'); document.getElementById('sec').textContent = second.toString().padStart(2, '0'); document.getElementById('count').textContent = count.toString().padStart(2, '0'); } </ script > </ body > </ html > |
Output:
Contact Us