Tell us what’s happening:
it works as steps mentioned, but still show errors, 10,11,12,13 and 15, 16.
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 */
.container {
text-align: center;
margin-top: 75px;
}
#opt-timer{
padding: 5px;
}
#generate-opt-button{
padding: 10px 20px;
margin-top: 20px;
}
/* file: index.jsx */
const { useState, useEffect, useRef } = React;
export const OTPGenerator = () => {
const [disbale, setDisbale] = useState(false);
const [msgVisible, setMsgVisible] = useState(false);
const [randomNumber, setRandomNumber] = useState(null);
const initialTime = 5;
const [seconds, setSeconds] = useState(initialTime);
const [timeActive, setTimeActive] = useState(true);
const genSixDigitRandomNumber = () => {
const min = 100000;
const max = 999999;
const newRandomNumber = Math.floor( Math.random() * ( max - min + 1)) + min;
setRandomNumber(newRandomNumber);
setSeconds(5);
setTimeActive(true);
setMsgVisible(true);
};
useEffect(() => {
let intervale = null;
if ( timeActive && seconds > 0 ){
intervale = setInterval (() => {
setSeconds( (prvSeconds) => prvSeconds - 1 );
}, 1000); //every second
setDisbale(true);
}else if ( seconds === 0) {
setTimeActive(false);
clearInterval(intervale);
setDisbale(false);
setMsgVisible(false);
}
return () => clearInterval(intervale);
}, [timeActive, seconds]);
return (
<div className="container">
<h1 id="otp-title">OTP Generator</h1>
<h2 id="otp-display">
{ randomNumber ?
randomNumber : "Click 'Generate OTP' to get a code"
}
</h2>
<p id="otp-timer" aria-live="assertive">
{ randomNumber &&
( !timeActive && seconds === 0
? "OTP expired. Click the button to generate a new OTP."
: `Expires in: ${seconds} seconds`
)}
</p>
<button id="generate-otp-button" disabled={disbale} onClick={genSixDigitRandomNumber} >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.1 Safari/605.1.15 Ddg/26.1
Challenge Information:
Build a One-Time Password Generator - Build a One-Time Password Generator
