Stopwatch Source Code

HTML STRUCTURE

<div class="stopwatch-container">
    <h1>Stopwatch</h1>
    
    <div class="display">
        <div id="display" class="time">00:00:00</div>
    </div>
    
    <div class="button-group">
        <button id="startBtn" class="btn start-btn">Start</button>
        <button id="stopBtn" class="btn stop-btn" disabled>Stop</button>
        <button id="resetBtn" class="btn reset-btn">Reset</button>
    </div>
    
    <div class="laps" id="lapsList">
        <!-- Lap times will be added here -->
    </div>
</div>

JAVASCRIPT CODE

// Variable Declarations
let milliseconds = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let interval;
let isRunning = false;

const display = document.getElementById('display');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resetBtn = document.getElementById('resetBtn');

// Format and Display Function
function formatTime() {
    const h = String(hours).padStart(2, '0');
    const m = String(minutes).padStart(2, '0');
    const s = String(seconds).padStart(2, '0');
    return `${h}:${m}:${s}`;
}

function updateDisplay() {
    display.textContent = formatTime();
}

// Start Stopwatch Function
function startStopwatch() {
    if (isRunning) return;
    isRunning = true;
    startBtn.disabled = true;
    stopBtn.disabled = false;
    
    interval = setInterval(() => {
        milliseconds += 10;
        if (milliseconds === 1000) { seconds++; milliseconds = 0; }
        if (seconds === 60) { minutes++; seconds = 0; }
        if (minutes === 60) { hours++; minutes = 0; }
        updateDisplay();
    }, 10);
}

// Stop and Reset Functions
function stopStopwatch() {
    if (!isRunning) return;
    isRunning = false;
    startBtn.disabled = false;
    stopBtn.disabled = true;
    clearInterval(interval);
}

function resetStopwatch() {
    if (isRunning) stopStopwatch();
    milliseconds = 0;
    seconds = 0;
    minutes = 0;
    hours = 0;
    updateDisplay();
    startBtn.disabled = false;
    stopBtn.disabled = true;
}