Creating a React js Countdown Timer

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const targetDate = new Date('2030-11-3').getTime(); // Change to your target date
      const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

function calculateTimeLeft() {
        const now = new Date().getTime();
        const timeRemaining = targetDate - now;
        if (timeRemaining <= 0) {
          return {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
          };
        }
        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));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

return {
          days,
          hours,
          minutes,
          seconds,
        };
      }

useEffect(() => {
        const timer = setInterval(() => {
          setTimeLeft(calculateTimeLeft());
        }, 1000);

return () => {
          clearInterval(timer);
        };
      }, []);
      return (
        <div className='container'>
          <h3 className='heading'>React countdown timer days, hours, minutes, seconds</h3>
          <div>
            <span className='days'>{timeLeft.days} days</span>
            <span className='hours'>{timeLeft.hours} hours</span>
            <span className='minutes'>{timeLeft.minutes} minutes</span>
            <span className='seconds'>{timeLeft.seconds} seconds</span>
          </div>
        </div>

);
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      padding: 20px 0;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

.heading {
      font-size: 20px;
      color: #333;
      margin-bottom: 20px;
    }

.days,
    .hours,
    .minutes,
    .seconds {
      font-size: 24px;
      color: #444;
      margin: 0 10px;
    }

/* Style for the countdown values */
    span {
      display: inline-block;
      padding: 10px;
      background-color: #3498db;
      /* Background color */
      color: #ffffff;
      /* Text color */
      border-radius: 5px;

font-size: 18px;
      /* Font size */
      font-weight: bold;
      /* Text weight */
      margin: 5px;
      /* Spacing between countdown values */
      text-align: center;
      /* Center text horizontally */
      transition: background-color 0.3s, color 0.3s;
      /* Smooth color transition on hover */
      cursor: pointer;
      /* Change cursor on hover */
    }

/* Hover effect */
    span:hover {
      background-color: #2980b9;
      /* Darker background color on hover */
      color: #ffffff;
      /* Text color on hover */
    }
  </style>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const targetDate = new Date('2030-11-3').getTime(); // Change to your target date
      const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
​
      function calculateTimeLeft() {
        const now = new Date().getTime();
        const timeRemaining = targetDate - now;
        if (timeRemaining <= 0) {
          return {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
          };
        }
        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));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
​
        return {
          days,
          hours,
          minutes,
          seconds,
        };
      }
​
      useEffect(() => {
        const timer = setInterval(() => {
          setTimeLeft(calculateTimeLeft());
        }, 1000);
​
        return () => {
          clearInterval(timer);
        };
      }, []);
      return (
        <div className='container'>
          <h3 className='heading'>React countdown timer days, hours, minutes, seconds</h3>
          <div>
            <span className='days'>{timeLeft.days} days</span>
            <span className='hours'>{timeLeft.hours} hours</span>
            <span className='minutes'>{timeLeft.minutes} minutes</span>
            <span className='seconds'>{timeLeft.seconds} seconds</span>
          </div>
        </div>
​
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      padding: 20px 0;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }
​
    .heading {
      font-size: 20px;
      color: #333;
      margin-bottom: 20px;
    }
​
    .days,
    .hours,
    .minutes,
    .seconds {
      font-size: 24px;
      color: #444;
      margin: 0 10px;
    }
​
    /* Style for the countdown values */
    span {
      display: inline-block;
      padding: 10px;
      background-color: #3498db;
      /* Background color */
      color: #ffffff;
      /* Text color */
      border-radius: 5px;
​
      font-size: 18px;
      /* Font size */
      font-weight: bold;
      /* Text weight */
      margin: 5px;
      /* Spacing between countdown values */
      text-align: center;
      /* Center text horizontally */
      transition: background-color 0.3s, color 0.3s;
      /* Smooth color transition on hover */
      cursor: pointer;
      /* Change cursor on hover */
    }
​
    /* Hover effect */
    span:hover {
      background-color: #2980b9;
      /* Darker background color on hover */
      color: #ffffff;
      /* Text color on hover */
    }
  </style>
</body>
​
</html>