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.
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:
<title> Phrase Counter </title>
<h1> Rely Phrases </h1>
- 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:
Phrases: <span id="word-count-result">0</span>
- 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:
font-family: "Arial", sans-serif;
padding: 100px 25%;
- 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.
- In the identical folder as your “index.html” and “kinds.css” information, add a brand new file referred to as “script.js”.
- 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.
Leave a Reply