JavaScript: Implement a Countdown Timer

Author:

Introduction

A countdown timer is a tool that counts down from a specified time to zero. It’s useful in various scenarios like quizzes, sales events, and alarms. In JavaScript, we can easily create a countdown timer using the setInterval() function. This guide will walk you through writing a JavaScript program to implement a countdown timer.

Problem Statement

Create a JavaScript program that:

  • Accepts a time duration in seconds or minutes.
  • Counts down from the specified time.
  • Displays the remaining time and stops when the countdown reaches zero.

Example:

  • Input: 10 seconds
  • Output: 
    10 seconds remaining...
9 seconds remaining...
...
1 second remaining...
Time's up!

Solution Steps

  1. Initialize the Countdown Time: Set the countdown time in seconds.
  2. Create the Countdown Logic:
    • Use the setInterval() function to decrement the time every second.
    • Display the remaining time.
    • Stop the countdown when the time reaches zero using clearInterval().
  3. Display the Result: Output the countdown in real time.

JavaScript Program

// JavaScript Program to Implement a Countdown Timer
// Author: https://www.rameshfadatare.com/

function countdown(seconds) {
    let remainingTime = seconds;

    // Step 1: Create a setInterval function to count down every second
    const timer = setInterval(() => {
        // Step 2: Display the remaining time
        if (remainingTime > 0) {
            console.log(`${remainingTime} seconds remaining...`);
            remainingTime--;
        } else {
            // Step 3: Stop the countdown and display "Time's up!"
            console.log("Time's up!");
            clearInterval(timer);
        }
    }, 1000); // The interval is set to 1000 milliseconds (1 second)
}

// Example usage: 10-second countdown
countdown(10);

Explanation

Step 1: Create a setInterval() Function to Count Down

  • The setInterval() function is used to run a function repeatedly at specified intervals. In this case, the function is executed every 1000 milliseconds (1 second).

Step 2: Display the Remaining Time

  • The remaining time (remainingTime) is decremented every second and printed to the console until it reaches zero.

Step 3: Stop the Countdown and Display "Time's up!"

  • When the remaining time reaches zero, the countdown stops, and "Time's up!" is displayed. The clearInterval() function is used to stop the countdown by clearing the interval.

Output Example

10 seconds remaining...
9 seconds remaining...
8 seconds remaining...
...
1 second remaining...
Time's up!

Example with Different Input

countdown(5);

Output:

5 seconds remaining...
4 seconds remaining...
3 seconds remaining...
2 seconds remaining...
1 second remaining...
Time's up!

Countdown Timer with Display in HTML

You can also display the countdown in an HTML element instead of the console. Here's an example where the countdown is displayed on a webpage.

HTML and JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
</head>
<body>
    <h1>Countdown Timer</h1>
    <p id="timerDisplay">10 seconds remaining...</p>

    <script>
        function countdown(seconds) {
            let remainingTime = seconds;
            const display = document.getElementById("timerDisplay");

            const timer = setInterval(() => {
                if (remainingTime > 0) {
                    display.textContent = `${remainingTime} seconds remaining...`;
                    remainingTime--;
                } else {
                    display.textContent = "Time's up!";
                    clearInterval(timer);
                }
            }, 1000);
        }

        // Example usage: 10-second countdown
        countdown(10);
    </script>
</body>
</html>

Explanation of HTML Example

  • The timerDisplay element is updated every second to show the remaining time.
  • When the countdown reaches zero, the text changes to "Time's up!".

Output in Browser

The countdown timer will display on the page and update in real-time.

Conclusion

This JavaScript program demonstrates how to implement a countdown timer using the setInterval() function. The timer counts down in seconds, and when it reaches zero, it stops and displays "Time's up!". This can be further enhanced for more complex timers, such as using minutes and hours or integrating with user interfaces.

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment