It’s made of glass and has a smooth bluish background.
It’s very simple and SUPER fun to make, even if you’re just starting out with coding!
Ready? Let’s get started! 🏊♂️
🧱 HTML
Our HTML code is the blueprint of a house.
It tells the browser what parts to include, like input boxes for minutes and seconds, and buttons for controlling the timer.
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Glass Timer App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="glass-container">
<input type="number" id="minutesInput" placeholder="Minutes">
<input type="number" id="secondsInput" placeholder="Seconds">
<div class="button-container">
<button class="glass-button" onclick="incrementTime('minutes', 1)">↑</button>
<button class="glass-button" onclick="decrementTime('minutes', 1)">↓</button>
<button class="glass-button" onclick="incrementTime('seconds', 1)">↑</button>
<button class="glass-button" onclick="decrementTime('seconds', 1)">↓</button>
</div>
<button class="glass-button" onclick="startTimer()">Start</button>
<button class="glass-button" onclick="stopTimer()">Stop</button>
<button class="glass-button" onclick="resetTimer()">Reset</button>
<div id="display">Time: 00:00</div>
</div>
<script src="script.js"></script>
</body>
</html>
What’s Happening Here? 🤔
-
🔢
<input>tags: These are for entering the minutes and seconds. -
🔼 Buttons: Each button has a job:
- 🚦Start: Starts the countdown.
- 🛑Stop: Pauses the countdown.
- 🧹Reset: Sets the time back to 00:00.
- ↑ and ↓: Increases or decreases the minutes and seconds.
-
⌛
<div>withid="display": This shows the time as it counts down. Think of it as the clock on a fancy timer.
🎨 CSS
CSS makes our timer app look stylish, like putting on a cool outfit! 👗
Here’s how we styled it to have a glassy, blue effect:
/* style.css */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #87CEEB, #000); /* Blue to black background */
color: #fff;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.glass-container {
background: rgba(255, 255, 255, 0.1); /* Transparent white background for glass effect */
padding: 20px 10px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); /* Shadow for depth */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border */
width: 300px;
}
input[type="number"] {
width: 90px;
padding: 10px;
margin: 5px;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
color: #000;
text-align: center;
transition: background 0.3s, box-shadow 0.3s;
}
input::placeholder {
color: rgba(135, 206, 235, 0.7); /* Light blue placeholder */
}
.glass-button {
padding: 10px 22px;
border-radius: 10px;
background: rgba(135, 206, 235, 0.2); /* Soft blue background */
box-shadow: 0 4px 15px rgba(135, 206, 235, 0.5);
border: none;
color: #000;
cursor: pointer;
transition: background 0.3s, box-shadow 0.3s;
}
#display {
font-size: 24px;
background: rgba(0, 0, 0, 0.3); /* Dark background for contrast */
padding: 10px;
border-radius: 10px;
color: #87CEEB; /* Sky blue text */
}
How Does this Magic Work? 🪄
- 🫗 Backgrounds: The linear gradient makes the background look like the sky fading into night. 🌌
-
🥃 Glass Effect: The
backdrop-filter: blurmakes the box look frosted, like a window on a cold morning. ❄️ - 🔘 Button Style: The buttons look like they’re made of glass with a soft shadow and rounded edges.
🧠 JavaScript
JavaScript gives life to our timer (making the buttons TAKE ACTION)! 🎬
// script.js
let countdown;
function startTimer() {
const minutesInput = document.getElementById('minutesInput').value;
const secondsInput = document.getElementById('secondsInput').value;
let minutes = parseInt(minutesInput) || 0;
let seconds = parseInt(secondsInput) || 0;
let time = minutes * 60 + seconds;
if (isNaN(time) || time <= 0) {
alert('Please enter a positive number');
return;
}
clearInterval(countdown); // Stop any previous timer
countdown = setInterval(() => {
let mins = Math.floor(time / 60);
let secs = time % 60;
document.getElementById('display').textContent = `Time: ${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
if (time <= 0) {
clearInterval(countdown);
document.getElementById('display').textContent = 'Time: 00:00 - Time’s up!';
}
time--;
}, 1000);
}
function resetTimer() {
clearInterval(countdown);
document.getElementById('display').textContent = 'Time: 00:00';
}
function incrementTime(type, amount) {
const input = document.getElementById(`${type}Input`);
let value = parseInt(input.value) || 0;
input.value = Math.max(value + amount, 0);
}
function decrementTime(type, amount) {
incrementTime(type, -amount);
}
function stopTimer() {
clearInterval(countdown); // Stop the interval
}
Breaking It Down 🧩
-
startTimer: Starts counting down from the time you set. If you put in 5 minutes, it converts it to 300 seconds and starts ticking down. ⏳ -
setInterval: This function counts down every second, like a stopwatch. 📅 -
resetTimer: Stops the timer and resets the display to 00:00. -
incrementTimeanddecrementTime: Adds or subtracts time when you click the up or down buttons. Simple math! ➕➖ -
stopTimer: Pauses the timer when you press stop.
CONGRATULATIONS! 🎉
Now, you’ve got a stylish, fun-timer app that looks like it’s made of glass.
It’s perfect for timing anything, from reading to baking cookies! 🍪📖
Feel free to tweak it (change the colors, or add your own special touch!)
Thanks for the time to read this article. You can find me on 𝕏.
Read more: skills to become a backend developer in 6 months (roadmap)
KEEP CRUSHING IT!👊
Top comments (4)
Cool project!
Thank you
A bit confusing to use at first but a great job
Thanks for your valuable feedback!