This content originally appeared on DEV Community and was authored by Shrishti Srivastava
Generate Random Password: A Simple and Efficient Password Generator
Creating secure and strong passwords is crucial in today's digital age. To help users generate robust passwords effortlessly, I've built a simple yet effective Password Generator. Let's dive into the core features and structure of this project.
LANGUAGES USED: HTML , CSS and JAVASCRIPT
HTML
The foundation of our Password Generator is the HTML structure. Here’s a quick overview of the main elements:
- Title and Meta Tags: The section includes the document's metadata and links to an external CSS file and a Google Material Icons stylesheet.
- Container: The main content is wrapped inside a with a class container, ensuring everything is neatly organized.
- Password Display: A disabled input box (passBox) where the generated password will be displayed, accompanied by a copy icon (copyIcon) for easy copying.
- Password Length Slider: An input range slider (inputSlider) allows users to select the password length, with values ranging from 1 to 30.
- Options: Several checkboxes let users customize the characters included in the password. Options include:
- Lowercase letters (lowercase)
- Uppercase letters (uppercase)
- Numbers (numbers)
- Symbols (symbols)
- Generate Button: A button (genBtn) to trigger the password generation process.
CODE:
- Body and Container Styling
- The body is styled with a light background color (#f4f4f4) and centered content using flexbox. This ensures that the generator appears in the middle of the screen, regardless of the screen size.
- The .container class defines the main box, giving it a white background, padding, rounded corners (border-radius: 8px), and a subtle shadow (box-shadow) to make it stand out.
- Header and Text Styling
- The h1 element, which contains the title "Password Generator," is styled with a bottom margin and a larger font size to make it prominent.
- Input Box and Copy Icon
- The .inputBox class positions the password input box and the copy icon together. The copy icon (#copyIcon) is positioned absolutely to align it to the right of the input box.
- The .passBox class styles the disabled input box where the generated password is displayed, giving it full width, padding, and a border.
- Password Indicator and Slider
- The .pass-indicator class is a simple div styled to act as a visual indicator for password strength. It’s given a fixed height and a background color.
- The range input slider (input[type="range"]) is styled to take the full width, providing a clear and interactive way for users to select the password length.
- Row Layout and Labels
- The .row class uses flexbox to align elements horizontally and space them out evenly, ensuring labels and checkboxes are well-aligned.
- The label elements are styled with a smaller font size for a cleaner look.
- Generate Button
- The .genBtn class styles the "Generate Password" button with a blue background (#007bff), white text, and padding. The button changes color slightly on hover, providing a visual cue to the user.
- Element Selection and Constants We start by selecting all the necessary HTML elements using getElementById and defining character sets for different types of characters.
- Slider Input Event
We display the current value of the slider (password length) and generate a new password whenever the slider value changes.
- Generate Password Function
-This function builds the password based on selected options and updates the password box.
- Update Password Indicator
This function updates the visual indicator of password strength based on its length.
- Initial Load Event
Ensures the password strength indicator is updated when the page loads.
- Copy Password Functionality
Allows users to copy the generated password to the clipboard and provides visual feedback.
- Users can dynamically adjust the password length using a slider.
- They can include or exclude various character types.
- The password's strength is visually indicated, and the generated password can be copied to the clipboard with a single click.
CSS:
The CSS (Cascading Style Sheets) file is responsible for styling our HTML elements, ensuring a visually appealing and user-friendly design. Below, I'll explain the main sections of the CSS code used in this project.
Enhancing the Password Generator with JavaScript
To bring our Password Generator to life, I've added some JavaScript. This code handles user interactions, generates random passwords based on user preferences, and provides feedback on password strength. Let's walk through the key parts of the script.
With this JavaScript code, our Password Generator becomes fully interactive:
This combination of HTML, CSS, and JavaScript results in a powerful, user-friendly tool for generating secure passwords.
Feel free to customize and expand upon this project—whether it's adding more features, improving the UI, or optimizing the JavaScript code. The knowledge and experience gained here will undoubtedly serve you well in future endeavors.
Happy coding!
THANK YOU!
This content originally appeared on DEV Community and was authored by Shrishti Srivastava
Shrishti Srivastava | Sciencx (2024-06-23T16:57:40+00:00) DAY 1 PROJECT. Retrieved from https://www.scien.cx/2024/06/23/day-1-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.