🔗 Introduction

Have you ever needed a simple countdown timer for your projects? In this tutorial, we will build a minimalistic Timer App using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice DOM manipulation and event handling in JavaScript.

🔢 Project Overview

Our Timer App will include:

  • A countdown timer starting from 24:59 ⏳
  • Start/Stop functionality ⏸️▶️
  • Reset button to restart the timer 🔄
  • Simple and modern UI with CSS styling 🎨

Let's dive into the code! 🚀

📄 HTML Structure

The following HTML creates the basic layout of our Timer App:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer App</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <main>
        <section id="timerScreen">
            <div id="timer-container">
                <h4 id="author">Your Name</h4>
                <p id="course">JavaScript Timer</p>
                <div id="timerDisplay">
                    <h1 id="time">24:59</h1>
                </div>
                <div id="button-container">
                    <button id="startBtn" class="button">Start</button>
                    <button id="resetBtn" class="button">Reset</button>
                    <button id="closeBtn" class="button">&times;</button>
                </div>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

📝 JavaScript Logic

Now, let's implement the timer functionality in JavaScript. This script:

  • Starts and stops the countdown ⏳
  • Updates the UI dynamically 🖥️
  • Resets the timer when needed 🔄
// Selecting elements
const timerDisplay = document.getElementById("time");
const startButton = document.getElementById("startBtn");
const resetButton = document.getElementById("resetBtn");
const timerContainer = document.getElementById("timerDisplay");

let isRunning = false;
let interval;
let minutes = 24;
let seconds = 59;

// Function to update timer display
function updateTimer() {
    timerDisplay.innerHTML = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
}

// Start/Stop button functionality
startButton.addEventListener("click", function () {
    if (!isRunning) {
        isRunning = true;
        startButton.textContent = "Stop";
        timerContainer.style.border = "1px solid lightgray";

        interval = setInterval(() => {
            if (seconds > 0 || minutes > 0) {
                seconds--;
                if (seconds === 0 && minutes > 0) {
                    seconds = 59;
                    minutes--;
                }
                updateTimer();
            } else {
                clearInterval(interval);
                isRunning = false;
                startButton.textContent = "Start";
            }
        }, 1000);
    } else {
        clearInterval(interval);
        isRunning = false;
        startButton.textContent = "Start";
        timerContainer.style.border = "2px solid red";
    }
});

// Reset button functionality
resetButton.addEventListener("click", function () {
    clearInterval(interval);
    isRunning = false;
    minutes = 24;
    seconds = 59;
    updateTimer();
    startButton.textContent = "Start";
});

// Initial display update
updateTimer();

🎨 Styling with CSS

To give our Timer App a clean and modern look, we use the following CSS styles:

body {
    background-color: #e5e5e5;
}

#timerScreen {
    margin: 6% auto;
    height: 600px;
    width: 60%;
    border: 1px solid #e5e5e5;
    border-radius: 30px;
    background-color: #fefefe;
    box-shadow: 10px 10px 50px grey;
    display: flex;
    align-items: center;
    justify-content: center;
}

#timerDisplay {
    border: 1px solid lightgray;
    height: 300px;
    width: 28%;
    border-radius: 50%;
    box-shadow: 0px 0px 150px 50px lightgray;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    border: none;
    background-color: #fefefe;
    font-family: 'Courier New', Courier, monospace;
    color: gray;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
}

.button:hover {
    color: black;
}

🚀 Final Thoughts

Congratulations! 🎉 You have successfully built a simple Timer App using HTML, CSS, and JavaScript. This project is a great way to practice JavaScript fundamentals like event listeners, DOM manipulation, and intervals.

🔍 What You Learned:

✅ Creating a dynamic UI with JavaScript
✅ Using setInterval to update the timer every second
✅ Handling user interactions with event listeners
✅ Styling elements to improve UI/UX

Now, try customizing the app! Maybe add sound alerts, different themes, or an adjustable timer. 🚀

Happy coding! 💻✨

Author Of article : Davide Read full article