01. Password visibility

Enter your username and password below to login.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p>Enter your username and password below to login.</p>

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
  </div>

  <div>
      <label for="password">Password:</label>
      <input type="password" name="password" id="password">
  </div>

  <div>
      <label for="show-password">
        <input type="checkbox" name="show-passwords" id="show-password">
        Show password
      </label>
  </div>

  <p>
    <button type="submit">Log In</button>
  </p>
</form>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* When a user clicks the #show-password checkbox, 
the #password field should display the password in plain text 
if the box is checked, or mask it if it’s not. */

const showPass = document.querySelector('#show-password');
const passInput = document.querySelector('#password');

showPass.addEventListener('click', function () {
  if (showPass.checked) {
    passInput.type = "text";
  } else {
    passInput.type = "password";
  };
});