Skip to content

Instantly share code, notes, and snippets.

@colabottles

colabottles/index.html

Created January 12, 2020 02:18
Show Gist options
  • Save colabottles/c41b2a177bfd737cca9d774de6118c67 to your computer and use it in GitHub Desktop.
Save colabottles/c41b2a177bfd737cca9d774de6118c67 to your computer and use it in GitHub Desktop.
Download ZIP
Day 5: Project 2: Toggling passwords in multiple forms // source https://jsbin.com/jeruseq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Day 5: Project 2: Toggling passwords in multiple forms</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body {
background: #feefee;
display: grid;
}
h2 {
text-align: center;
color: #baabaa;
font-size: 1.5rem;
}
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: min-content;
grid-gap: 1rem;
justify-self: center;
padding: 1rem;
}
label {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
input:checked + label {
color: green;
font-weight: bold;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
}
input[type="checkbox"] {
position: relative;
width: 1em;
height: 1em;
border: 1px solid gray;
/* Adjusts the position of the checkboxes on the text baseline */
vertical-align: -5px;
/* Set here so that Windows' High-Contrast Mode can override */
color: green;
}
input[type="checkbox"]::before {
content: "✔";
position: absolute;
right: 0.1em;
top: -0.4em;
visibility: hidden;
}
input[type="checkbox"]:checked::before {
/* Use `visibility` instead of `display` to avoid recalculating layout */
visibility: visible;
}
input[type="checkbox"]:disabled {
border-color: black;
background: #ddd;
color: gray;
}
</style>
</head>
<body>
<h2>Enter your username and password to change your username.</h2>
<form>
<fieldset>
<legend>Change Username</legend>
<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" id="password" data-password>
</div>
<div>
<input type="checkbox" name="show-pass" id="show-password" data-toggle>
<label for="show-password">Show password</label>
</div>
<button type="submit">Change Username</button>
</fieldset>
</form>
<h2>Enter your current password and new password below.</h2>
<form>
<fieldset>
<legend>Change Password</legend>
<div>
<label for="current-password">Current Password</label>
<input type="password" name="current-password" id="current-password" data-password>
</div>
<div>
<label for="new-password">New Password</label>
<input type="password" name="new-password" id="new-password" data-password>
</div>
<div>
<input type="checkbox" name="show-pass" id="show-passwords" data-toggle>
<label for="show-passwords">Show passwords</label>
</div>
<button type="submit">Change Passwords</button>
</ieldset>
</form>
<script id="jsbin-javascript">
// Toggle the visibility of only the password field in this fieldset
function togglePassword(password) {
password.type = event.target.checked ? 'text' : 'password';
}
// Toggle the passwords in both input areas in the second fieldset
function toggleAllPasswords(event) {
/* The matches() method checks to see if the Element
* would be selected by the provided selectorString.
*/
if (!event.target.matches('[data-toggle]')) return;
/* the closest() method traverses parents
* -- heading toward the document root --
* of the Element until it finds a node that matches the provided selectorString.
*/
var passwords = event.target.closest('form').querySelectorAll('[data-password]');
// Convert to an array
passwords = Array.from(passwords);
// Toggle the password fields
passwords.forEach(togglePassword);
}
// Show/hide passwords on toggle
document.body.addEventListener('change', toggleAllPasswords, false);
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body {
background: #feefee;
display: grid;
}
h2 {
text-align: center;
color: #baabaa;
font-size: 1.5rem;
}
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: min-content;
grid-gap: 1rem;
justify-self: center;
padding: 1rem;
}
label {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
input:checked + label {
color: green;
font-weight: bold;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
}
input[type="checkbox"] {
position: relative;
width: 1em;
height: 1em;
border: 1px solid gray;
/* Adjusts the position of the checkboxes on the text baseline */
vertical-align: -5px;
/* Set here so that Windows' High-Contrast Mode can override */
color: green;
}
input[type="checkbox"]::before {
content: "✔";
position: absolute;
right: 0.1em;
top: -0.4em;
visibility: hidden;
}
input[type="checkbox"]:checked::before {
/* Use `visibility` instead of `display` to avoid recalculating layout */
visibility: visible;
}
input[type="checkbox"]:disabled {
border-color: black;
background: #ddd;
color: gray;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Toggle the visibility of only the password field in this fieldset
function togglePassword(password) {
password.type = event.target.checked ? 'text' : 'password';
}
// Toggle the passwords in both input areas in the second fieldset
function toggleAllPasswords(event) {
/* The matches() method checks to see if the Element
* would be selected by the provided selectorString.
*/
if (!event.target.matches('[data-toggle]')) return;
/* the closest() method traverses parents
* -- heading toward the document root --
* of the Element until it finds a node that matches the provided selectorString.
*/
var passwords = event.target.closest('form').querySelectorAll('[data-password]');
// Convert to an array
passwords = Array.from(passwords);
// Toggle the password fields
passwords.forEach(togglePassword);
}
// Show/hide passwords on toggle
document.body.addEventListener('change', toggleAllPasswords, false);</script></body>
</html>
Raw
jsbin.jeruseq.css
* {
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body {
background: #feefee;
display: grid;
}
h2 {
text-align: center;
color: #baabaa;
font-size: 1.5rem;
}
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: min-content;
grid-gap: 1rem;
justify-self: center;
padding: 1rem;
}
label {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
input:checked + label {
color: green;
font-weight: bold;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
}
input[type="checkbox"] {
position: relative;
width: 1em;
height: 1em;
border: 1px solid gray;
/* Adjusts the position of the checkboxes on the text baseline */
vertical-align: -5px;
/* Set here so that Windows' High-Contrast Mode can override */
color: green;
}
input[type="checkbox"]::before {
content: "✔";
position: absolute;
right: 0.1em;
top: -0.4em;
visibility: hidden;
}
input[type="checkbox"]:checked::before {
/* Use `visibility` instead of `display` to avoid recalculating layout */
visibility: visible;
}
input[type="checkbox"]:disabled {
border-color: black;
background: #ddd;
color: gray;
}
Raw
jsbin.jeruseq.js
// Toggle the visibility of only the password field in this fieldset
function togglePassword(password) {
password.type = event.target.checked ? 'text' : 'password';
}
// Toggle the passwords in both input areas in the second fieldset
function toggleAllPasswords(event) {
/* The matches() method checks to see if the Element
* would be selected by the provided selectorString.
*/
if (!event.target.matches('[data-toggle]')) return;
/* the closest() method traverses parents
* -- heading toward the document root --
* of the Element until it finds a node that matches the provided selectorString.
*/
var passwords = event.target.closest('form').querySelectorAll('[data-password]');
// Convert to an array
passwords = Array.from(passwords);
// Toggle the password fields
passwords.forEach(togglePassword);
}
// Show/hide passwords on toggle
document.body.addEventListener('change', toggleAllPasswords, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment