Basically, this design will count the number of characters, each character you write in this box will count with space. I used a small amount of HTML and CSS code to create the box and design the background.
As you can see, I made a rectangular box here. When you type something in that box, it will count live. The counted results can be seen through a small box below.
In the background of this box, I have used white color and added a blue border all around to enhance the beauty. Follow the tutorial below to make this design. In this case, first of all, let me say that I have used the bootstrap CDN link. Be sure to add a link to these two in the head section of your HTML file.
Step 1: Design the background of the word counter
First of all, you create HTML and CSS files. Then copy the following HTML structure and add it to your HTML file.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
/* CSS Code */
Using the CSS code below I basically designed this word counter in the background.
font: 1rem/1.5 Helvetica, sans-serif;
padding: 4.3em 0;
background-color: rgb(197, 197, 197);
margin: 0 auto;
Step 2: Create word input space and count box
The following HTML code is used to create a word typing box. First of all, I have created a box here using Textarea in which you can add or type text. There is also a box to count the characters and a button to submit.
<form method=”POST” action=”#”>
<textarea id=”countfield” data-count-limit=”140″ rows=”3″></textarea>
<p id=”countlabel” class=”label right countunder”><span id=”countnumber”>0</span> characters</p>
<input type=”submit” value=”Submit”>
CSS code basically helps to design all the HTML codes added above. First of all, I have given a certain size of this Textarea. Its height is 200 px and I have used a blue border of 4 px.
I used the background of the submit button # 3B94D9 and used font-size: 1.125rem. If you watch the demo, you will understand that I have made a small box to show the counted words. I used a 2px border around it and kept the background white.
border: 4px solid #3B94D9;
margin: 0 0 0.694em;
padding: 0.694rem 2.074rem;
transition: opacity 0.2s linear;
margin: 0 0 1.44rem;
border: 2px solid rgb(21, 122, 238);
var countField = document.getElementById(‘countfield’);
var countLabel = document.getElementById(‘countlabel’);
var countNum = document.getElementById(‘countnumber’);
var limit = Number(this.getAttribute(‘data-count-limit’));
var text = this.value;
countNum.textContent = text.length;
countField.addEventListener(‘keyup’, _handleKeyUp, false);