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

JavaScript
1

Tell us what’s happening:

Tests 12 and 13 will not pass. I have turned off dark mode and adblock extensions, reset the lesson. The same tests fail in both chrome and arc. I can see the countdown and UI display correctly, or at least it appears correct to me.

const { useState, useEffect, useRef } = React;

export const OTPGenerator = () => {
  const [otp, setOtp] = useState('');
  const [secondsLeft, setSecondsLeft] = useState(null);

  console.log('otp', otp);
  useEffect(() => {
    if (!otp) return;

    

### Your code so far


```html
<!-- 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 [otp, setOtp] = useState('');
  const [secondsLeft, setSecondsLeft] = useState(null);

  console.log('otp', otp);
  useEffect(() => {
    if (!otp) return;

    setSecondsLeft(5);
    
    const intervalId = setInterval(()=> {
      console.log('interval');
      setSecondsLeft(prev => {
        if (prev <= 1) {
          clearInterval(intervalId);
          return 0;
        } else {
          return prev -1;
        }
      });
    }, 1000); 

    return () => clearInterval(intervalId);
  }, [otp]);

  const handleOtpGenerateClick = () => {
    setOtp(Math.floor(100000 + Math.random() * 900000));
    console.log("button clicked otp is", otp);
  };

  const message = () => {
    console.log('seconds left', secondsLeft);
    if (secondsLeft === null) return "";
    if (secondsLeft === 0 ) return "OTP expired. Click the button to generate a new OTP.";
    return `Expires in: ${secondsLeft} seconds`;
  };

  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">{message()}</p>
      <button disabled={secondsLeft > 0} id="generate-otp-button" onClick={handleOtpGenerateClick}>
        Generate OTP
      </button>
    </div>
  )
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

2

If you open browser’s console (not the one visible on page), there will be some details regarding the failing test. From it appears there’s slight delay with starting of the count - when test expects started counting there’s still the previous message in the #otp-timer.