Javascript 3 minute timer that repeats when complete and shows message at the end of each cycle

Learn javascript 3 minute timer that repeats when complete and shows message at the end of each cycle with practical examples, diagrams, and best practices. Covers javascript, setinterval, countdow...
Tags:
Categories:

Build a Repeating 3-Minute JavaScript Timer with Completion Messages

Hero image for Javascript 3 minute timer that repeats when complete and shows message at the end of each cycle

Learn how to create a JavaScript countdown timer that repeats automatically after each cycle and displays a custom message upon completion.

Implementing a repeating countdown timer in JavaScript is a common requirement for various web applications, from productivity tools to game interfaces. This article will guide you through creating a 3-minute timer that not only counts down but also automatically restarts and displays a custom message at the end of each cycle. We'll cover the core JavaScript logic, how to update the display, and ensure smooth, continuous operation.

Understanding the Core Timer Logic

At the heart of any JavaScript timer are the setInterval() and clearInterval() functions. setInterval() allows you to execute a function repeatedly at a specified interval (in milliseconds), while clearInterval() is used to stop the execution. For our repeating timer, we'll initialize a duration, decrement it every second, and check if it has reached zero. Once it hits zero, we'll display a message, reset the duration, and let the cycle continue.

flowchart TD
    A[Start Timer] --> B{Initialize Duration (3 min)};
    B --> C[Start Interval (every 1 second)];
    C --> D{Decrement Time Remaining};
    D --> E{Is Time Remaining <= 0?};
    E -- No --> F[Update Display];
    F --> C;
    E -- Yes --> G[Display 'Time's Up!' Message];
    G --> H[Reset Duration to 3 min];
    H --> F;
    C --> I[Stop Timer (clearInterval)];
    I --> J[End];

Flowchart of the repeating countdown timer logic.

Setting Up the HTML Structure

Before diving into JavaScript, we need a simple HTML structure to display our timer and the completion message. We'll use a div element for the timer display and another for the message. This keeps our presentation layer clean and easily targetable by JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repeating Countdown Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        #timer-display {
            font-size: 4em;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        #message-display {
            font-size: 1.5em;
            color: #007bff;
            min-height: 1.5em; /* Reserve space */
        }
    </style>
</head>
<body>
    <div id="timer-display">03:00</div>
    <div id="message-display"></div>

    <script src="timer.js"></script>
</body>
</html>

Basic HTML structure for the timer and message display.

Implementing the JavaScript Timer

Now, let's write the JavaScript code (timer.js) that brings our timer to life. We'll define variables for the initial duration, the timer interval ID, and references to our HTML elements. The core logic will reside within a function executed by setInterval.

let duration = 3 * 60; // 3 minutes in seconds
let timerInterval;
const timerDisplay = document.getElementById('timer-display');
const messageDisplay = document.getElementById('message-display');

function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

function startTimer() {
    messageDisplay.textContent = ''; // Clear any previous message
    timerDisplay.textContent = formatTime(duration); // Initial display

    timerInterval = setInterval(() => {
        duration--;
        timerDisplay.textContent = formatTime(duration);

        if (duration <= 0) {
            messageDisplay.textContent = "Time's Up! Starting next cycle...";
            clearInterval(timerInterval); // Stop current interval
            duration = 3 * 60; // Reset duration for next cycle
            setTimeout(startTimer, 3000); // Wait 3 seconds before restarting
        }
    }, 1000); // Update every 1 second
}

// Start the timer when the page loads
window.onload = startTimer;

JavaScript code for the repeating 3-minute timer.

Enhancements and Considerations

While the basic timer works, you might want to add features like pause/resume functionality, sound notifications, or dynamic duration settings. Remember to always clear intervals when they are no longer needed to prevent memory leaks, especially if you're navigating away from the page or re-initializing the timer multiple times.