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
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

1. To run this part's automated test, you'll need to run the following command to open up cypress. npm run cypress:open
2. You should be presented with multiple tests and checks, choose the password-reveal one, and automated test should run (and fail) in the embedded browser.
   1. notice how every time you make a change to the web page or its associated files, the test will re-run.

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.