- \n
- React<\/li>\n
- API integration<\/li>\n<\/ul>\n
Download React Password Generator Project.<\/h3>\n
Please download the source code of React Password Generator: React Password Generator Project Code<\/strong>.<\/a><\/p>\n
Installation Steps:<\/h3>\n
Download the Visual Studio.<\/a><\/strong><\/p>\n
You can choose the appropriate installer for your operating system (Windows, macOS, or Linux) on the download page. Once the installer is downloaded, run it and follow the installation instructions to install VS Code on your computer.<\/p>\n
For the installation of React, I have explained some of the steps as follows:<\/p>\n
1. The first step is to download the node<\/a><\/strong>( as it will help to install react).<\/p>\n
<\/p>\n
![\"node](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/node-js-lts-version.webp\")
<\/a><\/p>\n2. Now, check the version of the node in Windows by following the command on the terminal:<\/p>\n
node --version or node -V<\/pre>\n
Also, check the npm version using the following command, as it is a tool to download the react<\/p>\n
npm --version<\/pre>\n
![\"windows](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/windows-by-following.webp\")
<\/a><\/p>\nNote –<\/strong> The above thing will show the version of the above thing node or npm respectively. It will show the version if the version is successfully downloaded.<\/p>\n
3. Now, create one folder on the desktop as react, open the terminal inside the react app, and go to the react folder using the following command as `cd react` and run the command:<\/p>\n
npm init react-app myapp<\/pre>\n
![\"create](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/create-one-folder-1.webp\")
<\/a><\/p>\n4. myapp is created, go inside the myapp folder using the command `cd myapp` and then npm start and boom react will run the browser.<\/p>\n
Your app react is successfully installed, let\u2019s move towards project building.<\/p>\n
Steps to Create a React Password Generator:<\/h3>\n
1. Now, inside the src of myapp. Create a folder using the name Generator. You can use any name for the folder in which we have to create two files, name generator.jsx and navbar.jsx<\/p>\n
![\"src](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/src-of-myapp.webp\")
<\/a><\/p>\n2. Inside navbar.jsx, first of all, we create some mandatory libraries and connect them with CSS.<\/p>\n
import React from \"react\";\r\nimport \"..\/App.css\"<\/pre>\n
3. This function generates a random password of a specified length. It selects characters from a defined character set, which includes lowercase and uppercase letters, numbers, and special characters. It iterates over the specified length, randomly selecting characters from the set and appending them to the password string.<\/p>\n
const generatePassword = (length) => {\r\n const charset = 'abcdefghi!@#$%^&jklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\r\n let password = '';\r\n for (let i = 0; i < length; i++) {\r\n const randomIndex = Math.floor(Math.random() * charset.length);\r\n password += charset.charAt(randomIndex);\r\n }\r\n return password;\r\n};<\/pre>\n4. This function defines a React component that manages a password generator. It utilizes the React state to track and update the password length and the generated password itself.<\/p>\n
const PasswordGenerator = () => {\r\nconst [passwordLength, setPasswordLength] = useState(6);\r\nconst [generatedPassword, setGeneratedPassword] = useState('');<\/pre>\n5. This function handles the change event of a dropdown input. It parses the selected value to an integer and updates the state variable passwordLength accordingly.<\/p>\n
const handleDropdownChange = (event) => {\r\n const selectedLength = parseInt(event.target.value, 10);\r\n setPasswordLength(selectedLength);\r\n };<\/pre>\n6. This function generates a new password using the current passwordLength state value and updates the generatedPassword state with the newly generated password.<\/p>\n
const handleGeneratePassword = () => {\r\n const newPassword = generatePassword(passwordLength);\r\n setGeneratedPassword(newPassword);\r\n };<\/pre>\n7. The dropdown menu is bound to the handleDropdownChange function for handling changes, and the button is bound to the handleGeneratePassword function for generating a new password when clicked.<\/p>\n
<form>\r\n <label htmlFor=\"passwordLength\">Select Password Length:<\/label>\r\n <select id=\"passwordLength\" onChange={handleDropdownChange} value={passwordLength}>\r\n <option value={6}>6 Characters<\/option>\r\n <option value={8}>8 Characters<\/option>\r\n <option value={12}>12 Characters<\/option>\r\n <\/select>\r\n <br \/>\r\n <button type=\"button\" onClick={handleGeneratePassword}>\r\n Generate Password\r\n <\/button>\r\n <\/form><\/pre>\n8. This JSX code renders a div containing the generated password if generatedPassword is truthy. It displays the heading “Generated Password:” followed by the generated password itself inside a paragraph element.<\/p>\n
{generatedPassword && (\r\n <div>\r\n <h2>Generated Password:<\/h2>\r\n <p>{generatedPassword}<\/p>\r\n <\/div>\r\n )}<\/pre>\nHere is the complete code of the above explanation and CSS.<\/p>\n
Generator > generator.jsx<\/h4>\n
import React, { useState } from 'react';\r\nimport '..\/App.css'\r\n\r\nconst generatePassword = (length) => {\r\n const charset = 'abcdefghi!@#$%^&jklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\r\n let password = '';\r\n for (let i = 0; i < length; i++) {\r\n const randomIndex = Math.floor(Math.random() * charset.length);\r\n password += charset.charAt(randomIndex);\r\n }\r\n return password;\r\n};\r\n\r\nconst PasswordGenerator = () => {\r\n const [passwordLength, setPasswordLength] = useState(6);\r\n const [generatedPassword, setGeneratedPassword] = useState('');\r\n\r\n const handleDropdownChange = (event) => {\r\n const selectedLength = parseInt(event.target.value, 10);\r\n setPasswordLength(selectedLength);\r\n };\r\n\r\n const handleGeneratePassword = () => {\r\n const newPassword = generatePassword(passwordLength);\r\n setGeneratedPassword(newPassword);\r\n };\r\n\r\n return (\r\n <div style={{ textAlign: 'center', marginTop: '100px' }}>\r\n <h1>Password Generator<\/h1>\r\n <form>\r\n <label htmlFor=\"passwordLength\">Select Password Length:<\/label>\r\n <select id=\"passwordLength\" onChange={handleDropdownChange} value={passwordLength}>\r\n <option value={6}>6 Characters<\/option>\r\n <option value={8}>8 Characters<\/option>\r\n <option value={12}>12 Characters<\/option>\r\n <\/select>\r\n <br \/>\r\n <button type=\"button\" onClick={handleGeneratePassword}>\r\n Generate Password\r\n <\/button>\r\n <\/form>\r\n {generatedPassword && (\r\n <div>\r\n <h2>Generated Password:<\/h2>\r\n <p>{generatedPassword}<\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n};\r\n\r\nexport default PasswordGenerator;<\/pre>\nnavbar.jsx<\/h4>\n
import React from \"react\";\r\nimport \"..\/App.css\"\r\n\r\nconst Navbar = () => {\r\n return (\r\n <nav className=\"navbar\">\r\n <ul className=\"navbar-list\">\r\n <li>\r\n Random Password Generator<br\/><span className=\"impname\">by DataFlair<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n );\r\n};\r\n\r\nexport default Navbar;<\/pre>\nApp.css<\/h4>\n
* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: Arial, sans-serif;\r\n background-color: #f0f2f5;\r\n }\r\n \r\n .container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n }\r\n \r\n .form-container {\r\n background-color: #fff;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n padding: 20px;\r\n width: 300px;\r\n }\r\n \r\n h1 {\r\n font-size: 24px;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: bold;\r\n }\r\n \r\n select,\r\n button {\r\n width: 30%;\r\n padding: 10px;\r\n margin-bottom: 15px;\r\n border-radius: 4px;\r\n border: 1px solid #dddfe2;\r\n font-size: 16px;\r\n }\r\n \r\n button {\r\n background-color: tomato;\r\n color: #fff;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n \r\n button:hover {\r\n background-color: rgb(234, 114, 93);\r\n }\r\n \r\n p {\r\n text-align: center;\r\n font-size: 18px;\r\n margin-top: 20px;\r\n }\r\n \r\n .navbar {\r\n background-color: tomato;\r\n padding: 10px 20px;\r\n }\r\n \r\n .navbar-list {\r\n list-style-type: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \r\n .navbar-list li {\r\n color: black;\r\n font-weight: bold;\r\n font-size: 20px;\r\n text-transform: uppercase;\r\n }\r\n \r\n .navbar-list li:hover {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n \r\n .navbar-list .impname{\r\n font-size: 10px;\r\n color: white;\r\n }<\/pre>\nReact Password Generator Output<\/h3>\n
![\"react](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/react-random-password-generator.webp\")
<\/a><\/p>\n![\"react](\"https:\/\/techvidvan.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/react-password-generator-output-1.webp\")
<\/a><\/p>\n