How to Create a Word Counter in JavaScript

Construct this convenient little instrument for your self and be taught a bit of bit about JavaScript alongside the best way.

Two computer monitors, side-by-side, the one on the left displaying code in an editor

A phrase counter is a instrument that you should utilize to rely the variety of phrases in a bit of textual content. You need to use it to verify the size of a doc or to trace whether or not you’re assembly a phrase rely restrict.

You possibly can create your individual phrase counter utilizing HTML, CSS, and JavaScript. Open your phrase counter in an internet browser, enter your textual content into an enter area, and see what number of phrases you’re utilizing.

This venture can be helpful in serving to you follow and solidify your JavaScript information.

Tips on how to Create the UI for the Phrase Counter

To create the UI for the phrase counter, add a textual content space enter to a fundamental HTML web page. That is the place you’ll be able to enter the sentence or paragraph that you just want to rely the phrases for.

Create a brand new HTML file referred to as “index.html”.

Contained in the file, add the essential construction for an HTML webpage:

 <!doctype html>
<html lang="en-US">
  <head>
    <title> Phrase Counter </title>
  </head>
  <physique>
    <div class="container">
      <h1> Rely Phrases </h1>
    </div>
  </physique>
</html>

Contained in the container div and beneath the heading, add a textual content space:
```
 <textarea id="enter" rows="10"></textarea> 
```

Beneath the textual content space, add a button:

 <button id="count-button">Rely Phrases</button>

Add a span tag to show the phrase rely when the person clicks on the button above:

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

In the identical folder as your HTML file, create a brand new file referred to as “kinds.css”.

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

 physique 
  margin: 0;
  padding: 0;
  background-color: 
* 
  font-family: "Arial", sans-serif;
.container 
  padding: 100px 25%;
  show: flex;
  flex-direction: column;
  line-height: 2rem;
  font-size: 1.2rem;
  shade: 
textarea 
  padding: 20px;
  font-size: 1rem;
  margin-bottom: 40px;
button 
  padding: 10px;
  margin-bottom: 40px;

Hyperlink the CSS file to your HTML file by together with a hyperlink tag contained in the HTML head tag:
```
 <hyperlink rel="stylesheet" href="kinds.css">  
```
To check the UI of the webpage, click on on the “index.html” file to open it in an internet browser.

Tips on how to Rely Every Phrase Contained in the Textarea

When a person enters a sentence into the textual content space, the webpage ought to rely every phrase once they click on on the Rely Phrases button.

You possibly can add this performance inside a brand new JavaScript file. If it’s essential, revise different beginner JavaScript project ideas if it’s essential brush up in your JavaScript information.

In the identical folder as your “index.html” and “kinds.css” information, add a brand new file referred to as “script.js”.
Hyperlink your HTML file to your JavaScript file by including a script tag on the backside of the physique tag:
```
 <physique>
    
    <script src="script.js"></script>
</physique> 
```
Inside script.js, use the getElementById() operate to retrieve the textarea, button, and span HTML components. Retailer these components into three separate variables:
```
 let enter = doc.getElementById("enter");
let button = doc.getElementById("count-button");
let wordCountResult = doc.getElementById("word-count-result"); 
```
Add a click on occasion listener. This operate will execute when the person clicks on the Rely Phrases button:
```
 button.addEventListener("click on", operate() ); 
```
Inside the clicking occasion listener, get the worth that the person entered into the textarea. You’ll find this worth within the enter variable, which shops the textarea HTML aspect.
```
 let str = enter.worth; 
```
Use the break up() operate to separate the string into separate phrases. This may happen each time there’s a area within the string. This may retailer every phrase as a component of a brand new array. For instance, if the sentence entered was “I like canine”, the ensuing array could be [“I”, “love”, “dogs”].
```
 let wordsList = str.break up(" "); 
```
Discover the phrase rely by utilizing the size of the array:
```
 let rely = wordsList.size; 
```
To show the consequence again to the person, change the content material of the span HTML aspect to show the brand new worth:
```
 wordCountResult.innerHTML = rely;  
```

Tips on how to Use the Instance Phrase Counter

You possibly can take a look at your phrase counter webpage utilizing an internet browser.

Open index.html in any internet browser.
Enter a sentence or paragraph into the textual content space:
Click on on the Rely Phrases button to replace the phrase rely. This may show the phrase rely, similar to when you checked the word count on Google Docs, Microsoft Phrase, or some other editor with a phrase rely.

4 Packages for Working With Date and Time in JavaScript – MUO – MakeUseOf

Understanding the Power of Proxy in JavaScript – hackernoon.com

JavaScript vs. TypeScript: What's the difference? – TheServerSide.com

Creating Easy Purposes Utilizing JavaScript

Now you hopefully have a fundamental understanding of tips on how to use JavaScript to rely phrases and work together with components on an HTML web page. To boost your programming understanding, proceed creating small helpful tasks in JavaScript.

Source link