Skip to content

Instantly share code, notes, and snippets.

@colabottles

colabottles/index.html

Created January 8, 2020 17:27
Show Gist options
  • Save colabottles/92b1685cf58eb4687afd8b4563d3a185 to your computer and use it in GitHub Desktop.
Save colabottles/92b1685cf58eb4687afd8b4563d3a185 to your computer and use it in GitHub Desktop.
Download ZIP
VanillaJS Academy Project 2 - Toggling Multiple Password Fields // source https://jsbin.com/lawuwol
Raw
index.html
<!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>
Raw
jsbin.lawuwol.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;
}
Raw
jsbin.lawuwol.js
/*
* 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