Tell us what’s happening:
I dont get why i wont pass test 12 and 13 im doing exactly what im the instructions are telling me.
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 [password, setPassword] = useState(null)
const [isFirst, setFirst] = useState(true)
const [value, setValue] = useState(null)
const [isActive, setActivity] = useState(false)
const button = useRef(null)
useEffect(() =>{
if (isFirst){
setFirst(false)
return
}
setActivity(true)
setValue(5)
for (let i = 0; i < 5; i++){
setTimeout(() =>{
setValue(v => v - 1)
if(i === 4){
setActivity(false)
}
}, (i * (1000)) + 1000)
}
}, [password])
function checkValue(value){
if (value === null){
return ""
}else if(value && value !== 0){
return `Expires in: ${value} seconds`
}else{
return "OTP expired. Click the button to generate a new OTP."
}
}
function generatePassword(){
let arr = []
for (let i = 0; i < 6; i++){
let randomNum = Math.floor(Math.random() * 10)
arr.push(randomNum)
}
let doneArr = arr.join("")
setPassword(doneArr)
}
return(<div className="container">
<h1 id="otp-title">OTP Generator</h1>
<h2 id="otp-display">{password === null ? `Click 'Generate OTP' to get a code` : password}</h2>
<p id="otp-timer" aria-live="polite">{checkValue(value)}</p>
<button id="generate-otp-button" disabled={isActive} onClick={generatePassword} ref={button}>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/150.0.0.0 Safari/537.36 Edg/150.0.0.0
Challenge Information:
Build a One-Time Password Generator - Build a One-Time Password Generator