Password Generator App

Project Overview

This project is a Password Generator App, built as part of a take-home interview challenge. The goal is to create an app that generates secure passwords based on user-selected criteria and displays their strength.

Features

• Password Generation: Users can generate a password based on various criteria such as:
  • Including uppercase letters
  • Including lowercase letters
  • Including numbers
  • Including special characters
• Copy to Clipboard: Users can copy the generated password to the clipboard.
• Password Strength Meter: Displays the strength of the generated password based on selected criteria.
• Responsive Design: The app should work seamlessly across devices with different screen sizes.
• Interactive States: Includes hover and focus states for buttons and input fields.

How to Run the Project

1. Clone the repository:

   git clone <repository-url>
   cd password-generator-app

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open the app in your browser:

   http://localhost:3000
   

Project Files

• Design Files: The design is available in both Sketch and Figma formats in the /design folder.
• Assets: All necessary images, icons, and fonts are included in the /assets folder.
• Starter Code: The base code for this project is available in the /starter-code folder.

Tools Used

• Frontend Framework: (Optional) You can use React, Vue.js, or any front-end framework of your choice, or opt for plain HTML, CSS, and JavaScript.
• Fonts: You can either use Google Fonts or the local font files provided in the /assets/fonts folder.

Design Specifications

Refer to the design system in the provided design file for:

• Colors
• Font Families
• Font Weights
• Button styles

Submitting the Project

Once you complete the project:

• Zip the project folder
• Send it back via email

You do not need to deploy it anywhere.

Notes

• Make sure the password strength meter adapts dynamically based on the selected criteria.
• Ensure responsive layouts and that all interactive elements (buttons, inputs, etc.) have proper focus and hover states.