Last active
January 18, 2022 02:34
-
-
Save mosherbrian/508b3bec7269a3c806ce5ee695efa44c to your computer and use it in GitHub Desktop.
VanillaJS - Week1 Friday Project
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 Forms</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 Forms</h1> | |
<h2>Change Username</h2> | |
<p>Enter your username and password to change your username.</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" data-toggler-checkbox="show-password" id="password"> | |
</div> | |
<div> | |
<label for="show-password"> | |
<input type="checkbox" name="show-password" id="show-password"> | |
Show password | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Username</button> | |
</p> | |
</form> | |
<h2>Change Password</h2> | |
<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" data-toggler-checkbox="show-passwords" id="current-password"> | |
</div> | |
<div> | |
<label for="new-password">New Password</label> | |
<input type="password" name="new-password" data-toggler-checkbox="show-passwords" 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> | |
let pwdFields = document.querySelectorAll('[data-toggler-checkbox]'); | |
document.addEventListener( 'click', function( event ) | |
{ | |
let elem = event.target; | |
if (elem.type === 'checkbox') | |
{ | |
for (let pwdField of pwdFields) | |
{ | |
let checkBox_id = pwdField.getAttribute('data-toggler-checkbox'); | |
let chkBx = document.querySelector('#' + checkBox_id); | |
if (chkBx === elem) | |
{ | |
pwdField.type = chkBx.checked ? 'text' : 'password'; | |
} | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment