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

JavaScript
1

Tell us what’s happening:

Hello there,
could you help please,
I don’t know ,why the code does not accept ,
Regards

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 [otp,setOtp]=useState(null);
  const [secondsleft, setSecondsleft] = useState(0);
  const isCounting = secondsleft > 0
  

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

const handleGenerateOtp = () => {
    setOtp(generateOtp());
    setSecondsleft(5);
  };
useEffect(()=>{
  if(!isCounting){
    return
  }
  const intervalId = setInterval(()=>{setSecondsleft(prevSecondsLeft=>prevSecondsLeft-1)},1000)
},[isCounting])
  return(
  <div class="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`:otp && "OTP expired.Click the button to generate a new OTP."}</p>
    <button id="generate-otp-button" disabled={isCounting}onClick={handleGenerateOtp}
    >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/145.0.0.0 Safari/537.36

Challenge Information:

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

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

thank you for your reply ,
When I click “Run the test”

the pointers to the left of the question keep spinning, which doesn’t indicate whether my answer is correct or incorrect.

4

What about when you try using your program, does everything function correctly?

Any errors in the console?

5

yes,
“Potential infinite loop detected on line 3. Tests may fail if this is not changed.”
do you have any advice ?

6

Is that your most recent code? When I test it I get this error:

Warning: Invalid DOM property `%s`. Did you mean `%s`?%s class className 
div
OTPGenerator@about:srcdoc:97:29

You don’t get this error message?

1 Like
7

yes, exactly : innocent:

8

i got it"Warning: Invalid DOM property %s. Did you mean %s?%s class className
at div
at OTPGenerator (about:srcdoc:96:21)"

9

Ok does that give you a clue about the problem with your code?

It mentions class, className and div.