Skip to main content

Word Counter

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

  .
  ├── exercises
  │   ..
  │   ├── word counter
--│   │   ├── app.js  ⬅️
--│   │   ├── index.html  ⬅️
  │   │   └── style.css
  │   └── ..
  ..

Overview​

  1. Open the Word counter html file in your browser: exercises/word-counter/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. Type something in the textarea; notice how the word counter doesn't update values accordingly.
    • You'll need to provide the correct implementation for the word counter to function properly.

Automated Tests​

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

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/word-counter/index.html file, and identify the elements of interest (textarea, and stats section) and their associated selectors.
  2. in the exercises/word-counter/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.