🔑Random Password Generator

I created a Random Password Generator app using HTML, CSS, and JavaScript. I am taking the Front End Developer Career path on Scrimba. I had a lot of fun coding this project. I also used John from Coding Addict starter template files. I have watched John's videos before and I like his started files. It allows me to get started creating projects faster! I would recommend watching his video about why he uses starter files. In goes over in detail about the starter files as well as how to change the files to your liking! After building this app I have a better understanding of starter files and the power behind them!

Here is the final Product

The whole idea for this project is to click the button and 4 random passwords will be created and displayed on the UI.

First, I started with the HTML. The HTML was make up of a few headings, a paragraph, and 4 empty input 4 fields. In the original project there was supposed to be an Icon when the fields were blank but at that time I could not figure that part out! 😅 So I added something a little different instead!

Next, I worked on the CSS. A LOT of the CSS I used is this project was again from the default styling guide above. So what I did was change a the CSS variables.

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  max-width: 40em;
}

At the top of the file I have all of my CSS variables defined so I can use them later in code. This was my first time using CSS variables and know I final understand how useful they can be! One thing I want to mention before moving on to the JavaScript, if you are new to CSS I would not recommend using NOT starter files in the beginning. The will take away a lot of the muscle memory that is needed when you are first starting out. Once you have built a few projects on your own then I would look more into project starter files for your personal or freelance projects! Again, John goes into way more detail over on his channel about why and how. After watching his video I understand how to edit the files and make them to my liking. His video is little long but I promise it will be worth it! If you are trying to learn how to build projects fast! Now lets jump into some JavaScript!

let letter = "abcdefghijklmnopqrstuvqaxyz"
letter += letter.toUpperCase()
letter += "@#$&*(){}?|!^-+=/"
const lettersArray = Object.assign([], letter)
 let pw1 = document.getElementById("pw1")
 pw1.value = "Cake"

 let pw2 = document.getElementById("pw2")
 pw2.value = "is"

 let pw3 = document.getElementById("pw3")
 pw3.value = "a"

 let pw4 = document.getElementById("pw4")
 pw4.value = "Lie"

I created a string with all the possible value I wanted in the password. I used a built in JavaScript method to get all of the upper case characters and then add them to the same string. Then added some of the special characters. Then I found the method called Assign I can't really explain it but I the link will take you to the mdn docs! (😂) Finally we have he generate Password method!

 function generatePassword(){
     var message1 = ""
     var message2 = ""
     var message3 = ""
     var message4 = ""
     for(let i = 0; i < 13; i++){
        message1 += lettersArray[Math.floor(Math.random() * letter.length)]
        message2 += lettersArray[Math.floor(Math.random() * letter.length)]
        message3 += lettersArray[Math.floor(Math.random() * letter.length)]
        message4 += lettersArray[Math.floor(Math.random() * letter.length)]
     }
     pw1.value = message1
     pw2.value = message2
     pw3.value = message3
     pw4.value = message4
 }

This method is called every time the button is clicked. Here I hared coded it to 13 characters. Maybe in a future update I will allow the use to pick how long they want there password to be!
That pretty much wraps up this project! My favorite things I learned were!

• How to get up and running with a starter CSS files
• Object.Assign
• To change the value of a input box you use .Value! d
• How to write Mark Down

That is all I have today Thank you for reading! I will leave a link to my twitter where I post more about the project Im working on as well as my YouTube Channel where I have Dev Vlogs. See ya in the next one!

My YouTube Channel
Twitter