Introduction

Welcome to our tutorial on building a Countdown Timer Lock UI. This feature is a fantastic addition to any web project where timing is crucial, such as in quizzes, games, or productivity applications. We'll use Tailwind CSS for styling and JavaScript for functionality. Whether you're a beginner or have some experience, this guide will walk you through each step.

Prerequisites

Step 1: Project Setup

First, create a new folder for your project (e.g., countdown-timer). Within this folder, create two files: index.html and script.js.

In index.html, set up your HTML structure. Include a link to Tailwind CSS in the <head> section and reference your JavaScript file at the end of the <body>.

<!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>
    <!-- Link to Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex justify-center items-center h-screen bg-gray-100">
      <div class="p-10 bg-white rounded-lg shadow-md">
        <div class="flex flex-col items-center">
          <h2 class="text-2xl font-bold mb-6">Countdown Timer</h2>
          <div id="timer" class="text-4xl font-mono text-gray-800">
            <!-- Timer will be displayed here -->
          </div>
        </div>
      </div>
    </div>
    <!-- Link to JavaScript File -->
    <script src="script.js"></script>
  </body>
</html>

Step 3: Styling with Tailwind CSS

The HTML code uses Tailwind CSS classes for styling. It creates a centered card on the page where the timer will be displayed.

Step 4: JavaScript Functionality

In script.js, write the following JavaScript code and let's break it down.

Variable Initialization:

let currentTimeCounter = 0;
const timeLimit = 30; // Time limit in minutes
let finish = false;
  • currentTimeCounter: Keeps track of the elapsed time in seconds.
  • timeLimit: Defines the duration of the timer (in minutes).
  • finish: A flag to indicate if the timer has finished.

The countTime Function:

const countTime = () => {
    const timeLimitInMinutes = timeLimit * 60;
    const timerDisplay = document.getElementById('timer');
    // ...
};
  • Converts the time limit to seconds.
  • Grabs the timer display element from the HTML.

Setting Up the Interval:

const timeCounter = setInterval(() => {
    // ...
}, 1000);
  • setInterval is used to create a timer that calls a function every 1000 milliseconds (1 second).

Timer Logic:

if (currentTimeCounter >= timeLimitInMinutes) {
    clearInterval(timeCounter);
    finish = true;
    timerDisplay.textContent = "Time's up!";
} else {
    // ...
}
  • Checks if the currentTimeCounter has reached the timeLimitInMinutes.
  • Stops the interval and updates the display when the time is up.

Updating the Timer Display:

let minutes = Math.floor(currentTimeCounter / 60);
let seconds = currentTimeCounter % 60;
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
currentTimeCounter++;
  • Calculates the minutes and seconds.
  • Updates the timer display on the web page.
  • Increments the currentTimeCounter.

Starting the Timer:

countTime();
  • Calls the countTime function to start the timer.

full code :

let currentTimeCounter = 0;
const timeLimit = 30; // Time limit in minutes
let finish = false;

const countTime = () => {
    const timeLimitInMinutes = timeLimit * 60;
    const timerDisplay = document.getElementById('timer');

    const timeCounter = setInterval(() => {
        if (currentTimeCounter >= timeLimitInMinutes) {
            clearInterval(timeCounter);
            finish = true;
            timerDisplay.textContent = "Time's up!";
        } else {
            let minutes = Math.floor(currentTimeCounter / 60);
            let seconds = currentTimeCounter % 60;
            timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            currentTimeCounter++;
        }
    }, 1000);
};

countTime();

Step 5: Running Your Project

Open index.html in a web browser to see your countdown timer in action.

Conclusion

Congratulations! You've successfully created a Countdown Timer Lock UI using Tailwind CSS and JavaScript. This guide covered setting up a basic web development project, writing HTML and JavaScript, and applying Tailwind CSS styles. The JavaScript section provided a detailed breakdown of the timer logic for a better understanding. Feel free to customize the timer to fit your specific needs.

Happy coding!