Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Created January 16, 2019 19:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cferdinandi/36a9576625cae049a9ebe7e01d60d2db to your computer and use it in GitHub Desktop.
Save cferdinandi/36a9576625cae049a9ebe7e01d60d2db to your computer and use it in GitHub Desktop.
Toggle password visibility project template from https://learnvanillajs.com.

Project Details

Write a script that can be used to toggle the visibility of password fields.

Considerations

  • What will users interact with to change the password field visibility (ex. a button or a checkbox)?
  • If users wanted to toggle the visibility of multiple password fields in a form, how could they do that?

Need help?

This project is part of the Vanilla JS Academy.

<!DOCTYPE html>
<html>
<head>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Password Visibility</h1>
<form>
<div>
<label for="username">Username</label><br>
<input type="text" name="username" id="username">
</div>
<br>
<div>
<label for="password">Password</label><br>
<input type="password" name="password" id="password">
</div>
<br>
<button>Submit</button>
</form>
<script>
// Project code...
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment