Password Generator Project
Build an application that generates strong passwords. Add controls to customize allowed characters, and let users easily copy the password for use.
Resources: Gradient Background
Things you need to know: Flexbox, Grid, Semantic HTML, HTML DOM Manipulation, Event Handling.
Task - 01
Add a heading Password Generator.
Add an input for showing the generated password and a button labelled Copy Password next to the input field.
Add a text Password copied to clipboard!.
Task - 02
Add a slider to adjust the password length.
Add a label for it with the text Use the slider and select options to lengthen your password (6-24).
Add another label with the text Total Characters.
The minimum length for the password should be 6, and the maximum length should be 24. The default value should be 9.
Display the current value of the slider (password length) next to it.
Task - 03
Add four checkboxes for the following options, with all of them checked by default.
Include Numbers
Include Letters
Include Mixed Case (Upper and Lowercase letters)
Include Punctuation
Add an options alert text that will display a message saying Please select at least one checkbox to generate a password.
This is our password generator section.
Task 04
Create the first information section.
Add the heading Do you use any of these weak passwords?.
Add a bullet point list below with the following items:
Password
123456
Qwerty
Your name
Task - 05
Create the second information section.
Add the heading Why are those passwords weak?.
Add a bullet point list below with the following items:
They're easy to guess or crack.
If one of your logins is compromised, a hacker can access all your services.
Task - 06
Set a background image for the page using the Gradient Background given in the resources.
The background should cover the entire page and should not repeat.
Use the font family
Arial, sans-seriffor the entire page.The content should be centered both horizontally and vertically with sufficient space around it.
Task - 07
The background color of the clipboard alert should be a shade of green
#4CAF50so that the user knows the action was successful.The background color of the options alert should be a shade of red (#e74c3c) so that the user knows there was an error.
The message should be centered within its box and have some space around the text so that it’s easily readable.
Task - 08
Place the alert messages in the bottom-left corner of the screen, slightly above the bottom. Keep the options alert below the clipboard alert message.
The alert should always stay in the same position on the screen, even if the user scrolls the page.
The alert message should appear on top of other elements on the page.
Both the alert texts should be hidden by default and shown only when needed. The display part will be added to the functionality later.
Task - 09
Add a background color of white with slight transparency
rgba(255, 255, 255, 0.8)to the password generator section.Add space inside the section, with rounded corners and a shadow effect.
Make the section pop out slightly by giving it a soft shadow around the edges.
Task - 10
Use a light grey
#f4f4f4background to distinguish the password display section from the rest.The text and buttons inside this section should be neatly aligned, with space between them.
Leave a gap below this section so it's separated from other content.
Smooth out the edges by making the corners slightly rounded.
Task - 11
Remove the borders and outline around the input element to make it clean and minimal.
Make the background transparent so it blends seamlessly with the section behind it.
Add a value attribute to the input element to test the following styles and remove it afterwards.
Adjust the size of the text inside the input element and add space around the content to make it easier to read.
The input element should takes up most of the space, about 70% of the total width, so there's plenty of room to enter text.
Task - 12
The Copy Password button should have a green background
#4CAF50with white text and rounded corners.Remove any borders for a clean look4
Task - 13
When the user hovers over the button, make the background color a slightly darker green
#45a049to show it's active.
Task - 14
The slider and its label should be displayed side-by-side in a single row, with enough space between them.
The slider and its label should be centered within the section.
Leave some space below the slider section to separate it from the next group of options.
The number that shows the current character count should be bold.
Task - 15
The checkboxes should be placed in a single row, but if the screen is too small, they should wrap to the next line instead of squeezing together.
The checkboxes should be spread evenly across the width of the section.
Add enough space at the top and bottom of the checkbox group so that it’s not too close to other elements.
Task - 16
The two blocks in the information section should be aligned side by side in a single row, but if the screen is too small, they should wrap to the next line instead of squeezing together.
Each block should occupy approximately 30% of the available width.
The lists in both sections should not display bullet points.
The text in both information sections should be aligned to the left.
Task - 17
When the user moves the slider, the number showing the current length should update in real time.
For example, if the slider is set to 12, the number next to the slider should automatically change to 12.
The generated password should be of the same length chosen by the user.
Task - 18
There are four checkboxes with different options:
Include Numbers: If this is checked, the password should include numbers (0-9).
Include Letters: If this is checked, the password should include lowercase letters (a-z).
Include Mixed Case: If this is checked, the password should include uppercase letters (A-Z).
Include Punctuation: If this is checked, the password should include special characters (e.g., !@#$%^&*).
Only generate passwords based on the options the user has selected. If a user checks all the boxes, the password should include all character types. If only some options are checked, the password should include only those types of characters.
Task - 19
If the user tries to generate a password without selecting any of the character options (numbers, letters, mixed case, or punctuation), display the message Please select at least one checkbox to generate a password.
The message should automatically disappear after 3 seconds.
The password field should remain empty until the user selects at least one option.
Task - 20
When the user clicks the Copy Password button, the password should be copied to their clipboard and a message saying Password copied to clipboard! should appear on the bottom left of the screen.
The message should automatically disappear after 3 seconds.
More projects
These are some of the projects you'll build while learning.
