View, hide, type and generate password

by Génesis García Morilla

HTML

<input id="password" type="password" placeholder="type password...">
<button id="view-password"></button>
<button id="generate-password">↻</button>

CSS

* {
  font-type: 'Roboto';
  font-size: 19px;
  color: #50514F; 
}

button,
input {
  padding: 7px 10px;
}

button {
  width: 50px;
  cursor: pointer;
}

#view-password::after {
  content: '👁';
}

#view-password.view::after {
  content: '●';
}

JavaScript

const $password = document.querySelector('#password')
const $view_password = document.querySelector('#view-password')
const $generate_password = document.querySelector('#generate-password')

// View or hide password
$view_password.addEventListener('click', e => {
  e.currentTarget.classList.toggle('view')

  if (e.currentTarget.className.includes('view'))
    $password.setAttribute('type', 'text')
  else $password.setAttribute('type', 'password')
});

// Set a random password and make sure it's shown
$generate_password.addEventListener('click', () => {
  $view_password.classList.add('view')
  $password.setAttribute('type', 'text')
  $password.value = Math.random().toString(36).slice(-8)
});