COUNTDOWN TIMER
🕑COUNTDOWN TIMER:
<SOURCE-CODE:∕>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #e0e5ec;
font-family: Arial, sans-serif;
}
.container {
background: #ffffff;
border-radius: 20px;
box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
padding: 30px;
text-align: center;
width: 90%;
max-width: 800px;
position: relative;
}
h1 {
margin-bottom: 20px;
font-size: 2.5rem;
color: #333;
text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #b0bec5;
}
input[type="datetime-local"], select, button {
margin: 10px 0;
padding: 10px;
font-size: 1rem;
border: none;
border-radius: 10px;
box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
background: #ffffff;
color: #333;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.timer {
display: flex;
justify-content: center;
gap: 20px;
font-size: 3rem;
margin-top: 20px;
}
.time-unit {
background: #ffffff;
border-radius: 20px;
padding: 20px;
box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
min-width: 100px;
text-align: center;
color: #333;
position: relative;
}
.time-unit span {
display: block;
font-size: 0.5em;
color: #666;
}
.time-unit:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(145deg, #ffffff, #e0e5ec);
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<h1>Countdown Timer</h1>
<input type="datetime-local" id="datetime-input">
<select id="time-period" aria-label="AM or PM">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<button onclick="startCountdown()">Start Countdown</button>
<div class="timer">
<div id="days" class="time-unit">--<span>Days</span></div>
<div id="hours" class="time-unit">--<span>Hours</span></div>
<div id="minutes" class="time-unit">--<span>Minutes</span></div>
<div id="seconds" class="time-unit">--<span>Seconds</span></div>
</div>
</div>
<script>
let interval;
function startCountdown() {
clearInterval(interval); // Clear any existing countdown
const input = document.getElementById('datetime-input').value;
const period = document.getElementById('time-period').value;
if (!input) {
alert('Please select a date and time.');
return;
}
const targetDate = new Date(input);
const hours = targetDate.getHours();
const newHours = period === 'PM' ? (hours % 12) + 12 : hours % 12;
targetDate.setHours(newHours);
function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate.getTime() - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('days').innerHTML = `${days}<span>Days</span>`;
document.getElementById('hours').innerHTML = `${hours}<span>Hours</span>`;
document.getElementById('minutes').innerHTML = `${minutes}<span>Minutes</span>`;
document.getElementById('seconds').innerHTML = `${seconds}<span>Seconds</span>`;
if (distance < 0) {
clearInterval(interval);
document.querySelector('.timer').innerHTML = "EXPIRED";
}
}
interval = setInterval(updateCountdown, 1000);
updateCountdown(); // Initial call to display countdown immediately
}
</script>
</body>
</html>
Comments
Post a Comment