In this blog, we find out the word and letter count of your text
Let’s create a generator using JavaScript.
Live Example:-
Table of Contents
Online Character & Word Count Generator
0 words | 0 characters.
Character Counter can be a 100% free online character count calculator that is easy to use. In general, users prefer simplicity over all the extended writing data provided by Word Counter, and what this tool offers can be special. It shows the counting of letters and the counting of words which are usually the only data that a person has an idea of his writing. Best of all, you get the data you need at lightning speed.
To find word and letter counts in your text, simply call and paste the text or type directly into the text space. Once completed, the free tool online tool can show each count of the text entered. This will be helpful in many cases, however, it can be especially useful after you specify a unit writing area minimum or a limit for the item.
Character and word limit areas are fairly common on the net these days. What most individuals skeptically note for the unit is that there is a limit of one hundred and forty characters for tweets on Twitter, however, the character limit is not limited to Twitter. There are unit limitations of text messages (SMS), Yelp reviews, Facebook posts, Pinterest PINs, Reddit titles and comments, eBay titles, and descriptions. Knowing these limits, in addition to having the ability to check as you approach them, you can improve yourself to set mandatory limits.
For students, their area unit is sometimes limited or minimal for school work assignments. Also for faculty applications in general. This will have a lasting significant effect however this writing is hierarchical and reviewed, and it shows if you can follow the basic directions. The character counter will certify that you will not accidentally re-evaluate the limit or fail to meet the minimum which may be detrimental to those assignments.
This data can be very useful for writers. Knowing the number of words and letters will make it easier for writers to understand the length of their writing, and will work to show the pages of their writing in a very specific approach. For those who write for magazines and newspapers where there is a restricted building, knowing these calculations will allow the author to get leading data in that restricted building.
For job seekers, it’s important to know the number of characters in your resume so you can inspire all the data you need on the page. You will be fooled with totally different fonts, their size, and spacing to control the number of characters on the page, however, it is important to understand the amount you are trying to adapt to the page.
Character counters are not just for English. This tool can be useful for people writing in a non-English language where letter counting is very important. This will be for Japanese, Korean, Chinese, and many others where the area of letters is the unit of thought of written communication. Even for those who do not write in English, knowing the alphabet of writing is usually helpful for writing.
Online Character & Word Count Generator Codepen
See the Pen Online Character & Word Count Generator by khushal (@mr__khushal) on CodePen.
How to Create Character & Word Count Generator?
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!------create by Myprograming.com----->
<title> Character & Word Count Generator </title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="main">
<h1>Online Character & Word Count Generator</h1>
<textarea cols="100" rows="20" id="word-count-input" placeholder="Enter Your Character "></textarea>
<h2><strong><span id="word-count">0</span> words</strong> | <strong><span id="character-count">0</span> characters</strong>.</h2>
</div>
<script src="demo.js"></script>
</body>
</html>
Step2:- Create demo.css File.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.main{
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
margin-top: 20px;
border-radius: 15px;
}
.main
textarea{
background-image: url('http://www.myprograming.com/wp-content/uploads/2021/10/colorfull-background.jpg');
background-size: cover;
border-radius: 5px;
padding: 10px;
}
.main
textarea::placeholder{
font-size: 18px;
}
Step3:- Create Demo.js File.
var countGenerator = document.querySelector("#word-count-input");
var wordCount = document.querySelector("#word-count");
var characterCount = document.querySelector("#character-count");
var count = function () {
var characters = countGenerator.value;
var characterLength = characters.length;
var words = characters.split(/[\n\r\s]+/g).filter(function (word) {
return word.length > 0;
});
/*** alert( "word "+ words.length +" character "+ characterLength );***/
wordCount.innerHTML = words.length;
characterCount.innerHTML = characterLength;
};
count();
window.addEventListener(
"input",
function (event) {
if (event.target.matches("#word-count-input")) {
count();
}
},
false
);
Great keep posting ???