Created
January 8, 2020 17:25
-
-
Save colabottles/55c3a766d0beb1a2a77f1a8ae226bd74 to your computer and use it in GitHub Desktop.
VanillaJS Academy Project 2 - Toggling Multiple Password Fields // source https://jsbin.com/lawuwol
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"> | |
<meta name="viewport" content="width=device-width"> | |
<title>VanillaJS Academy Project 2 - Toggling Multiple Password Fields</title> | |
<style id="jsbin-css"> | |
* { | |
box-sizing: border-box; | |
font-size: 1.1rem; | |
line-height: 1.5; | |
} | |
body { | |
background: #aaa; | |
display: grid; | |
} | |
form { | |
background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
border: 1px solid #999; | |
border-radius: 10px; | |
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
display: grid; | |
grid-template-columns: 1fr min-content 1fr; | |
grid-template-rows: 1fr max-content 1fr; | |
grid-gap: 1rem; | |
grid-column-start: 1; | |
justify-self: center; | |
padding: 1rem; | |
} | |
div { | |
grid-column: 2; | |
} | |
label { | |
font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
} | |
input:checked + label { | |
color: green; | |
font-weight: bold; | |
} | |
button[type="submit"] { | |
grid-column: 2; | |
} | |
</style> | |
</head> | |
<body> | |
<form> | |
<div> | |
<label for="current-password">Current Password</label> | |
<input type="password" name="current-password" id="current-password" data-input> | |
</div> | |
<div> | |
<label for="new-password">New Password</label> | |
<input type="password" name="new-password" id="new-password" data-input> | |
</div> | |
<div> | |
<input type="checkbox" name="show-passwords" id="show-passwords"> | |
<label for="show-passwords">Show Passwords</label> | |
</div> | |
<button type="submit">Change Passwords</button> | |
</form> | |
<script id="jsbin-javascript"> | |
/* | |
* Get the password fields using data-* global attribute | |
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* | |
*/ | |
var password = Array.from(document.querySelectorAll("[data-input]")); | |
// Toggle the Show Passwords checkbox | |
var toggle = document.querySelector("#show-passwords"); | |
// Toggle a single password field to set visibility | |
function togglePassword(password) { | |
password.type = toggle.checked ? "text" : "password"; | |
} | |
// Toggle all password fields to set their visibility | |
function toggleAll(event) { | |
password.forEach(togglePassword); | |
} | |
// Show/hide passwords, on toggle, in the checkbox | |
toggle.addEventListener("change", toggleAll, false); | |
</script> | |
<script id="jsbin-source-css" type="text/css">* { | |
box-sizing: border-box; | |
font-size: 1.1rem; | |
line-height: 1.5; | |
} | |
body { | |
background: #aaa; | |
display: grid; | |
} | |
form { | |
background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
border: 1px solid #999; | |
border-radius: 10px; | |
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
display: grid; | |
grid-template-columns: 1fr min-content 1fr; | |
grid-template-rows: 1fr max-content 1fr; | |
grid-gap: 1rem; | |
grid-column-start: 1; | |
justify-self: center; | |
padding: 1rem; | |
} | |
div { | |
grid-column: 2; | |
} | |
label { | |
font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
} | |
input:checked + label { | |
color: green; | |
font-weight: bold; | |
} | |
button[type="submit"] { | |
grid-column: 2; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">/* | |
* Get the password fields using data-* global attribute | |
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* | |
*/ | |
var password = Array.from(document.querySelectorAll("[data-input]")); | |
// Toggle the Show Passwords checkbox | |
var toggle = document.querySelector("#show-passwords"); | |
// Toggle a single password field to set visibility | |
function togglePassword(password) { | |
password.type = toggle.checked ? "text" : "password"; | |
} | |
// Toggle all password fields to set their visibility | |
function toggleAll(event) { | |
password.forEach(togglePassword); | |
} | |
// Show/hide passwords, on toggle, in the checkbox | |
toggle.addEventListener("change", toggleAll, false);</script></body> | |
</html> |
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
* { | |
box-sizing: border-box; | |
font-size: 1.1rem; | |
line-height: 1.5; | |
} | |
body { | |
background: #aaa; | |
display: grid; | |
} | |
form { | |
background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
background: linear-gradient(bottom, #CCCCCC, #EEEEEE 200px); | |
border: 1px solid #999; | |
border-radius: 10px; | |
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
display: grid; | |
grid-template-columns: 1fr min-content 1fr; | |
grid-template-rows: 1fr max-content 1fr; | |
grid-gap: 1rem; | |
grid-column-start: 1; | |
justify-self: center; | |
padding: 1rem; | |
} | |
div { | |
grid-column: 2; | |
} | |
label { | |
font-family: 'Open Sans', Arial, Helvetica, sans-serif; | |
} | |
input:checked + label { | |
color: green; | |
font-weight: bold; | |
} | |
button[type="submit"] { | |
grid-column: 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
/* | |
* Get the password fields using data-* global attribute | |
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* | |
*/ | |
var password = Array.from(document.querySelectorAll("[data-input]")); | |
// Toggle the Show Passwords checkbox | |
var toggle = document.querySelector("#show-passwords"); | |
// Toggle a single password field to set visibility | |
function togglePassword(password) { | |
password.type = toggle.checked ? "text" : "password"; | |
} | |
// Toggle all password fields to set their visibility | |
function toggleAll(event) { | |
password.forEach(togglePassword); | |
} | |
// Show/hide passwords, on toggle, in the checkbox | |
toggle.addEventListener("change", toggleAll, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment