<h1 id="display"></h1>
<div>
<p id="Days"></p>
<p id="Hours"></p>
<p id="Min"></p>
<p id="Sec"></p>
</div>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
div{
display: flex;
}
div p{
border: 1px solid black;
text-align: center;
font-size: 35px;
width: 135px;
margin-left: 5px;
padding: 10px;
border-radius: 10px;
background-color: lightblue;
}
h1{
border-radius: 10px;
background-color: lightblue;
}
// Set the target date and time for the countdown
const targetDate = new Date('2023-12-31T01:59:59');
// Get the countdown container element
const countdownDisplay = document.getElementById('display');
const daysElement = document.getElementById('Days');
const hoursElement = document.getElementById('Hours');
const minElement = document.getElementById('Min');
const secElement = document.getElementById('Sec');
// Update the countdown every second
const countdownInterval = setInterval(updateCountdown, 1000);
function updateCountdown() {
// Get the current date and time
const currentDate = new Date();
// Calculate the remaining time in seconds
const remainingTime = Math.floor((targetDate - currentDate) / 1000);
// Check if the countdown has ended
if (remainingTime <= 0) {
clearInterval(countdownInterval);
daysElement.remove()
hoursElement.remove()
minElement.remove()
secElement.remove()
countdownDisplay.innerHTML = 'Countdown has Ended <br> HAPPY NEW YEAR!';
}
// Calculate the days, hours, minutes, and seconds
let days = Math.floor(remainingTime / (3600 * 24));
let hours = Math.floor((remainingTime % (3600 * 24)) / 3600);
let minutes = Math.floor((remainingTime % 3600) / 60);
let seconds = remainingTime % 60;
// Update the countdown element
daysElement.innerHTML = `${days} <br> Days`;
hoursElement.innerHTML = `${hours} <br> Hours`;
minElement.innerHTML = `${minutes} <br> Minutes`;
secElement.innerHTML = `${seconds} <br> Seconds`;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.