savicas/Toggle multiple passwords visibility

## Toggle multiple passwords visibility
<!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>
	<!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>