Build a One-Time Password Generator - Steps 12,13,14

JavaScript
1

Tell us what’s happening:

I’m having trouble with steps 12,13,14. Its doing what it says but its just accepting it. Is it not right syntax or something? Do i need different logic?

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 [expireMessage, setExpireMessage] = useState("");
  const [password, setPassword] = useState("");
  const [isRunning, setIsRunning] = useState(false);
  const [time, setTime] = useState(5);
  const buttonRef = useRef();

  useEffect(() => {
    if (!isRunning) return;

    if (time === 0) {
      setExpireMessage("OTP expired. Click the button to generate a new OTP.");
      buttonRef.current.disabled = false;
      setIsRunning(false);
    }

    const interval = setInterval(() => {
      buttonRef.current.disabled = true;
      setExpireMessage(`Expires in: ${time} seconds`);
      setTime(prev => prev - 1);
    }
      , 1000)

    return () => clearInterval(interval)

  }, [time,isRunning])

  function handleClick() {
    setTime(5);
    setIsRunning(true);
    let otp = Math.floor(100000 + Math.random() * 900000);
    setPassword(otp);
  }

  return (
    <div className="container">
      <h1 id="otp-title">OTP Generator</h1>
      <h2 id="otp-display">{password === "" ? "Click 'Generate OTP' to get a code" : password}</h2>
      <p id="otp-timer" aria-live="assertive">{expireMessage}</p>
      <button id="generate-otp-button" onClick={handleClick} ref={buttonRef}>Generate OTP</button>
    </div>
  )
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

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

2

What method you are using to generate an OTP? Are you using dynamic factor - time or counter, what are you trying to do?

3

Im using a random number funtion to get a 6 long number

4

Thats clever. My first thought was building up a string.

5

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