Day 5 Project for Vanilla JS Academy
A Pen by Debbie Campbell on CodePen.
Created
May 15, 2020 16:34
-
-
Save izzi-ink/811cc89d9891a06bf7a8a3389e9ed265 to your computer and use it in GitHub Desktop.
Toggling Passwords in Multiple Forms
This file contains hidden or 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> | |
| <title>Toggle Passwords in Multiple Forms</title> | |
| </head> | |
| <body> | |
| <h1>Toggle Passwords in 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" id="password"> | |
| </div> | |
| <div> | |
| <label for="show-password"> | |
| <input type="checkbox" name="show-passwords" id="show-password" data-pw-toggle="#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" id="current-password"> | |
| </div> | |
| <div> | |
| <label for="new-password">New Password</label> | |
| <input type="password" name="new-password" id="new-password"> | |
| </div> | |
| <div> | |
| <label for="show-passwords"> | |
| <input type="checkbox" name="show-passwords" id="show-passwords" data-pw-toggle="#current-password", "#new-password"> | |
| Show passwords | |
| </label> | |
| </div> | |
| <p> | |
| <button type="submit">Change Passwords</button> | |
| </p> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /** Element.matches() polyfill | |
| ** https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill | |
| */ | |
| if (!Element.prototype.matches) { | |
| Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; | |
| } | |
| // Get the elements, convert nodelist to array | |
| var pwd = document.querySelector('#password'); | |
| var pwords = Array.prototype.slice.call(document.querySelectorAll('input[type="password"]') ); | |
| // Listen for events document-wide | |
| document.addEventListener('click', function(event) { | |
| // Does the clicked element have | |
| // the [data-pw-toggle] attribute? | |
| // If not, stop. | |
| if (!event.target.matches('[data-pw-toggle]')) return; | |
| // Get elements and convert | |
| // nodelist to an array | |
| var pwords = Array.prototype.slice.call(document.querySelectorAll(event.target.getAttribute('data-pw-toggle'))); | |
| // Loop through password fields | |
| pwords.forEach(function (pw) { | |
| if (event.target.checked) { | |
| pw.type = 'text'; | |
| } else { | |
| pw.type= 'password'; | |
| } | |
| }) | |
| }, false ); |
This file contains hidden or 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
| body { | |
| background-color: #582A71; | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| margin: 2em auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } | |
| label { | |
| display: block; | |
| padding-bottom: 3px; | |
| width: 100%; | |
| } | |
| input { | |
| font-size: 15px; | |
| margin-bottom: 1em; | |
| padding: 4px; | |
| } | |
| [type="checkbox"] { | |
| margin-bottom: 0; | |
| margin-right: 0.25em; | |
| } | |
| button { | |
| background-color: #7B9E35; | |
| border: 0; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 15px; | |
| padding: 10px 12px; | |
| text-shadow: 1px 1px 2px #333; | |
| text-transform: uppercase; | |
| } | |
| button:hover { | |
| background-color: #557714; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment