Password Generator

My solo project - Password Generator (from The Frontend Developer Career Path of Scrimba)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Roadmap
4. Issues and solutions
5. License
6. Contact
7. Acknowledgments

About The Project

My solo project - Password Generator. Built with Vanilla JavaScript and is powered by the Figma design resources from The Frontend Developer Career Path on Scrimba. Some additional features: apply the singleton design pattern to manage application data as well as getters and setters; use the countdown function of setTimeout to hide the pop-up toast after a given time, use the debounce mechanism; switch to light/dark mode, and Store in localStorage to preserve user preference mode; toggle switch to include/exclude special characters/numbers in passwords.

(back to top)

Built With

• 
• 
• 
• 
• 

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Right-click on the index.html file and select "Open with" and select the target browser.

(back to top)

Roadmap

• Use Font Awesome for button icons
• Use UnoCSS
• Generate random passwords
• Allow password lengths within a given range (8 to 15, auto reset if the value is out of range)
• Show ellipsis when there is text overflow
• Copy on click
• Added toast to notify that the password has been copied to the clipboard (setTimeout and clearTimeout to control the display of the toast)
• Toggle mode light/ dark theme, store in the localStorage
• Toggle symbols on/ off
• Toggle numbers on/ off
• Refactor
  • Apply Singleton Pattern for app data
  • Increase code consistency by using the same selector querySelector
  • Clean up classes in styles.css, move all non-default classes to index.html
• Bug fixes
  • Fix password copy toast position incorrect
• Enhancement
  • Click very fast become user select, set CSS user-select to none

See the open issues for a full list of proposed features (and known issues).

(back to top)

Issues and solutions

After setting layout of body to be flex, the hight of body becomes the same as its content

Solution

Set the minimum height of html and body

html,
body {
  min-height: 100vh;
}

Refreshing page CSS styles do not apply immediately

Same as reported unocss/unocss#2435

Solution

Have not found a solution yet.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jen Chen

Project Link: https://github.com/yujhenchen/password-generator

(back to top)

Acknowledgments

• How to create a toggle switch with CSS
• HTML vs Body: How to Set Width and Height for Full Page Size
• Simple CSS3 Toggle Switch Button
• How to Copy Text to the Clipboard with JavaScript
• The best light/dark mode theme toggle in JavaScript
• Scrimba

(back to top)