Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
savicas first project toggle pwd visibility
<!DOCTYPE html>
<title>Password Visibility savicas</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</h1>
<p>Enter your username and password to login.</p>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<label for="show-password">
<input type="checkbox" name="show-passwords" id="show-password">
Show password
<button type="submit">Log In</button>
var pwd = document.querySelector('#password');
var showPwd = document.querySelector('#show-password');
if(pwd) {
showPwd.addEventListener('click', function(event){
if(showPwd.checked) {
password.type = 'text';
} else {
password.type = 'password';
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment