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

JavaScript
1

Tell us what’s happening:

Test 12 and 13 are failing, but I have a a 5 second countdown when the Generate OTP button is pressed. Any help would be great.

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 { useState, useEffect, useRef } = React;

export const OTPGenerator = () => {

  const [ countText, setCountText ] = useState(null);
  const [inputState, setInputState] = useState(false);
  const [ disBtn, setDisBtn ] = useState(false);
  const [otp, setOtp] = useState("");
  const btnRef = useRef(false);

  useEffect(() => {
    if (inputState) {
      setDisBtn(true)
      const handler = setTimeout(() => {
        setDisBtn(false)
      }, 5000);
      return () => {
        clearTimeout(handler);
      };
    }
  }, [inputState]);

  const runTimer = () => {
    for (let i = 5; i > -1; i--) {
      setTimeout(() => {
        setCountText(`Expires in: ${i} seconds`);
        if (i === 0) {
          setCountText("OTP expired. Click the button to generate a new OTP.");
          setDisBtn(false);
        }
      }, (5 - i) * 1000);
    }
  };
  
  const handleBtn = () => {
    setDisBtn(true);
    const newState = !inputState;
    setInputState(newState);
    runTimer();
    setOtp(otpGen());
  };

  const otpGen = () => {
    const otpArr = [];
    for (let i = 0; i < 6; i++) {
      otpArr.push(
        Math.floor(Math.random() * 10)
      );
    }
    return otpArr.join("");
  };

  return (
    <div
      className="container" 
      style={{ textAlign: "center"}}
    >
      <h1 id="otp-title">
        OTP Generator
      </h1>
      <h2 id="otp-display">
        {otp || "Click 'Generate OTP' to get a code"}
      </h2>
      <p
        id="otp-timer" 
        aria-live="polite"
      >
        {countText}
      </p>
      <button
        id="generate-otp-button"
        onClick={handleBtn}
        disabled={disBtn}
        ref={btnRef}
      >
        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/140.0.0.0 Safari/537.36

Challenge Information:

Build a One-Time Password Generator - Build a One-Time Password Generator
https://www.freecodecamp.org/learn/full-stack-developer/lab-one-time-password-generator/build-a-one-time-password-generator

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

I had to initialize the timer text at 5 seconds and use setInterval to count down to 0.