How to create timer Counter with Html, Css, and Javascript.

Jay Ferg — Thu, 10 Oct 2024 01:29:30 +0000

Building a timer counter is a great way to understand the interaction between HTML, CSS, and JavaScript. This post will guide you through the process of creating a simple timer that starts counting when a user clicks a button. The timer will display the elapsed time in hours, minutes, and seconds.

Step 1: HTML Structure

Start by creating the basic HTML structure. You need a div to display the timer and a button to start it. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Counter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Timer Counter</h1>
        <div id="timer">00:00:00</div>
        <button id="startButton">Start Timer</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML file:

A div with id="timer" is used to display the timer.
A button with id="start Button" is used to start the timer.

Step 2: CSS Styling

Next, style the HTML elements to create a visually appealing interface. Feel free to style it to your liking.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#timer {
    font-size: 3rem;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

This CSS file:

Centers the content both vertically and horizontally.
Styles the timer display with a large font size.
Adds padding and styling to the button to make it more clickable.

Step 3: JavaScript Logic

Finally, add the JavaScript to handle the timer functionality. This includes starting the timer, updating it every second, and displaying the elapsed time.

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
});

This JavaScript file:

Waits for the DOM to load before executing.
Defines the startTimer function to initialize the start time and set an
interval to update the timer every second.
Defines the updateTimer function to calculate the elapsed time, format
it, and update the timer display.
Adds an event listener to the button to start the timer when clicked.

Bonus:

Hide the start button and display a stop button script

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const stopButton = document.getElementById("stopButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
        startButton.style.display = "none";
        stopButton.style.display = "inline-block";
    }

    function stopTimer() {
        clearInterval(timerInterval);
        startButton.style.display = "inline-block";
        stopButton.style.display = "none";
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
    stopButton.addEventListener("click", stopTimer);
});

DEV Community: Jay Ferg

How to create timer Counter with Html, Css, and Javascript.