The counted numbers can be seen in a small display. If you want you can put a limit in that input box. Earlier I shared a tutorial that has a limit on character input.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
A box has been created on a web page as you saw above. The background color of this box is white. First of all, a heading has been used in the box which is basically to enhance the beauty.
Then the character input space is created using textarea. Below all is a small box in which the amount of character can be seen. When you input something into the input box, the amount of that input will count.
Step 1: Basic structure of Character Counter
I designed the web page using the following codes. Here I have used blue as the background color of the webpage.
Character counter width: 500px and height will depend on the amount of content. I used white as the background color and box-shadow to make it more attractive.
Step 2: Add a heading
Now I have used headings in this project. I used the h2 tag of HTML to make the headings. The background color is blue and the text is white.
Step 3: Create an input box using textarea
Now we have created an input box using textarea. I have used the height of this texture: 200px and a shadow has been used around it.
Step 4: Place to see the result of character count
Has now created a text and a small display. Counted numbers can be seen in this display. The following HTML and CSS are used to create that.
I have used CSS below to design the text. Font-size: 1.25rem and color black have been used to increase the size of the text.
Now I have designed the display. The width of the display: 40px, height: 40px and a shadow has been used all around.
👉 First I collected the value of the input box or textarea and stored it in a constant called ‘text’.
👉 Then I calculated the length of the value in the textarea and transmitted it to a constant called ‘textLength’. This length is the number of total characters in the input box.