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โ
- Open the Word counter html file in your browser:
exercises/word-counter/index.html
- 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 to open up cypress.
npm run cypress:open
- 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.- 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โ
- check out
exercises/word-counter/index.html
file, and identify the elements of interest (textarea, and stats section) and their associated selectors. - in the
exercises/word-counter/app.js
file, create 2 constants with references to the password input and the reveal button from the DOM. - Create an Event Listener on the textarea input
- The event handler should update the stats section with the number of words and characters in the textarea input.
- You will need to utilize the split method to get the words count.