Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
savicas first project toggle pwd visibility
<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
<h1>Password Visibility</h1>
<p>Enter your username and password to login.</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">
Show password
</label>
</div>
<p>
<button type="submit">Log In</button>
</p>
</form>
<script>
var pwd = document.querySelector('#password');
console.log(pwd);
var showPwd = document.querySelector('#show-password');
if(pwd) {
showPwd.addEventListener('click', function(event){
console.log(event);
console.log(event.target);
console.log(pwd.value);
if(showPwd.checked) {
password.type = 'text';
} else {
password.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.