JSFiddle - React, Tailwind, and code Playground

by mauro_nappolini

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Clock</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }
  .countdown {
    margin-top: 100px;
    font-size: 24px;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="countdown" id="countdown">
  <div><span id="days">0</span> days</div>
  <div><span id="hours">0</span> hours</div>
  <div><span id="minutes">0</span> minutes</div>
</div>
<script>
  // Set the target date and time for the countdown
  const targetDate = new Date("2023-08-11T23:59:59").getTime();

  // Update the countdown every second
  const interval = setInterval(function() {
    const now = new Date().getTime();
    const timeRemaining = targetDate - now;

    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));

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);

    // If the countdown is over, clear the interval
    if (timeRemaining <= 0) {
      clearInterval(interval);
      $("#countdown").html("Countdown expired");
    }
  }, 1000);
</script>
</body>
</html>