Password Generator

Generate passwords for my friend Mike

by trentHarlem

HTML

<div id='container'>

  <h1>
    Strong<br>Password Generator
  </h1>

  <!--
 a centered <form> with input fields for password options
-->

  <form action="generatePassword" method="">
  <!--
    <div class="form-field">
      <label for="length">Length of password</label>
      <input type="number" name="length" id="length" min="8" max="20" value="8" />
    </div>
    <div class="form-field">
      <label for="int">Number of integers</label>
      <input type="number" name="int" id="int" min="1" max="5" value="1" />
    </div>
    <div class="form-field">
      <label for="special">Number of special characters</label>
      <input type="number" name="special" id="special" min="1" max="5" value="1" />
    </div>
    <div class="form-field">
      <label for="upper">Number of upper case characters</label>
      <input type="number" name="upper" id="upper" min="1" max="5" value="1" />
    </div>
    <div class="form-field">
      <label for="lower">Number of lower case characters</label>
      <input type="number" name="lower" id="lower" min="1" max="5" value="5" />
    </div>
    -->
    <div class="form-field">
      <input formaction="generatePassword()" id="submit" type="submit" value="Generate Password" />
    </div>
    <div class="form-field">
      <!-- display field must be input field for the copy to clipboard function -->
      <input type="text" value="" id="passwordDisplay" />
      <!-- button to copy the password hidden until password is displayed-->
      <button id="copyPassword">Copy to Clipboard</button>
    </div>
  </form>

</div>

CSS

#container {
  margin: 0 auto;
  background: #ececec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 380px;
  max-width: 500px;
  height: 100vh;
}

#container h1 {
  font: bold 32px system-ui;
  color: #131313;
  margin: 10px;
  text-align: center;
}

/* select all elements within the container */
#container * {
  transition: all 0.3s ease;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
}

label {
  font: bold 16px helvetica, sans-serif;
  justify-content: left;
}

input {
  /* display: flex;
        flex-direction: row; */
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid black;
  font: bold 16px helvetica;
}


#submit {
  background: lightgreen;
  margin: 5px;
  padding: 9px;
  border: 1px solid #000;
  border-radius: 5px;
  min-width: 250px;
}

#submit:hover {
  background: darkgreen;
  color: #ececec;
  border: 1px solid whitesmoke;
}

#submit:active {
  transform: translateY(4px);
}

#password_display {
  background: #fff;
  margin: 10px;
  padding: 10px;
  border: 1px solid #131313;
  border-radius: 5px;
  font: 1.5em system-ui;
  color: #131313;
  min-width: 250px;
  text-align: center;
}


#copyPassword {
  display: none;
  margin: 10px auto;
  padding: 10px;
  min-width: 250px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: #4caf50;
  color: white;
  font: bold 16px helvetica, sans-serif;
}

JavaScript

// write a function that generates and returns a password based on given conditions
// example
// 1. length of the returned password should be 14 characters
// 2. at least 1 character from the password must be integer
// 3. at least 1 character from the password must be special character
// 4  at least 1 character from the password must be upper case
// 5. at least 1 character from the password must be lower case
const password_display = document.getElementById('passwordDisplay')
const submit = document.getElementById('submit')
const copyPassword = document.getElementById('copyPassword')


submit.addEventListener('click', function(e) {
  e.preventDefault()
  generatePassword()
  console.log('click')
})

submit.addEventListener('mousedown', function(e) {
  e.preventDefault()
  password_display.innerHTML = '...'
  submit.innerHTML = 'Generating...'
  // switch the button back to 'Generate Password' 
  submit.addEventListener('mouseup', function(e) {
    e.preventDefault()
    submit.innerHTML = 'Generate Password'
  })
})

copyPassword.addEventListener('click', function(e) {
  e.preventDefault()
  copyToClipboard()
})
// this function will need to be re-written.
// the expanded version will need more control over the characters.  
function generatePassword() {
  let password = ""
  const length = 14
  const charset =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./"
  for (let i = 0, n = charset.length; i < length; ++i) {
    password += charset.charAt(Math.floor(Math.random() * n))
  }
  password_display.value = password
  copyPassword.style.display = 'block'
  return password
}

function copyToClipboard() {
  let copyText = document.getElementById('passwordDisplay')
  console.log('copyText', copyText)
  copyText.select()
  copyText.setSelectionRange(0, 99999)
  document.execCommand('copy')
  console.log('copied', copyText.value)
  alert('Copied the password to the clipboard: ' + copyText.value)
}
// RN<Uvy;ez8sXuO
//...