Tell us what’s happening:
I am loss and I need help at this point. I do not understand nor know what to do next.
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 [queryOTP, setOTP] = useState("")
const otpEl = useRef(null);
function handleClick(){
let otpResult = [];
let randomNumber;
for(let i=0; i < 7; i++){
randomNumber = Math.floor(Math.random() * 10);
otpResult.push(randomNumber)
}
setOTP( otpResult.join(""))
}
useEffect(() => {
const timeoutId = setTimeout(() => {}, 5000)
}, [queryOTP])
return(
<div className="container">
<h1 id="otp-title">OTP Generator</h1>
{queryOTP.length > 0 ? (<h2 id="otp-display">queryOTP</h2>) : (<h2 id="otp-display">Click 'Generate OTP' to get a code</h2>)}
<p id="otp-timer" aria-live="assertive"></p>
<button id="generate-otp-button" onClick={handleClick}>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/152.0.0.0 Safari/537.36
Challenge Information:
Build a One-Time Password Generator - Build a One-Time Password Generator
