Design a Timer using Tailwind CSS

Last Updated : 05 Mar, 2024

In this project, we’ll design a Timer using Tailwind CSS a utility-first CSS framework. A timer counts down from a specified interval and notifies the user upon completion. We’ll create an attractive and responsive interface for easy interaction.

Approach

First define the layout of the timer interface using the HTML elements.
Apply Tailwind CSS classes to style the timer components and make the UI visually appealing.
Write JavaScript code to the implement the timer functionality including starting, pausing, resetting and updating the timer display.
Ensure that the timer interface is responsive across different devices and screen sizes using the Tailwind CSS responsive classes.
Enhance the user experience by adding interactive features such as buttons for the controlling the timer and visual feedback for the user actions.

Example: Implementation to design a Timer.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 flex items-center 
             justify-center h-screen">
    <div class="bg-white rounded-lg shadow-lg p-20">
        <h1 class="text-3xl font-bold mb-2 text-center">
              Timer
          </h1>
        <div class="flex items-center justify-center 
                    bg-gray-200 rounded-lg p-4 mt-8">
            <span id="timer" class="text-4xl font-bold">
                  00:00:00
              </span>
        </div>
        <div class="flex justify-center space-x-4 mt-8">
            <button id="startBtn"
                    class="px-4 py-2 bg-blue-500 text-white 
                           rounded hover:bg-blue-600">Start
              </button>
            <button id="pauseBtn"
                    class="px-4 py-2 bg-yellow-500 text-white 
                           rounded hover:bg-yellow-600">Pause
              </button>
            <button id="resetBtn"
                    class="px-4 py-2 bg-red-500 text-white 
                           rounded hover:bg-red-600">Reset
              </button>
        </div>
    </div>
    <script>
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const resetBtn = document.getElementById('resetBtn');
        let intervalId;
        let seconds = 0;
 
        function update() {
            const hours = 
                  Math.floor(seconds / 3600).toString().padStart(2, '0');
            const minutes = 
                  Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
            const secs = (seconds % 60).toString().padStart(2, '0');
            timerDisplay.textContent = `${hours}:${minutes}:${secs}`;
        }
        function start() {
            intervalId = setInterval(() => {
                seconds++;
                update();
            }, 1000);
            startBtn.disabled = true;
            pauseBtn.disabled = false;
        }
        function pause() {
            clearInterval(intervalId);
            startBtn.disabled = false;
            pauseBtn.disabled = true;
        }
        function reset() {
            clearInterval(intervalId);
            seconds = 0;
            update();
            startBtn.disabled = false;
            pauseBtn.disabled = true;
        }
        startBtn.addEventListener('click', start);
        pauseBtn.addEventListener('click', pause);
        resetBtn.addEventListener('click', reset);
    </script>
</body>
 
</html>