Character Count Using HTML CSS And JAVASCRIPT( Source Code)

Coders, hello! To measure the characters in the text box, we will build a Character Counter in this article. It essentially counts the words you type in the textbox when you use a character counter. It's basically a character counter which is created using the javascript concepts as the user starts writing the counter and starts counting the number of character

We'll construct a character counter in this part that keeps track of each word entered. These technologies will be used to make our project responsive, which is an essential part of your project. I trust you can see the effect we're aiming for. This type of project helps on a website where each character is important and where we have a limit of characters.

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.

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;
}

Step1: Using the universal selector (*). We'll set the padding and margin to "zero," use the box-sizing property "border-box," and set the font family to "sans-serif."

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

Step2: We will style the textbox container by using the id identifier (#container). We'll assign the dimensions to 100vw for width and 100vh for height. We'll change the display to "flex" using the display property. We'll also give our blue container a border of 10 pixels, and we'll use the background property to change the background to "light blue."

#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);
}

Step3: As of right now, the header and textbox will both get some styling. Inside the textbox, we will increase the margin, font height, and letter spacing. We additionally included a 10 pixel padding using the padding attribute.

#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;
}

So now that the structure and styling are complete, we must write the script in Javasscript to make it responsive. 

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.

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.

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

Comments

[Shan Roy]

Looking for the Best IB schools in Hyderabad? Indus International School Hyderabad provide a world-class learning environment that promotes academic rigor and extracurricular achievements, shaping students into well-rounded global citizens.