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

JavaScript
1

Tell us what’s happening:

I can’t pass 13, 14, 16- the message doesn’t update, the button isn’t disabled, and the countdown doesn’t display an expired message at the end

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 [otpHeader, setOTPHeader] = useState("Click 'Generate OTP' to get a code");
  const [countdown, setCountdown] = useState(null);
  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
  const [showTimeout, setShowTimeout] = useState(false);
  const timerRef = useRef();

  function getNewOTP() {
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }
    let digits = []
    const numbers = "1234567890"
    for (let i = 0; i < 6; i++) {
      const randomIndex = Math.floor(Math.random() * numbers.length);
      digits.push(numbers[randomIndex])
    }
    let newOTP = digits.join("")
    setOTPHeader(newOTP);
    setCountdown("5");
    setIsButtonDisabled(prevDisabled => !prevDisabled);
    setShowMessage(false);

    timerRef.current = setInterval(()=>{
          setCountdown(prevCountdown => {
        if (prevCountdown === 1) {
          clearInterval(timerRef.current);
          setIsButtonDisabled(prevDisabled => !prevDisabled)
          setShowMessage(true)
          return null;
        }
        return prevCountdown - 1;
      });
    }, 1000);
  }

  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef);
      }
    }
  }, [])

  const timer = countdown !== null ? `Expires in: ${countdown} seconds` : "";

  return <div className="container">
    <h1 id="otp-title">OTP Generator</h1>
    <h2 id="otp-display">{otpHeader}</h2>
    <p id="otp-timer" aria-live="assertive">{timer}</p>
    <button id="generate-otp-button" onClick={getNewOTP}>Generate OTP</button>
  </div>;
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

When you test your app, do you get an error message in the console?

3

No, just the numbers of the tests I’m not passing:

// running tests
13. The message in the p element with id otp-timer should update every second to show the remaining time.
14. The "Generate OTP" button should be disabled while the countdown timer is running.
16. When the countdown timer reaches 0, you should display the message OTP expired. Click the button to generate a new OTP..
// tests completed
4

Don’t run the tests, just use your app.

When I click “Generate OTP” I get this error in the console:

ReferenceError: setShowMessage is not defined
5

Oh OK, I see that too

1 Like
6

Similar advice here:

Focus on coding your app and getting it to work first. Don’t run the tests until your app is working to your satisfaction.

I would also just focus on one lab at a time

7

I run the tests because they’re easier to understand than the user stories

8

You cannot code these labs by using the tests as a guide, that can be mis-leading. You need to understand and implement the User Stories as described.

To some extent you will need both for guidance, but you can’t code just based on running the the tests.

10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.