Text Counter using JavaScript

Hey, how are you?

Today we will make a mini Javascript Project that will count number of characters, words, lines & special characters present in textarea.

You can watch a short video below:

Text Counter JavaScript Project for beginners

Let’s start making it!

Step 1: HTML

<div class="container">
 <div class="title">Text Counter</div>
 <textarea id="text" placeholder="Type your text here..."></textarea>
 <div class="status">
  <span id="char"></span>
  <span id="words"></span>
  <span id="lines"></span>
  <span id="symbols"></span>
 </div>
</div>

We have a textarea to write text into & we have four span elements for displaying specific counting!

Step 2: CSS

Basic Page styling:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
  background: #a0eeff;
}

Styling container & textarea:

.container {
  width: 20rem;
  margin: auto;
  text-align: center;
  box-shadow: 20px 20px 60px #88cad9, -20px -20px 60px #b8ffff;
  border-radius: 10px;
  position: relative;
}

textarea {
  width: 90%;
  resize: none;
  height: 10rem;
  background: #a0eeff;
  outline: none;
  padding: 1rem 0.6rem;
  margin-bottom: 2rem;
  color: #5c4045;
  font-family: sans-serif;
  font-size: 1rem;
  border: transparent;
}

Let’s finish the styling:

.title {
  text-align: center;
  font-size: 1.2rem;
  background: #45ddff;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}

.status {
  text-align: center;
  padding: 10px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #4c4c4c;
  display: none;
  font-size: 0.8rem;
  border-radius: 0 0 10px 10px;
  background: #45ddff;
  transition: 1s;
}

@media (max-width: 20rem) {
  .container {
    width: 100%;
  }
}

Step 3: Java script

 let stats = document.querySelector('.status');
 let text = document.getElementById('text');
 let char = document.getElementById('char');
 let words = document.getElementById('words');
 let lines = document.getElementById('lines');
 let symbols = document.getElementById('symbols');

 function count() {
    if(text.value.length === 0){ // can be easily done using CSS, check CSS for that
       stats.style.display = "none";
    }

    else{
  
     stats.style.display = "block";
     char.innerHTML = text.value.length + " Characters" 
     words.innerHTML = text.value.trim().split(/\s+/).length + " Words"; 
     lines.innerHTML = text.value.split("\n").length + " Lines"; 
     symbols.innerHTML = text.value.split(/[!@#$%^&*+()_={};:'"<>.,?/-]/).length + " 
  }
 }

 text.addEventListener("input", count);

So, that is it! We have made a text counter. Codepen:

Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: @coding_dev_

Support: https://www.buymeacoffee.com/codingdev