A word counter is a tool that you can use to count the number of words in a piece of text. You can use it to check the length of your document or to keep track of whether you're meeting the word limit.

You can create your own word counter using HTML, CSS, and JavaScript. Open the word counter in your web browser, enter your text in the input field and see how many words you've written.

This project can also be useful in helping you practice and strengthen your JavaScript knowledge.

How to create a user interface for a word counter

To create a user interface for the word counter, add a textarea input to the basic HTML page. This is where you can enter the sentence or paragraph for which you want the word count.

1. Create a new HTML file named "index.html".

2. Inside the file, add the basic structure for the HTML website:

         Word Counter                  

Count Words

3. Inside the container div and below the heading, add a textarea:

4. Below the textarea, add a button:

Count Words

5. Add a span tag to display the word count when the user clicks on the button above:

     Words: 0 

6. In the same folder as your HTML file, create a new file named "styles.css".

7. Fill in the CSS file to style your website:

body {   margin: 0;   padding: 0;   background-color: #f0fcfc; } * {   font-family: "Arial", sans-serif; } .container {   padding: 100px 25%;   display: flex;   flex-direction: column;   line-height: 2rem;   font-size: 1.2rem;   color: #202C39; } textarea {   padding: 20px;   font-size: 1rem;   margin-bottom: 40px; } button {   padding: 10px;   margin-bottom: 40px; } 

8. Link the CSS file to the HTML file by including the link tag inside the HTML head tag:

9. To test the website's user interface, click on the "index.html" file to open it in a web browser.

How to count each word in a text area

When a user types a sentence into the text area, the website counts each word as they click the Count Words button. You can add this functionality inside a new JavaScript file.

1. In the same folder as the "index.html" and "styles.css" files , add a new file named "script.js".

2. Link the HTML file to your JavaScript file by adding a script tag at the end of the body tag:

3. Inside script.js, use the getElementById() function to retrieve the textarea, button, and span HTML elements. Store these elements into 3 separate variables:

let input = document.getElementById("input"); let button = document.getElementById("count-button"); let wordCountResult = document.getElementById("word-count-result");

4. Add a click event handler. This function will execute when the user clicks the Count Words button :

button.addEventListener("click", function() { });

5. Inside the click event handler, get the value the user entered in the text area. You can find this value in the input variable, which stores the HTML textarea element.

let str = input.value;

6. Use the split() function to split the string into separate words. This will happen whenever there are spaces in the string. This will store each word as an element of a new array. For example, if the entered sentence is "I love dogs", the resulting array will be ["I", "love", "dogs"].

let wordsList = str.split(" ");

7. Find the number of words using the length of the array:

let count = wordsList.length;

8. To display the results again to the user, change the content of the span HTML element to display the new value:

wordCountResult.innerHTML = count; 

How to use sample word counter

You can check your word counter using a web browser.

1. Open index.html in any web browser.

2. Enter a sentence or paragraph into the text area:

3. Click the Count Words button to update the word count. This will display the word count, just like when you check the word count on Google Docs, Microsoft Word, or any other editor with a word count function.

Now you hopefully have a basic understanding of how to use JavaScript to count words and interact with elements on an HTML page. To improve your programming understanding, keep creating useful small projects using JavaScript.

Lesley Montoya

Update 16 October 2023