How to Create a Word Counter in JavaScript

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 a document or to track whether you are meeting a word count limit.

You can create your own word counter using HTML, CSS, and JavaScript. Open your word counter in a web browser, enter your text into an input field, and see how many words you are using.

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

How to Create the UI for the Word Counter

To create the UI for the word counter, add a text area input to a basic HTML page. This is where you can enter the sentence or paragraph that you would like to count the words for.

Create a new HTML file called "index.html".

Inside the file, add the basic structure for an HTML webpage:

        <!doctype html>
<html lang="en-US">
  <head>
    <title> Word Counter </title>
  </head>
  <body>
    <div class="container">
      <h1> Count Words </h1>
    </div>
  </body>
</html>

Inside the container div and underneath the heading, add a text area:

        <textarea id="input" rows="10"></textarea>

Underneath the text area, add a button:

        <button id="count-button">Count Words</button>

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

        <div>
    Words: <span id="word-count-result">0</span>
</div>

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

Populate the CSS file with some CSS to style your webpage:

        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;
}

Link the CSS file to your HTML file by including a link tag inside the HTML head tag:
```
        <link rel="stylesheet" href="styles.css"> 
    
```
To test the UI of the webpage, click on the "index.html" file to open it in a web browser.

How to Count Each Word Inside the Textarea

When a user enters a sentence into the text area, the webpage should count each word when they click on the Count Words button.

You can add this functionality inside a new JavaScript file. If you need to, revise other beginner JavaScript project ideas if you need to brush up on your JavaScript knowledge.

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

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

        <body>
    <!-- Your code here -->
    <script src="script.js"></script>
</body>

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

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

Add a click event listener. This function will execute when the user clicks on the Count Words button:
```
        button.addEventListener("click", function() {

});
    
```
Inside the click event listener, get the value that the user entered into the textarea. You can find this value in the input variable, which stores the textarea HTML element.
```
        let str = input.value;
    
```
Use the split() function to separate the string into separate words. This will occur whenever there is a space in the string. This will store each word as an element of a new array. For example, if the sentence entered was "I love dogs", the resulting array would be ["I", "love", "dogs"].
```
        let wordsList = str.split(" ");
    
```

Find the word count by using the length of the array:

        let count = wordsList.length;

To display the result back to the user, change the content of the span HTML element to display the new value:
```
        wordCountResult.innerHTML = count; 
    
```

How to Use the Example Word Counter

You can test your word counter webpage using a web browser.

Open index.html in any web browser.
Enter a sentence or paragraph into the text area:
Click on the Count Words button to update the word count. This will display the word count, just like if you checked the word count on Google Docs, Microsoft Word, or any other editor with a word count.

Creating Simple Applications Using JavaScript

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