Password Reveal

The marked file is the file you'll be using in the part of the assignment.

  .
  ├── exercises
  │   ..
  │   ├── password-reveal
--│   │   ├── app.js  ⬅️
--│   │   ├── index.html  ⬅️
  │   │   └── style.css
  │   └── ..
  ..

Overview

1. Open the Password Reveal html file in your browser: exercises/password-reveal/index.html
   • 🦉: Use Visual Studio Code's Live Server extension to open the file in your browser with live reloading.
   • 🦉: You can also run npm start to start a local server.
2. You should see a login screen. (This is a mock screen - it's not connected to any service)
   1. The password field has a toggle button (closed eye icon). When clicking the toggle, you should be able to see the input of the password field.

Automated Tests

To run this part's automated test, you'll need to run the following command npm run test:e2e:password

The goal in this assignment is to select the and manipulate the correct DOM elements to pass this automated test.

Instructions

1. check out exercises/password-reveal/index.html file, and identify the elements of interest (password field, and toggle button) and their associated selectors.
2. in the exercises/password-reveal/app.js file, create 2 constants with references to the password input and the reveal button from the DOM.
3. Create an Event Listener on the password reveal button
4. The event listener should toggle the password field attribute between password and text to change the visibility of the password field content.