Deployed App Link

Password Generator React App

Password Generator

  • This Password Generator application is made using React JS.
  • This application is used to generate complex passwords which is difficult to guess/decode.
  • The user can generate password in the combination of Uppercase(A-Z), Lowercase(a-z), Digits(0-9) and Special Symbols(~*$%@#^&!?*'-=/,.{}()[]<>).
  • If user want to generate password excluding any of the given four options, then he just need to uncheck the checkbox of that option and that option will be excluded from password generation.
  • User can generate password upto 80 characters.
  • This application can generate password of infinite characters but I set the limit of 80 characters because even 80 character password is more than enough.
  • There are some validations added in this application to restrict user to enter invalid/unrealistic input/behavior.
    • If user try to generate password with blank input, then Invalid password length error will be displayed.
    • If user enter 0 as password length, then Password length cannot be 0 error will be displayed.
    • If user enter password length > 80 then, Password length cannot exceed 80 characters error will be displayed.
    • If user try to generate password by uncheck all the character type checkboxes then, At least one character type must be selected error will be displayed.

All these validation Screenshots are shown below in the validation section.

Screenshots

Main Page

main

Password with excluding upper and lower cases

home

80 characters password

maxPass

Validations

With blank input

blank error

With password length 0

zero error

By exceeding max password length limit

max error

By unchecking all the character type checkboxes

check error

Run this app locally

  • Download or clone this repo into your computer.
  • In the project directory, run:

npm install

then

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Getting Started with Create React App

This project was bootstrapped with Create React App.

GitHub

View Github