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

JavaScript
1

Tell us what’s happening:

hello everyone. Can anyone tell me why my code is not passing test 16? Everything else is working

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 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#otp-display {
  border: 1px solid;
  padding: 5px;
}
#otp-timer{
  padding: 5px;
}
#generate-otp-button {
  padding: 10px 20px;
}

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

export const OTPGenerator = () => {
  const [otp, setOtp] = useState("");
  const [time, setTime] = useState(0);
  const [isCounting, setIsCounting] = useState(false);

  const timerRef = useRef(null)

  const generateOtp = () => {
    const num = Math.floor(Math.random() * 1000000);
    const code = String(num).padStart(6, "0");
    setOtp(code);

    setTime(5);
    setIsCounting(true);
  };

  useEffect(() => {
    if (isCounting) {
      timerRef.current = setInterval(() => {
        setTime(prev => {
          if (prev === 1) {
            clearInterval(timerRef.current)
            setIsCounting(false);
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }

    return () => clearInterval(timerRef.current);
  }, [isCounting]);

  return (
    <div className="container">
      <h1 id="otp-title">OTP Generator</h1>
      <h2 id="otp-display">
        {otp ? otp : "Click 'Generate OTP' to get a code"}
      </h2>

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

      <button
        onClick={generateOtp}
        disabled={isCounting}
        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/142.0.0.0 Safari/537.36

Challenge Information:

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

2

check the browser console for more detailed errors

image