Word Counter - A JavaScript Lesson

Word Counter is a simple word count application created to introduce students involved in the Technology Committee in CEAS Tribunal to modern JavaScript features mainly introduced in ES6 (ES2015) and onwards.

For the TypeScript version, checkout out Word Counter - A TypeScript Lesson. It acts as a part 2 to this lesson.

Functionality

Primary

The words to count input box will accept sentences and once the count button is pressed, the sentence will be parsed by the spaces in the text while filtering out punctuation (aside from hyphens). Each word of the parsed result will be displayed below along with the word count.

Secondary

The specific word input box will accept any specific word to count in the words to count input box. Instead of displaying the total word count, the count of the specific word will be displayed. The displayed parsed result will still show all of the words in the sentence, however, every occurrence of the specific word will be underlined.

Lesson Outline

1. Using the existing HTML and CSS as a base template, tell the students to try to implement the primary functionality of the word counter with the JavaScript knowledge they currently have. It's not necessary to implement the entire functionality or to account for all of the punctuation. They are encouraged not to edit any of the HTML or CSS.
2. After some time, go over the implementation of the primary functionality using modern JavaScript features (the completed code is available in this repo). The students will follow along to either to refactor their code or to reimplement the functionality.
3. With the knowledge the students have gained, tell the students to implement the secondary functionality of the word counter. They can make use of the word-found class to underline every occurrence of the specific word.
4. Again after some time, go over the implementation of the secondary functionality using modern JavaScript features.