🔗 Introduction
Have you ever needed a simple countdown timer for your projects? In this tutorial, we will build a minimalistic Timer App using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice DOM manipulation and event handling in JavaScript.
🔢 Project Overview
Our Timer App will include:
- A countdown timer starting from 24:59 ⏳
- Start/Stop functionality ⏸️▶️
- Reset button to restart the timer 🔄
- Simple and modern UI with CSS styling 🎨
Let's dive into the code! 🚀
📄 HTML Structure
The following HTML creates the basic layout of our Timer App:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer App</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<main>
<section id="timerScreen">
<div id="timer-container">
<h4 id="author">Your Name</h4>
<p id="course">JavaScript Timer</p>
<div id="timerDisplay">
<h1 id="time">24:59</h1>
</div>
<div id="button-container">
<button id="startBtn" class="button">Start</button>
<button id="resetBtn" class="button">Reset</button>
<button id="closeBtn" class="button">×</button>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
📝 JavaScript Logic
Now, let's implement the timer functionality in JavaScript. This script:
- Starts and stops the countdown ⏳
- Updates the UI dynamically 🖥️
- Resets the timer when needed 🔄
// Selecting elements
const timerDisplay = document.getElementById("time");
const startButton = document.getElementById("startBtn");
const resetButton = document.getElementById("resetBtn");
const timerContainer = document.getElementById("timerDisplay");
let isRunning = false;
let interval;
let minutes = 24;
let seconds = 59;
// Function to update timer display
function updateTimer() {
timerDisplay.innerHTML = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
}
// Start/Stop button functionality
startButton.addEventListener("click", function () {
if (!isRunning) {
isRunning = true;
startButton.textContent = "Stop";
timerContainer.style.border = "1px solid lightgray";
interval = setInterval(() => {
if (seconds > 0 || minutes > 0) {
seconds--;
if (seconds === 0 && minutes > 0) {
seconds = 59;
minutes--;
}
updateTimer();
} else {
clearInterval(interval);
isRunning = false;
startButton.textContent = "Start";
}
}, 1000);
} else {
clearInterval(interval);
isRunning = false;
startButton.textContent = "Start";
timerContainer.style.border = "2px solid red";
}
});
// Reset button functionality
resetButton.addEventListener("click", function () {
clearInterval(interval);
isRunning = false;
minutes = 24;
seconds = 59;
updateTimer();
startButton.textContent = "Start";
});
// Initial display update
updateTimer();
🎨 Styling with CSS
To give our Timer App a clean and modern look, we use the following CSS styles:
body {
background-color: #e5e5e5;
}
#timerScreen {
margin: 6% auto;
height: 600px;
width: 60%;
border: 1px solid #e5e5e5;
border-radius: 30px;
background-color: #fefefe;
box-shadow: 10px 10px 50px grey;
display: flex;
align-items: center;
justify-content: center;
}
#timerDisplay {
border: 1px solid lightgray;
height: 300px;
width: 28%;
border-radius: 50%;
box-shadow: 0px 0px 150px 50px lightgray;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.button {
border: none;
background-color: #fefefe;
font-family: 'Courier New', Courier, monospace;
color: gray;
padding: 10px;
margin: 5px;
cursor: pointer;
}
.button:hover {
color: black;
}
🚀 Final Thoughts
Congratulations! 🎉 You have successfully built a simple Timer App using HTML, CSS, and JavaScript. This project is a great way to practice JavaScript fundamentals like event listeners, DOM manipulation, and intervals.
🔍 What You Learned:
✅ Creating a dynamic UI with JavaScript
✅ Using setInterval to update the timer every second
✅ Handling user interactions with event listeners
✅ Styling elements to improve UI/UX
Now, try customizing the app! Maybe add sound alerts, different themes, or an adjustable timer. 🚀
Happy coding! 💻✨
Top comments (0)