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

Chinese 中文 JavaScript
1

告诉我们发生了什么：

  1. When the button is clicked, the p element with id of otp-timer should show a 5-second countdown.
  2. The message in the p element with id otp-timer should update every second to show the remaining time.

The corresponding functions are all working properly

到目前为止你的代码

<!-- 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 [otp, setOtp] = useState('');
    const [timeLeft, setTimeLeft] = useState(0);

    useEffect(() => {
        if (timeLeft > 0) {
            const timerId = setTimeout(() => {
                setTimeLeft(timeLeft - 1);
            }, 1000);
            return () => clearTimeout(timerId);
        }
    }, [timeLeft]);

    const generateOTP = () => {
        const newOtp = Math.floor(100000 + Math.random() * 900000).toString();
        setOtp(newOtp);
        setTimeLeft(5);
    }

    return(
        <div className="container">
            <h1 id="otp-title">OTP Generator</h1>
            <h2 id="otp-display">{otp === '' ? "Click 'Generate OTP' to get a code" : otp}</h2>
            <p id="otp-timer" aria-live="assertive">{timeLeft>0 ? `Expires in: ${timeLeft}s` : otp && "OTP expired. Click the button to generate a new OTP."}</p>
            <button id="generate-otp-button" onClick={generateOTP} disabled={timeLeft>0}>Generate OTP</button>
        </div>
    )
};

你的浏览器信息：

用户代理是： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

挑战信息：

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

2

I’m sorry but what is the issue exactly?
The code works well.

3

the test point 12 and 13 cant pass.

but my code works well.

so i want to know how to pass the test point 12 and13

4

It should be “Expires in: ${timeLeft} seconds” instead of “Expires in: ${timeLeft} s”, the system fails to detect your paragraph element’s changes without exact inner content as specified.

5

It should be “Expires in: ${timeLeft} seconds” instead of “Expires in: ${timeLeft} s”, the system fails to detect your paragraph element’s changes without exact inner content as specified.

If you run into similar errors while completing a freeCodeCamp lab (that your code is working well but not passing the checkmarks), its usually caused by negligent mistakes, always double-check closing elements, incorrect class names, typos and so on. I ran into a coulple of those as well.