We're so excited about the next 24 days and the challenges we have in store. Hopefully, you'll enjoy working through these as much as we've enjoyed putting them together.
Brief
In this project, we're creating a Password Generator.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.
Users should be able to:
The text input field should automatically update as the range field changes or one of the items is checked
The user can click on the copy icon to the right of the input field to copy the password to their clipboard.
When a user clicks on the copy icon, a class of "copied" should be added to the button. This will display the word "Copied" and change the text color to green.
After 5 seconds, the "copied" class should be removed from the button.
The range slider should allow the user to change the password length. The minimum amount is 6 and the max is 32 (limits are imposed through the HTML element)
Checking symbols will allow symbols to be used in the password
Checking numbers will allow numbers to be used in the password
Checking lowercase letters will allow lowercase letters to be used in the password
Checking uppercase letters will allow uppercase letters to be used in the password
Checking exclude similar letters will remove similar letters from the password (i, l, 1, L, o, 0, O)
Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of JavaScript.
Getting Started
To get started, download the zip file (within the appropriate section of Podia). This includes all the project assets you need to get started: HTML, CSS, images, and fonts.
Customize your project/file architecture to your liking.
Happy coding!
Once you're finished, share your work using #adventofjs
Taking your Project to the Next Level
Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.
Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, you can always purchase the Advent of CSS solutions, where Amy explains how to build this.
FAQs
Can I use libraries/frameworks on these projects?
Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
Oh no! I'm stuck!
Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.
