Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Script for project day 3 vanillaJS
<!DOCTYPE html>
<title>Password Visibility - Multiple Fields</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
label {
display: block;
width: 100%;
input {
margin-bottom: 1em;
[type="checkbox"] {
margin-bottom: 0;
margin-right: 0.25em;
<h1>Password Visibility - Multiple Fields</h1>
<p>Enter your current password and new password below.</p>
<label for="current-password">Current Password</label>
<input type="password" name="current-password" id="current-password">
<label for="new-password">New Password</label>
<input type="password" name="new-password" id="new-password">
<label for="show-passwords">
<input type="checkbox" name="show-passwords" id="show-passwords">
Show passwords
<button type="submit">Change Passwords</button>
const pwds = document.querySelectorAll('[type="password"]');
const toggleShow = document.querySelector('#show-passwords');
if(pwds && toggleShow){
toggleShow.addEventListener('click', function(event) {
if(toggleShow.checked) {
pwds.forEach(function(pwd, i) {
pwd.setAttribute( 'type', 'text');
} else {
pwds.forEach(function(pwd, i){
pwd.setAttribute('type', 'password');
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment