Build a One-Time Password Generator - Build a One-Time Password Generator

JavaScript
1

Tell us what’s happening:

The code is working but two test cases are failing. Can anyone tell me what is the problem:

Failed Test Cases:
12. When the button is clicked, the p element with id of otp-timer should show a 5-second countdown.
13. The message in the p element with id otp-timer should update every second to show the remaining time.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>OTP Generator</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { OTPGenerator } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<OTPGenerator />);
    </script>
</body>

</html>

/* file: styles.css */


/* file: index.jsx */
const { useRef, useState, useEffect } = React;

export const OTPGenerator = () => {
  const [otp, setOtp] = useState("");
  const [secondsLeft, setSecondsLeft] = useState(0);
  const [isActive, setIsActive] = useState(false);

  const generateSixDigitsOTP = () => {
    const newOtp = Math.floor(Math.random() * 900000 + 100000);

    setOtp(newOtp);
    setSecondsLeft(5);
    setIsActive(true);
  };

  useEffect(() => {
    if (!isActive) return;

    const interval = setInterval(() => {
      setSecondsLeft(prev => prev - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [isActive]);

  useEffect(() => {
    if (isActive && secondsLeft === 0) {
      setIsActive(false);
    }
  }, [isActive, secondsLeft]);

  return (
    <div className="container">
      <h1 id="otp-title">OTP Generator</h1>

      <h2 id="otp-display">
        {!otp && "Click 'Generate OTP' to get a code"}
        {otp && otp}
      </h2>

      <p aria-live="polite" id="otp-timer">
        {!otp
          ? ""
          : isActive
          ? `Expires in ${secondsLeft} seconds`
          : "OTP expired. Click the button to generate a new OTP."}
      </p>

      <button
        disabled={isActive}
        onClick={generateSixDigitsOTP}
        id="generate-otp-button"
      >
        Generate OTP
      </button>
    </div>
  );
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a One-Time Password Generator - Build a One-Time Password Generator

2

If you take a look at the browser’s console (not the console visible on page), there will be some details regarding failing tests.