Created
October 12, 2022 12:54
-
-
Save angusgrant/7c6ee7f90b2508f89fab168f0926d4ce to your computer and use it in GitHub Desktop.
Vanilla JS week 1 lesson 2
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> | |
<head> | |
<meta charset="utf-8"> | |
<title>Password Visibility - Multiple Fields</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
label { | |
display: block; | |
width: 100%; | |
} | |
input { | |
margin-bottom: 1em; | |
} | |
[type="checkbox"] { | |
margin-bottom: 0; | |
margin-right: 0.25em; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Password Visibility - Multiple Fields</h1> | |
<p>Enter your current password and new password below.</p> | |
<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> | |
const showPasswordChkBox = document.querySelector('#show-passwords') | |
const passwordInputs = document.querySelectorAll('[type=password]') | |
showPasswordChkBox.addEventListener('click', function(){ | |
//loop through all password inputs and change attribute type based on checkbox checked state | |
for (let passwordInput of passwordInputs) { | |
if (showPasswordChkBox.checked) { | |
passwordInput.type = 'text' | |
} else { | |
passwordInput.type = 'password' | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment