jemimaabu/random-password-generator

A webpage that generates random passwords

random-password-generator

A webpage that generates a random password.

How To Use

1. Type in password length.
2. Select type of password required (can also generate pins if you select only numbers).
3. Generate password.

All passwords are generated on your browser so nothing is stored online, you're the only one who has knowledge of the generated password.

---

Open Source

This project is open to contributions from the public. Basically, if you're a beginner, think of it as your introduction to open source. And if you've been open sourcing for a while, here's another contribution to add to your belt.

Contributing

Check out CONTRIBUTING.md for details on creating pull requests and solving issues and all that jazz.

License

This project is licensed under the MIT License - see the LICENSE file for details.

random-password-generator's Issues

Change password length from input to select

Problem: The password length is currently an input of type number but we want to be able to better control user input

Solution: Change the password-length input tag to a select with options value 4 to 99

How tos ave?

Hello, how can we collect each generated password in a file as a document.

Style input and button

Style the 'Password Length' input tag and 'Generate password' button

Page responsiveness

Reduce the margin on the containers in smaller screens

Create Button To Copy Password

Problem: A clear and concise description of what the problem is. Ex. The page resets on submit[...]
A button that allows users to copy the created password to their clipboard would be useful.
Solution: A clear and concise description of what you want to happen.
Create a button such that the generated password is copied to the user's clipboard.
Implementation: If you're handling the issue yourself, summarize how you plan to go about it.
I will edit the .html and .js files to create a button to copy the password to the clipboard.
Additional context
Add any other context or screenshots about the feature request here.

Fix page overflow

Solution: Remove the left property on the tag and use a margin-auto and width property to properly center the items in the page.

Bonus points for responsiveness.

Fix Password Length Input

Problem: When typing in the password length field, if the first character of the number is lower than 4, it resets it to 4. i.e. if I try to type 12, it changes the "1" to 4 before I'm done typing.

Also, the input can't be cleared so if I try to type 32, I end up typing 432 and it's automatically reset to 99.

Create a REST API to generate passwords on other sites with their own front end/ rules. This could be accomplished using a node server.

Problem: A clear and concise description of what the problem is. Ex. The page resets on submit[...]

Solution: A clear and concise description of what you want to happen.

Implementation: If you're handling the issue yourself, summarize how you plan to go about it.

Additional context
Add any other context or screenshots about the feature request here.

Show/Hide instructions

Include button to toggle instructions div.
Try to make the transition smooth.
Keep in mind the instruction div takes up space on the right so you may need to expand other divs to fill up the space.

Reset password characters on checkbox

Problem: When you check a box for an option (e.g. Include numbers), unchecking the box doesn't reset the values. So if you uncheck all boxes and recheck them, it returns an empty array

Solution: Include an else property on all methods e.g.

    if (!specialCharacters.checked) {
        characters = characters.join("").replace(/[&\/\\#,+()$~%.':*?<>{}]/g,'').split('')
    } else {
         characters = ["&", "/", "\\", "#", ",", "+", "(", ")", "$", "~", "%", ".", "'", ":", "*", "?", "<", ">", "/", "{", "}", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", 0,1,2,3,4,5,6,7,8,9]
    }

Alternative solution: If you have a better way of implementing this, go right ahead.

Style form error

Include a padding and change the color of the error message that appears

Bonus points for making the message transition (fade-in, fade-out etc)

Apparently when right-clicking and pasting the password it doesn't work

When I try to right click and paste the randomly generated password, it doesn't show strength, only when I use the ctrl+v method.

Padding on form

Include a padding on the individual elements in the form to better space them out.

Remove form error

The form error is still displayed after the error has been fixed.
Set the formError innerHTML to empty if the 'Generate Password' button is clicked and there are no errors.

Include Title on Page

Include a "Random Password Generator" header on the page and include the How To Use content from the README.md