Your task is to use the VueJS knowledge you gained over the past two weeks and build a password generator web app.
01 – Before you start
This task consists of multiple requirements. Try to fulfill as many of those requirements as possible. However, you should prioritize your work (the requirements listed below are already in a prioritized order, so it is advised you stick to it): It's better to have implemented only a few working features, instead of having started working on many features with none of them working.
02 – Requirements
Necessary requirements
[x] Create a PasswordGenerator.vue component and import it in your App.vue
[ ] Basic functionality implemented (see further below for a list of the basic functionality)
[ ] The styling is as close to the original as possible (the slider's design is not important at this point)
Advanced tasks
[ ] Create a button that copies the generated password into the user's clipboard. If the password was copied successfully include a notification that disappears again after a few seconds
[ ] Make sure the number of characters of each checked character set is equally (or as close to equal as possible) distributed in the generated password
[ ] At least one checkbox needs to be checked
[x] The slider's design is as close to the original as possible
Basic functionality
On page load:
By default only lowercase characters are enabled
a lowercase password in the minimum length (8 characters) is randomly generated
Slider:
The slider has a min="8" and a max="35" value
The slider by default is set to the minimum value
The slider's label shows the current value and is updated in real-time
Every time the slider's value is updated, a new password in the corresponding length is generated
Character sets:
The different character sets can be enabled or disabled with checkboxes
For the symbols character set, you can use !§,;.:-_#+*~§$%&?<>°^
Make sure at least one character of each enabled character set is included in the generated password
03 – Assets
Fonts
The font used is "Arvo". Make sure this also applies to buttons etc.
Colors
We use a color palette with a dark color, a light color and an accent color. In addition, we also have a color that we call the "success color".
Your task is to use the VueJS knowledge you gained over the past two weeks and build a password generator web app.
01 – Before you start
This task consists of multiple requirements. Try to fulfill as many of those requirements as possible. However, you should prioritize your work (the requirements listed below are already in a prioritized order, so it is advised you stick to it): It's better to have implemented only a few working features, instead of having started working on many features with none of them working.
02 – Requirements
Necessary requirements
PasswordGenerator.vuecomponent and import it in yourApp.vueAdvanced tasks
Basic functionality
On page load:
Slider:
min="8"and amax="35"valueCharacter sets:
!§,;.:-_#+*~§$%&?<>°^03 – Assets
Fonts
The font used is "Arvo". Make sure this also applies to buttons etc.
Colors
We use a color palette with a dark color, a light color and an accent color. In addition, we also have a color that we call the "success color".
#0F0A0A#F5EFED#2292A4#CBE896Screenshots
Mobile version
Desktop version
Screen video
https://user-images.githubusercontent.com/72518624/140064861-5e38d218-30ed-4f26-8cc0-b51003f25a37.mp4