https://github.com/theladeli/password-generator

Just a quick one day project of a Password Generator
https://github.com/theladeli/password-generator

Last synced: 6 days ago
JSON representation

Just a quick one day project of a Password Generator

• Host: GitHub
• URL: https://github.com/theladeli/password-generator
• Owner: theLadEli
• Created: 2023-01-29T17:17:15.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-29T19:47:05.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T14:26:57.682Z (2 months ago)
• Language: CSS
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: ReadMe.md

Awesome Lists containing this project

README

        
# Password Generator

##### Aim: To create a password generator that gives the user a random password on load

***

**You can view the live site here: [www.theladeli.github.io/password-generator](https://theladeli.github.io/password-generator/)**

## Breakdown

1. First I created the JS code for it (saving the values to variables and logging it to console)

2. Next I created the basic HTML for it

3. Styled it up using CSS

4. Added Copy & Refresh buttons

5. Made the site mobile responsive

## The HTML

I wanted the site to be simple with no excess content.

- Created a heading of **"Password Generator"**

- Created a `
` in a `div` with `contenteditable` set to `true`

- Created two columns below, one with a button for **Copy** the other for **Refresh**

- Set the **Copy** buttons `onclick` event to call the `copyToClipboard` function

- Set the **Refresh** buttons `onclick` event to reload the page

- Added **Font Awesome**'s `script`

- Linked my `index.js` script

## The JavaScript

I'm sure there are many better methods to do it than the way I did, but here's what I did:

- Created an array called `characters` with a list of characters available in the password (all letters in the alphabet, all letters in the capitalized version, numbers and common symbols)

- Next I created a variable called `length` to get a random length of the password, a minimum of 8 characters. I used `Math.random()` rounded down times by 14, plus eight (for the minimum)

- I created an empty array called `password`

- Inside a `for` loop, using another `Math.random()` number set up to the length of the `characters` array, I pushed the character at the random numbers position into the empty `password` array I created earlier

- I had the `for` loop run until `i => length`

-  I created a variable called `strongPass` and using the `join` method, concactinated the `password` array into a string with no seperator

-  Using DOM I targeted the `
` element on the page where I wanted the generated password to display and set the `innerHTML` to the `strongPass` variable

-  Created a `copyToClipboard` function that writes to clipboard the `strongPass` variable, and displays an `alert` after doing so