Lesson 2 - Learning construction - STEP 5 solution

by nathanesa

HTML

<title>PASSWORD GENERATOR</title>

<h1>Password Generator</h1>

<img src="https://cdn.pixabay.com/photo/2017/04/10/12/18/castle-2218358_960_720.jpg" width='250px'>

<button onclick="generatePassword()" id='button'>Get Password</button>
<br>
<br>
<br>

<p id="output"> </p>

CSS

body {
  background-color: rgb(72, 100, 124);
  text-align: center;
}

h1 {
  color: white;
  font-size: 50px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  width: 250px;
  margin: 0 auto;
  font-size: 30px;
}


button {
  font-size: 20px;
  border-radius: 5px;
}

JavaScript

//get user input
function generatePassword() {

  //arrays
  let adjectives = ['happy', 'dark', 'dizzy', 'ghastly', 'crazy', 'blue', 'shiny'];
  let nouns = ['camel', 'apricot', 'light', 'bones', 'monkey', 'piano', 'star'];
  let numbers = ['79', '13', '46', '62', '82', '26', '97'];

  //random number
  let adjRand = Math.floor(Math.random() * 7);
  let nounsRand = Math.floor(Math.random() * 7);
  let numbersRand = Math.floor(Math.random() * 7);

  //output password

  document.getElementById("output").innerHTML = adjectives[adjRand] + nouns[nounsRand] + numbers[numbersRand];


}