HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>Countdown Timer | BrodSchool</title>
</head>
<body>
<div>
<h1>Countdown Timer</h1>
<div id="clock-container">
<div id="clock">20:00</div>
</div>
<footer>Powered by Time ✨ BrodSchool</footer>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body{
height: 100vh ;
display: flex ;
overflow: hidden ;
align-items: center ;
background: linear-gradient(135deg, #141e30, #243b55) ;
padding : 20px ;
justify-content : space-between ;
}
h1 {
font-size : 32px ;
text-align : center ;
margin-bottom : 30px ;
color : rgba(255, 255, 255, 0.7) ;
text-shadow : 2px 2px 8px rgba(0, 0, 0, 0.3) ;
}
#clock-container {
display :flex ;
width :350px ;
height :350px ;
text-align :center ;
padding :20px 40px ;
position :relative ;
border-radius :20px ;
background :rgba(255, 255, 255, 0.1) ;
box-shadow :0 15px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 255, 255, 0.1) ;
animation :float 6s infinite ease-in-out ;
}
#clock-container::before {
content :'' ;
position :absolute ;
top :-10px ;
left :-10px ;
width :100% ;
height :100% ;
background :conic-gradient(from 0deg,#ff6b6b,#f7d794,#4ecdc4,#5c6bc0,#ff6b6b) ;
border-radius :50% ;
z-index :-1 ;
filter :blur(20px) ;
}
#clock {
font-size :64px ;
font-weight :600 ;
letter-spacing :2px ;
text-shadow :0 0 20px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.2) ;
color :rgba(255, 255, 255, 0.9) ;
transition : all 0.3s ease-in-out ;
}
#clock:hover {
transform :scale(1.05) ;
text-shadow :0 0 30px rgba(255, 255, 255, 0.5) ;
}
footer {
margin-top :20px ;
font-size :15px ;
color :rgba(255, 255, 255, 0.7) ;
text-shadow :1px 1px 5px rgba(0, 0, 0, 0.5) ;
}
@keyframes spin {
0% {
transform :rotate(0deg) ;
}
100% {
transform :rotate(360deg) ;
}
}
@keyframes float {
0%, 100% {
transform :translateY(0) ;
}
50% {
transform :translateY(-15px) ;
}
@media (max-width: 768px) {
#clock {
transform :45px ;
}
#clock-container {
padding :15px 30px ;
}
}
Javascript
/*Javascript */
let remainingTime = 20 * 60; // 20 minutes in seconds
// Function to format time as mm:ss
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
// Function to update the countdown timer
function updateTimer() {
const timerElement = document.getElementById('clock');
if (remainingTime >= 0) {
timerElement.textContent = formatTime(remainingTime);
remainingTime--;
}
else {
clearInterval(timerInterval); // Stop the timer
timerElement.textContent = "TIME UP!";
}
}
// Start the countdown
const timerInterval = setInterval(updateTimer, 1000);
updateTimer();
