Hey there! π
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: blur
makes 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. -
incrementTime
anddecrementTime
: 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)
A bit confusing to use at first but a great job
Thanks for your valuable feedback!
Cool project!
Thank you