Frontend Mentor - Password generator app solution

This is a solution to the Password generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Generate a password based on the selected inclusion options
• Copy the generated password to the computer's clipboard
• See a strength rating for their generated password
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Javascript

What I learned

I learned:

• How to customize a slider and a checkbox.
• How to create a password generator by breaking it into small steps.
• How to copy HTML text content into clipboard.

Continued development

The algorithm of this password generator can use some improvement, especially in the area of determining the strength of the password.

Useful resources

• Custom CSS Range Slider - I used this for the input range slider with a few tweaks.

Author

• Website - Purnama S Rahayu
• Frontend Mentor - @catreedle