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

JavaScript
1

Tell us what’s happening:

Everything seems to be working as it should but when I run the tests it says “// running tests” and never resolves unless I edit out the countDown function so the problem seems to be there, not sure what it is though.

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 */
body {
  background-color: #587e76; 
  font-family: sans-serif;
}


h1, h2 {
  color: #fefbd8;
}

button {
  background-color: #c1502e;
  color: #fefbd8;
  height: 8vh;
  width: auto;
  font-family: sans-serif;
  font-size: 3vh;
  font-weight: bold;
  border-radius: 10px;
  border: 2px, solid,  #a96e5b;
  cursor: pointer;
}

.container {
  display: block;
  background-color: #686256;
  height: 50vh;
  width: 70vw;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
}
button:hover{
  background-color:  #a96e5b;
}

/* file: index.jsx */
const { useState, useEffect, useRef } = React;



export const OTPGenerator = () => {
  

  const [sec, setSec] = useState('') 
  const interval = useRef(null)
  const [password, setPassword] = useState('')
  const [running, setRunning] = useState(false)

  
     


const countDown = () => {
   if(sec === 0) return
   interval.current = setInterval(() => {
     setSec((prev) => prev > 0 ? prev - 1 : 0)
     }, 1000)
    return clearInterval(() => {interval.current});
}

 const passArr = () => {
    let arr = []
    
      for(let i = 0; i < 6; i++){
      arr.push(Math.floor(Math.random(i) * 10))
    }
return arr.join('')
  };

const isRunning = () => {
  setRunning(true)
  setPassword(passArr())
  setSec(5)
 }





useEffect(() => {  
 countDown()

}, [])   

const h2El = () => {
  return running === false || sec === 0 ? "Click 'Generate OTP' to get a code" : password
}

   const pElement = () => {
     if(!running) ""
     if(running){
     return sec === 0 ? `OTP expired. Click the button to generate a new OTP.`: `Expires in: ${sec}`
     }
   }
  
  return (
    <div className="container">
      <h1 id="otp-title">OTP Generator</h1>
      <h2 id="otp-display">{h2El()}</h2>
     <p id="otp-timer" aria-live="polite">{pElement()}</p>
      <button id="generate-otp-button"  onClick={isRunning} disabled={running && sec > 0 ? true: false}>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 Edg/145.0.0.0

Challenge Information:

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

2

Look at how your useEffect calls countDown() but has no dependencies, and consider what happens when countDown() sets an interval that updates sec - without any way to clean up previous intervals or respond to sec changes, how does that affect your timer’s ability to stop and start correctly?

3

I got it resolved now, thank you for the help! :grinning_face:

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.