Skip to content

Instantly share code, notes, and snippets.

@colabottles

colabottles/index.html

Created January 8, 2020 17:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save colabottles/5729f92cfb91464bb0c85e78a7e03779 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save colabottles/5729f92cfb91464bb0c85e78a7e03779 to your computer and use it in GitHub Desktop.
Download ZIP
JVanillaJS 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>JVanillaJS 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;
font-family: Tahoma, Geneva, sans-serif;
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: 10px;
}
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">
// Getting the password fields using data-input
var password = Array.from(document.querySelectorAll("[data-input]"));
// Toggle the show password 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;
font-family: Tahoma, Geneva, sans-serif;
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: 10px;
}
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">// Getting the password fields using data-input
var password = Array.from(document.querySelectorAll("[data-input]"));
// Toggle the show password 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;
font-family: Tahoma, Geneva, sans-serif;
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: 10px;
}
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
// Getting the password fields using data-input
var password = Array.from(document.querySelectorAll("[data-input]"));
// Toggle the show password 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