Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add React useEffect prototype #640

Merged
merged 2 commits into from
Nov 7, 2024
Merged

feat: add React useEffect prototype #640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e79e59
add prototype
zairahira Oct 25, 2024
8b34ce8
define OTP
zairahira Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions frontend-cert/react-projects/react-use-effect/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>OTP Generator</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">
function generateOTP() {
return Math.floor(100000 + Math.random() * 900000);
}

function OTPGenerator() {
const [otp, setOtp] = React.useState(null);
const [secondsLeft, setSecondsLeft] = React.useState(5);
const [isCounting, setIsCounting] = React.useState(false);
const [hasGeneratedOtp, setHasGeneratedOtp] = React.useState(false); // Tracks if OTP has been generated at least once

// Function to generate OTP and start countdown
const handleGenerateOtp = () => {
setOtp(generateOTP());
setSecondsLeft(5); // Reset timer to 5 seconds
setIsCounting(true); // Start countdown
setHasGeneratedOtp(true); // Mark that OTP has been generated
};

React.useEffect(() => {
let timerId;
if (isCounting && secondsLeft > 0) {
timerId = setInterval(() => {
setSecondsLeft(prevSeconds => prevSeconds - 1);
}, 1000);
} else if (secondsLeft === 0) {
// Stop countdown when it reaches 0
setIsCounting(false);
}

// Cleanup the interval on unmount or when countdown stops
return () => clearInterval(timerId);
}, [isCounting, secondsLeft]); // Effect runs when isCounting or secondsLeft changes

return (
<div className="container">
<h1>OTP Generator</h1>
<h2>{otp ? otp : "Click 'Generate OTP' to get a code"}</h2>
{isCounting ? (
<p>Expires in: {secondsLeft} seconds</p>
) : (
hasGeneratedOtp && <p>OTP expired. Click the button to generate a new OTP.</p>
)}
<button onClick={handleGenerateOtp}>
Generate OTP
</button>
</div>
);
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<OTPGenerator />);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.

Read this page for starting a new React project with JSX:
https://react.dev/learn/start-a-new-react-project

Read this page for adding React with JSX to an existing project:
https://react.dev/learn/add-react-to-an-existing-project
-->
</body>

</html>
38 changes: 38 additions & 0 deletions frontend-cert/react-projects/react-use-effect/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
body {
font-family: 'Castoro Titling', cursive;
}

.container {
text-align: center;
margin-top: 50px;
}

h1 {
font-size: 30px;
color: #333;
}

h2 {
font-size: 25px;
color: #555;
}

p {
font-size: 16px;
color: #888;
}

button {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #383f59;
color: white;
border-radius: 5px;
}

button:hover {
background-color: #444;
}
15 changes: 15 additions & 0 deletions frontend-cert/react-projects/react-use-effect/user-stories.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# --description--

In this lab, you will generate a 6-digit OTP (One-Time Password) and display it to the user. The OTP will expire after 5 seconds, and a new OTP will be generated when the user clicks the `"Generate New OTP"` button.

**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.

**User Stories:**

1. Your `"Generate New OTP"` button should display a new 6-digit OTP in the `h2` element when clicked.
2. When `"Generate New OTP"` button is clicked, it should start a 5-second countdown.
3. Initially, when no OTP has been generated, the `h2` display should prompt the user to click the button with the message `"Click 'Generate OTP' to get a code"`
4. You should display a countdown timer next to the OTP that shows how many seconds remain before the OTP expires.
5. The timer should begin at `5` seconds and count down to `0` once the OTP is generated.
6. You should display an `"OTP expired"` message when the countdown timer reaches `0`, prompting the user to generate a new OTP.
7. You should ensure the countdown timer stops automatically once it reaches `0` seconds to prevent unnecessary updates.