Password Generator

A password generator that takes in inputs from the user, which helps to create simple to complex passwords.

HTML
CSS
JavaScript
Figma

The Purpose of this Project

Password Generator is a tool designed to create secure passwords based on user preferences. Users can specify length, character types, and complexity to generate strong, unique passwords.

The Technical Implementation

The password generator is built using vanilla JavaScript, HTML, and CSS. Input Validation Users choose a password length between 8 and 128 characters. JavaScript checks this input and displays an alert if it's out of range. Character Selection Users can toggle inclusion of special characters, numbers, lowercase, and uppercase letters. These choices determine the character pool used for generation. Password Generation A loop selects random characters from the active pool based on the chosen length. This ensures a secure and unpredictable password. Clipboard Copy Passwords can be copied with a single click using navigator.clipboard.writeText(). UI and Design The layout uses CSS Flexbox for responsiveness and is inspired by clean UI designs from Dribbble. Accessibility and clear labelling are also prioritised.

Results & Future Potential

This project strengthened my core JavaScript skills, particularly in DOM manipulation, event handling, and form validation, while also introducing me to defensive programming and clipboard API usage. I enhanced my understanding of user experience through interface prototyping and feedback integration. Looking ahead, I plan to add features such as a real-time password strength meter, offline support via PWA capabilities, and integration with breach-check APIs like "Have I Been Pwned." Additional improvements may include local password storage, multi-language support, and browser extension functionality.

Password Generator Demo

Copyright, Leanne M. Goldsmith 2025