Live Characters and Words Counter using JavaScript HTML and CSS

Hello Coders, In this JavaScript Project tutorial we are going to learn how to create live characters and words counter with JavaScript.

I have seen many websites in the Internet where we can paste our article or type and then it shows how many characters and words we have written. It is going to be very fun while building this project. I personally love this project.

I have provided both step by step video tutorial as well as complete source code to help you build this mini project.

Live Characters and Words Counter with JavaScript | Video Tutorial

Watch this step by step video tutorial to build this JavaScript Project. I have explained everything in the video to make it more easy for you.

You may also like :

Live Characters and Words Counter with JavaScript | Source Code

I have provided all the HTML CSS and JavaScript Source codes below and you can also download the complete source code by clicking on the download button at the bottom of this article.

How do I build Characters and Words Counter in HTML?
Create an index.html file and copy the below codes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Characters & Words Counter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="counters">
        <div class="charactersCounter">
          <span>Characters</span>
          <div id="cCount">0</div>
        </div>

        <div class="wordsCounter">
          <span>Words</span>
          <div id="wCount">0</div>
        </div>
      </div>
      <textarea id="content" cols="30" rows="10">

How do I design Characters and Words Counter in CSS?
Create an styles.css file and copy the below codes.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background: linear-gradient(to right, #96deda, #50c9c3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
}

.container {
  width: 500px;
  height: 550px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.counters {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

span {
  font-size: 15px;
  color: gray;
}

.charactersCounter,
.wordsCounter {
  width: 90px;
  height: 90px;
  background-color: #fff;
  padding: 30px;
  font-size: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

textarea {
  color: black;
  width: 90%;
  height: 50%;
  font-size: 20px;
  padding: 15px;
  outline: none;
  resize: none;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

How do I create Character and Words Counter in JavaScript?
Create an script.js file and copy the below codes.

const textarea = document.getElementById('content');
const characterCount = document.getElementById('cCount');
const wordsCount = document.getElementById('wCount');

textarea.oninput = () => {
  let characters = textarea.value;
  characterCount.textContent = characters.replace(/\s/g, '').length;

  let words = textarea.value.split(' ').filter((item) => {
    return item != '';
  });
  wordsCount.textContent = words.length;
};

This is what you will have once you build this project.

Download Code Files

Future Coders

Facebook SDK

Post a Comment

Post a Comment

Build Responsive Netflix Clone with HTML and CSS | Step by Step Tutorial

Contact Form

Facebook SDK

Live Characters and Words Counter using JavaScript HTML and CSS

You might like

Post a Comment

Post a Comment

Contact Form