A lot of times we show character limits or word limits in different input boxes. For example, in the case of Twitter, there is a character limit.
Although I have shared a tutorial before where I have shown how to create a character limit input box. This tutorial will show you how to count words and characters. That means you will see both a project word and a character.
As you can see above, I used the background-color blue of a webpage. I made a box on top of it. At the top of the box is a display. This display is divided into two parts.
In the first part, you can see the information of Word Counter. In the second part, the information of the character counter can be seen. These values will change when I change something in the input box.
1. Basic structure of Word Counter
The basic structure of this word counter has been created using the following code. The background color of the webpage is blue.
2. Word Counter Result Box
Now I have created a display in which all the results can be seen. As I said before, this display is divided into two parts. To see the result of one-word count and to see the result of another character.
3. Create an input box using Textarea
Now an input space has been created. This input space has been created using Textarea.
The box is designed with the following CSS in which the Textarea can be seen. The background color of the box is white and padding has been used to adjust its size.
The following code is designed for Textarea. Input box width: 100% used here. This allows us to input across almost all areas. Max-height: 280px of the input box is used here and a shadow is used all around.
In this code section, I have put all the code together. There are many beginners who cannot assemble all the codes together.