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 =
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 >
|
Output:
Recommended Articles