word counter in JavaScript with free source code

This project checks the number of words you type in the text box; it also checks the total number of characters, total number of sentences, and paragraphs.

Oct 8, 2022 - 10:57 Updated: Oct 8, 2022 - 10:59

0 240

word counter in JavaScript

word counter in JavaScript with free source code

Table of content

About word counter in JavaScript with free source code
Features of the word counter in JavaScript with free source code
Project info
Requirements
Step by step to create a word counter in JavaScript
How to download and extract the source code
Screenshot

About word counter in JavaScript

The project named Word counter in JavaScript with free source code is a web app word counter which is created using JavaScript and HTML and CSS as the project frontend. This project is responsive and the interface is user friendly.

This project checks the number of words you type in the text box; it also checks the total number of characters, total number of sentences, and paragraphs. It does this calculation immediately you type in the word or paste the word.

You can edit the code and learn some new things using your code editor, as this project is provided for educational purposes only. This project script includes code comments for you to easily understand. You can see the image below.

Features of the word counter in JavaScript

This project has a very good interface.
Easy code Documentation.
Counts words correctly.
Counts characters.
Counts sentences.
Counts paragraph.
Resizable text area field to see more hidden texts.

Project Info

Projects information below:


Written in	JAVASCRIPT
Frontend	HTML, CSS
Includes	README file
Type	web app
Functionality	JAVASCRIPT
Download type	Zip file
Download size	5kb

Requirements

Browser (Chrome or any other browser).
Code Editor (Visual studio code, etc).

Step by step to create a word counter in JavaScript

Open a new folder to store created files.
Open your code/text editor (VS code, notepad++).
Create a file named index.html and store inside the folder we created in step1.

Copy the HTML code below and paste into the index.html.

INDEX.HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <title>Word Counter</title>
</head>
<body>
    <div >
        <h2><a href="https://alphacodecamp.com.ng" target="_blank">Word Counter</a> </h2>
        <textarea placeholder="Input your text..."></textarea>
        <div class="output row">
          <div>Characters: <span id="characterCount">0</span></div>
          <div>Words: <span id="wordCount">0</span></div>
          <div>Sentences: <span id="sentenceCount">0</span></div>
          <div>Paragraphs: <span id="paragraphCount">0</span></div>
        </div>
      </div>
     
      <script src="script.js"></script>
</body>
</html>

Create another CSS file called style.css

Copy the CSS code below and paste it into the style.css file.

STYLE.CSS

body {
  color: #000032;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
            text-align: center; 
}

h2 a{
  text-align: center;  
  text-decoration: none;
}

textarea {
  width: 700px;
  height: 200px; 
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  outline: none;
  font-size: 1rem;
  box-shadow:1px 0px 10px #000032ce;
  padding:50px 20px;
  resize: vertical;
}

textarea:hover {
  border-color: #c0c0c0;
}

textarea:focus {
  border-color: #4d90fe;
}
textarea::placeholder {
  font-size: 20px;

}

.output.row {
  padding: 80px;
  font-size: 1.3rem;
}

.output.row div {
  text-align: center;
}

Create another JavaScript file called script.js.

Copy the JavaScript code below and paste into the script.js file. This is the main language used in this project which gives it its functionality.

SCRIPT.JS

// JavaScript code
var input = document.querySelectorAll('textarea')[0],
  characterCount = document.querySelector('#characterCount'),
  wordCount = document.querySelector('#wordCount'),
  sentenceCount = document.querySelector('#sentenceCount'),
  paragraphCount = document.querySelector('#paragraphCount');

input.addEventListener('keyup', function() {

  
  console.clear();

  characterCount.innerHTML = input.value.length;

  var words = input.value.match(/\b[-?(\w+)?]+\b/gi);
 
  if (words) {
    wordCount.innerHTML = words.length;
  } else {
    wordCount.innerHTML = 0;
  }
  if (words) {
    var sentences = input.value.split(/[.|!|?]+/g);
    console.log(sentences);
    sentenceCount.innerHTML = sentences.length - 1;
  } else {
    sentenceCount.innerHTML = 0;
  }


  if (words) {
    var paragraphs = input.value.replace(/\n$/gm, '').split(/\n/);
    paragraphCount.innerHTML = paragraphs.length;
  } else {
    paragraphCount.innerHTML = 0;
  }
});

Save the code (ctrl + s).
When done, open any of your browsers and open the html file or double click on the index.html file and it will open. You will get a screen like the one in the image below. You can edit the code. This project is for educational purposes only.
Note: comments are included in the zipped file.

How to download and Extract source code

The zipped source code is attached below this post.
1. Scroll down to the attached zipped file.
2. Click on it once to start downloading; this will prompt its download.
3. Go to your downloads folder in your pc
4. Extract/unzip the script folder.
5. After extracting run the index.html file. It will open in your browser.
6. You can edit in code editor.