count down timer

In this code, the HTML file defines the structure of the page and links the CSS file for styling. The JavaScript file handles the countdown functionality and updates the timer display every second.

The CSS file contains styles for the elements, including responsive design for different screen sizes. The timer is displayed using flexbox, and the individual time blocks are styled accordingly.

Remember to save the HTML code in an HTML file (e.g., index.html), the CSS code in a CSS file (e.g., styles.css), and the JavaScript code in a JS file (e.g., script.js) in the same directory. Then, you can open the HTML file in a web browser to use the Countdown Timer tool

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Countdown Timer</title>

  <link rel="stylesheet" type="text/css" href="body {

  background-color: #f2f2f2;

  font-family: Arial, sans-serif;

}

.container {

  max-width: 600px;

  margin: 100px auto;

  background-color: #fff;

  padding: 20px;

  border-radius: 5px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

  text-align: center;

}

h1 {

  color: #333;

}

#timer {

  display: flex;

  justify-content: center;

  margin-top: 40px;

}

.time-block {

  margin: 0 10px;

}

.time {

  display: block;

  font-size: 48px;

  font-weight: bold;

  color: #333;

}

.label {

  display: block;

  font-size: 16px;

  color: #777;

}

">

</head>

<body>

  <div class="container">

    <h1>Countdown Timer</h1>

    <div id="timer">

      <div class="time-block">

        <span id="days" class="time"></span>

        <span class="label">Days</span>

      </div>

      <div class="time-block">

        <span id="hours" class="time"></span>

        <span class="label">Hours</span>

      </div>

      <div class="time-block">

        <span id="minutes" class="time"></span>

        <span class="label">Minutes</span>

      </div>

      <div class="time-block">

        <span id="seconds" class="time"></span>

        <span class="label">Seconds</span>

      </div>

    </div>

  </div>

  <script src="function getTimeRemaining(endTime) {

  const total = Date.parse(endTime) - Date.parse(new Date());

  const seconds = Math.floor((total / 1000) % 60);

  const minutes = Math.floor((total / 1000 / 60) % 60);

  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);

  const days = Math.floor(total / (1000 * 60 * 60 * 24));

  return {

    total,

    days,

    hours,

    minutes,

    seconds

  };

}

function initializeClock(id, endTime) {

  const clock = document.getElementById(id);

  const daysSpan = clock.querySelector('#days');

  const hoursSpan = clock.querySelector('#hours');

  const minutesSpan = clock.querySelector('#minutes');

  const secondsSpan = clock.querySelector('#seconds');

  function updateClock() {

    const time = getTimeRemaining(endTime);

    daysSpan.textContent = time.days;

    hoursSpan.textContent = ('0' + time.hours).slice(-2);

    minutesSpan.textContent = ('0' + time.minutes).slice(-2);

    secondsSpan.textContent = ('0' + time.seconds).slice(-2);

    if (time.total <= 0) {

      clearInterval(timeInterval);

    }

  }

  updateClock();

  const timeInterval = setInterval(updateClock, 1000);

}

const deadline = new Date('2023-12-31T23:59:59');

initializeClock('timer', deadline);

"></script>

</body>

</html>