Brief

In this project, we're going to create 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 would be a great way to push yourself.

Users should be able to:

• See a form input for displaying a generated password

• A copy button should appear to the right of the input field. When the user clicks on the copy button, the word “Copied” should appear. NOTE: Showing and hiding the “copied” text can only be achieved within JavaScript. However, we will be creating all of the elements needed to be able to do this within JavaScript

• Range slider for selecting the number of characters. The number of characters should be displayed next to the slider.

• Checkboxes for the following 

  • Include Symbols (@#$%)

  • Include Numbers (1234)

  • Include Lowercase Characters (abcd)

  • Include Uppercase Characters (ABCD)

  • Exclude Similar Characters (i, l, 1, L, o, O, 0)

Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from Amy.

Getting Started

1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a style guide.

2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

3. Open the project's README.md file. It has additional information on how the project is structured.

4. Customize your project/file architecture to your liking.

5. Happy coding!

6. Once you're finished, share your work using #adventofcss

Taking your Project to the Next Level

• Use a framework or libraries like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.

• Add an additional checkbox for excluding ambiguous characters { } ( ) / \ ' " ` ~ , ; : . < >

• Try adding interactivity to this challenge with JavaScript. If you get stuck, be sure to check out the Advent of JavaScript.

FAQs

• Can I use libraries/frameworks on these projects? 

  • Of course! We're providing the solution in 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.

• Can I use this project in my portfolio? 

  • Sure! But, be honest about the work that you did