Created
October 15, 2020 10:54
-
-
Save eheiser/3f75b54ed1fe3048c82ca261ccebbba1 to your computer and use it in GitHub Desktop.
Vanilla js day 3 alternate solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
≤<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Vanilla js project 2 alt</title> | |
</head> | |
<body> | |
<!-- When a user clicks on the #show-passwords checkbox, it should show the text for the #current-password and #new-password fields if it’s checked, and mask it if it’s unchecked. --> | |
<form> | |
<div> | |
<label for="current-password">Current Password</label> | |
<input type="password" name="current-password" id="current-password"> | |
</div> | |
<div> | |
<label for="new-password">New Password</label> | |
<input type="password" name="new-password" id="new-password"> | |
</div> | |
<div> | |
<label for="show-passwords"> | |
<input type="checkbox" name="show-passwords" id="show-passwords"> | |
Show passwords | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Passwords</button> | |
</p> | |
</form> | |
<script> | |
// Variables | |
// Get the password toggle | |
const toggle = document.querySelector('#show-passwords'); | |
// Get the password fields | |
const passwords = Array.from( | |
document.querySelectorAll('[type="password"]') | |
); | |
// | |
// Functions | |
// | |
/** | |
* Toggle the visibility of a password field | |
* based on a checkbox | |
* | |
* @param {Object} checkbox The checkbox | |
* @param {Object} field The password field | |
*/ | |
function togglePassword (checkbox, field) { | |
field.type = checkbox.checked ? 'text' : 'password'; | |
} | |
/** | |
* Handle change events | |
*/ | |
function handleChange () { | |
passwords.forEach(password => { | |
togglePassword(this, password); | |
}); | |
} | |
// | |
// Inits & Event Listeners | |
// | |
// Handle change events | |
toggle.addEventListener('change', handleChange); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment