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
  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โ€‹

  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 word-counter 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/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 textarea input
  4. The event handler should update the stats section with the number of words and characters in the textarea input.
  5. You will need to utilize the split method to get the words count.