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

Curriculum Help
1

Tell us what’s happening:

It seems like this lab may be bugged. It hasn’t let me submit on 2 separate devices.

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 intervalId = useRef(null);
  const [otp, setOtp] = useState(null);
  const [secondsLeft, setSecondsLeft] = useState(5);
  const [isCounting, setIsCounting] = useState(false);
  const [hasGeneratedOtp, setHasGeneratedOtp] = useState(false);

  const generateOtp = () => Math.floor(100000 + Math.random() * 900000);

  const handleGenerateOtp = () => {
    setOtp(generateOtp());
    setSecondsLeft(5);
    setIsCounting(true);
    setHasGeneratedOtp(true);
    intervalId.current = setInterval(() => {
      setSecondsLeft(prevSeconds => prevSeconds - 1);
    }, 1000)
  }

  useEffect(() => {
    if (secondsLeft === 0) {
      setIsCounting(false);
      clearInterval(intervalId.current);
    }
  }, [secondsLeft])

  useEffect(() => () => {
    clearInterval(intervalId.current)
  }, []
  )

  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="assertive">
        {isCounting
        ? `Expires in: ${secondsLeft} seconds`
        : hasGeneratedOtp &&
        "OTP expired. Click the button to generate a new OTP."}
      </p>
      <button id="generate-otp-button" onClick={handleGenerateOtp} disabled={isCounting}>Generate OTP</button>
    </div>
  )
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.6.1 Safari/605.1.15

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-one-time-password-generator/67c562286b29447da020d407.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @haydencoding333

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

Happy coding

3

Thank you for the suggestions. I ended up having to download Firefox, and it worked. It seemed to be a problem with doing the lab on Safari.