<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`;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.