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

JavaScript
1

Tell us what’s happening:

Can’t build the countdown. I have tried using useStat, but it doesn’t seem to work.

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 [code, setCode] = useState("")
  const [text, setText] = useState("")
  const [time, setTime] = useState(10)
  const [disabled, setButtonDisabled] = useState(false)
  useEffect(() =>{
    setInterval(() =>{
      setTime(time-1)
    }, 1000)
    setTimeout(() => {
    setButtonDisabled(false)
}, 1000);
    
  }, [disabled])

  const handleClick = () =>{
    const generateRandomNumbers = () => {
      return Math.floor(100000 + Math.random() * 900000)
    }
    setCode(generateRandomNumbers)
    setText('Expires in: ' + (time))
    setButtonDisabled(true)
  }

   

  return (
    <div className="container">
      <h1 id="otp-title">
        OTP Generator
      </h1>

      <h2 id="otp-display">
        Click 'Generate OTP' to get a code
      </h2>
      
      <p id='otp-timer' aria-live='assertive'>
        {text}
      </p>
      <h2 id='otp-display'>{code}</h2>
      <button id='generate-otp-button'
      onClick={handleClick}
      disabled={disabled}
      >Generate OTP</button>
    </div>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Three things to consider:

  • Where the text is updated, in accordance to the changed time?
  • Your interval might not have the actual time, when the value is updated.
  • Should the whole effect run, regardless of what the disabled value is?