word counter in javascript | word counter html code – codewithrandom

word counter javascript | word counter HTML code 


Welcome🎉 to Code With Random blog in this blog we learn how to create word counter javascript. We use HTML & CSS and javascript for this word counter javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for word counter javascript.

Word counter code — HTML part
 <div class="ui-input-container">  
<h2>Word Count</h2>
<label class="ui-form-input-container">
<textarea class="ui-form-input" id="word-count-input"></textarea>
<span class="form-input-label">Message</span>
<p aria-live="polite"><strong><span id="word-count">0</span> words</strong> | <strong><span id="character-count">0</span> characters</strong>.</p>

There is all HTML code for word counter Now you can see output without CSS then we write CSS for our word counter.

word counter HTML

Word counter code — CSS part

 * {  
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
.ui-input-container {
background-color: #fff;
padding: 3rem;
border-radius: 4px;
width: 50%;
margin: 0 auto;
.ui-input-container h2 {
font-family: sans-serif;
margin-bottom: 20px;
font-weight: 700;
text-transform: capitalize;
.ui-form-input-container {
position: relative;
font-size: 1rem;
margin-bottom: 15px;
display: block;
.ui-form-input {
padding: 13px 15px;
border-radius: 8px;
border: 2px solid #1a73e8;
outline: 0;
width: 100%;
.form-input-label {
position: absolute;
top: -7px;
left: 10px;
color: #1a73e8;
font-size: 0.85rem;
padding-right: 0.33rem;
padding-left: 0.33rem;
background: #fff;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
font-family: sans-serif;
text-transform: capitalize;
.ui-form-btn {
padding: 13px 15px;
border-radius: 8px;
background: #1a73e8;
outline: 0;
width: 100%;
border: none;
cursor: pointer;
font-size: 1rem;
color: white;
font-weight: 500;
.error .ui-form-input,
.error .form-input-label {
border-color: #d50000;
color: #d50000;
textarea {
min-height: 6em;
max-height: 50vh;
width: 100%;

Now we complete our CSS section,  Here is our updated output CSS.

Word counter code CSS

Now add javascript for word count!

word counter code — Javascript part

 var countTarget = document.querySelector("#word-count-input");  
var wordCount = document.querySelector("#word-count");
var characterCount = document.querySelector("#character-count");
var count = function () {
var characters = countTarget.value;
var characterLength = characters.length;
var words = characters.split(/[nrs]+/g).filter(function (word) {
return word.length > 0;
wordCount.innerHTML = words.length;
characterCount.innerHTML = characterLength;
function (event) {
if (event.target.matches("#word-count-input")) {

Now we complete our javascript section,  Here is our updated output with javascriptHope you like this word counter javascript you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

word counter javascript output

word counter javascript | word count javascript | word counter html css javascript code

In this post, we learn how to create a word counter code using javascript with simple coding of HTML & CSS and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

Written by – Code With Random/Anki 
Share on:

Leave a Comment