Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Script for project day 3 vanillaJS
<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
<h1>Password Visibility - Multiple Fields</h1>
<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">
Show passwords
</label>
</div>
<p>
<button type="submit">Change Passwords</button>
</p>
</form>
<script>
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);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.