Character Count Using HTML CSS And JAVASCRIPT( Source Code)

Character Count Using HTML CSS And JAVASCRIPT( Source Code)

Character count is basically a thing in which it counts the words which you write in the textbox. For example you have seen in Microsoft Word in the bottom-left corner it counts the word that you write.

Here we are going to create a character count which will count each and every word which will be entered. To make this project you all need to have knowledge of HTML5, CSS3 & basic of JavaScript because it will make our project responsive and one of the important part of your project. I hope you understand what we are going to build.

HTML Code for Character Count:

<div id="container">
  <h1 id="title">Count Your Characters</h1>
  <textarea id="textbox" cols="80" rows="15"></textarea>
  <p id="charCount">Character Count: <span id="count">0</span></p>
</div>

This a very small code of HTML in which we have given the title. Added a text area with some specific length of rows ad column. And defined a p tag which is labelled as Character Count and a span tag with the id of count which will use further.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

CSS Code for Character Count:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 10px solid #0065a3;
  background: hsla(203, 100%, 78%, 1);
}

#title {
  margin-bottom: 20px;
  color: #0065a3;
}

#textbox {
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: 0.8px;
  padding: 10px;
}

#charCount {
  font-size: 20px;
  color: #0065a3;
  font-weight: bold;
}

In the styling part we have styled the tags and id which were mentioned in HTML Code. Basically, we have just set the font size, font weight, margin, border, align-items etc.

So the structure is created styling has done now to make responsive we have to write the script in Java Language.

JavaScript Code for Character Count:

let textbox = document.getElementById("textbox");
let count = document.getElementById("count");

function updateCount() {
  count.innerHTML = textbox.value.length;
}

textbox.oninput = updateCount;

As I told you earlier you just need basic knowledge of JavaScript because this project is best for beginners and who are learning front-end development from scratch. In this script we have named the textbox and count in document.getElementById Now our motto is to create a count and for that the label Character Count should update as we enter the character.

So for that we have script the function updatecount() in which it increase the count as soon as we enter the character. Now the programming is done. We can see the Output of it.

FINAL OUTPUT of Character Count:

We have Successfully created our How to Make Character Count using HTML5, CSS3 & JS (Source Code) | JavaScript Character Count You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

WRITTEN BY – Harsh Sawant

Code By – ultraviolet-coder

Share on:

Leave a Comment