DEV Community

Jay Ferg
Jay Ferg

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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);
});

Enter fullscreen mode Exit fullscreen mode

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);
});

Enter fullscreen mode Exit fullscreen mode

Top comments (0)