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

JavaScript
1

Tell us what’s happening:

My code does everything as requested yet it doesn’t pass. Any hints on what it could be?

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("Click 'Generate OTP' to get a code")
  const [timer, setTimer] = useState(5)
  const [isRunning, setIsRunning] = useState(null)

const passcodeGen = () => {
  let otpcode = ''
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  for(let i=0; i<6; i++){
    otpcode += characters.charAt(Math.floor(Math.random() * characters.length)) 
  }
  return otpcode
}

useEffect(() =>{
  if(isRunning){
       
    let countdown = setInterval(() => {
      setTimer((time) => {
        if(time === 1){
          clearInterval(countdown);
          setTimer(5)          
          setIsRunning(false)
          setCode("Click 'Generate OTP' to get a code")
        }
        else{
          return time -= 1
        }
      })
    }, 1000)
    
  }
}, [code])

const handleClick = () =>{
  setCode(passcodeGen())
  setIsRunning(true)
  
}



  return (
    <div className="container">
    <h1 id="otp-title">OTP Generator</h1>
    <h2 id="otp-display">{code}</h2>
    <p id="otp-timer" aria-live="polite">{isRunning == null && ('')}{isRunning == true && `Expires in ${timer} seconds`}{isRunning == false && "OTP expired. Click the button to generate a new OTP."}</p>
    <button disabled={isRunning} onClick={handleClick}id="generate-otp-button">Generate OTP</button>
    </div>
  )
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Challenge Information:

Build a One-Time Password Generator - Build a One-Time Password Generator
https://www.freecodecamp.org/learn/full-stack-developer/lab-one-time-password-generator/build-a-one-time-password-generator

2

If you take a look at the browser’s console (not the one visible on page), there will be additional details why each test did not pass.

1 Like
3
  • you might want to simply return a value for enclosing setTimer, as you did for else block

yeah i agree all these test cases seems to be aligned with whats been asked in usecases, see in other topics if there is any similar experiences from other users as well

happy coding :slight_smile:

1 Like
4

Thank you very much, I didn’t know I could see the errors in more depth within the browser’s console. That did it, challenge passed.

5

Thanks for the hint, trying to call setTimer within setTimer is very silly… Now it is fixed, thanks!