Countdown Timer
/* General styling */
body {
font-family: 'Roboto', sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Timer Container Styling */
.timer-container {
text-align: center;
background: #ffffff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
/* Timer Box Styling */
#timer {
display: flex;
justify-content: space-around;
margin: 20px 0;
}
.time-box {
background-color: #f0f8ff;
padding: 20px 30px;
font-size: 36px;
border-radius: 10px;
color: #333;
font-weight: bold;
min-width: 80px;
}
/* Buttons and Input */
.start-btn, .input-time {
padding: 10px;
font-size: 16px;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.start-btn {
background-color: #3498db;
color: white;
cursor: pointer;
}
.start-btn:hover {
background-color: #2980b9;
}
.input-time {
padding: 10px;
margin-top: 10px;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
font-size: 16px;
}
/* Title Styling */
.title {
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
}
// Function to format time
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// Function to start the countdown
document.getElementById('start-btn').addEventListener('click', function() {
const targetTime = document.getElementById('set-time').value;
if (!targetTime) {
alert('Please select a future time.');
return;
}
const countdownEnd = new Date(targetTime).getTime();
const countdownInterval = setInterval(function() {
const currentTime = new Date().getTime();
const timeRemaining = countdownEnd - currentTime;
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
document.getElementById('timer').innerHTML = "
Time's Up!
";
return;
}
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
document.getElementById('days').textContent = formatTime(days);
document.getElementById('hours').textContent = formatTime(hours);
document.getElementById('minutes').textContent = formatTime(minutes);
document.getElementById('seconds').textContent = formatTime(seconds);
}, 1000);
});
