DAY 1 PROJECT : PASSWORD GENERATOR

#webdev #javascript #beginners #programming

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:

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.

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.

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.

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.

With this JavaScript code, our Password Generator becomes fully interactive:

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.

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!

Top comments (2)

Grimmnir • Jul 18 • Edited

I like how you’ve integrated HTML, CSS, and JavaScript to create a user-friendly tool. One thing to consider adding is a how secure is my password feature. This could give users real-time feedback on the strength of their passwords, making it even more useful. Anyway, you should keep experimenting and adding features. As for me, it's the only way to learn and improve.