Tiny Project III: Text Counter

Your Ultimate Text Analysis Tool

Photo by Scott Graham on Unsplash

What’s “Text Counter”?

Text Counter is a Chrome extension designed for writers, editors, students, and professionals to provide comprehensive text analysis directly within their browser.

With the Text Counter extension, you’ll be able to count the number of characters, words, paragraphs, sentences, lines, spaces, reading time, and speaking time of any text and get the results instantly.

Features

• Character Count: Instantly see the total number of characters in your text.
• Word Count: Get an accurate count of all words to meet your writing requirements.
• Paragraph Count: Easily identify the number of paragraphs for better text structure.
• Sentence Count: Know the exact number of sentences to refine your writing style.
• Line Count: Count the number of lines to ensure proper formatting.
• Space Count: Track the number of spaces for precise text editing.
• Reading Time: Estimate the reading time of your text to ensure it’s reader-friendly.
• Speaking Time: Calculate the speaking time for presentations and speeches.

How It Works

• Paste Your Text: Simply paste your text into the provided text area.
• Instant Analysis: The extension immediately analyses your text and displays the counts for characters, words, paragraphs, sentences, lines, spaces, reading time, and speaking time.

Target Audience

• Writers & Editors: Perfect for authors, bloggers, and editors who need precise text metrics.
• Students & Academics: Helps students meet word limits and improve essay structure.
• Professionals: Useful for preparing and optimizing reports, social media posts, headlines, ads/sales copy, email subject lines, presentations, and speeches.

Why Build It?

If you’re a social media manager or someone who actively shares brand posts online, you’ll be familiar with character limits for posts on social media platforms. In the early stages of Fidia, Fashy, Sharpsend, and others, whenever I wanted to post on Twitter, I used a free tool to check if my posts didn’t exceed the character limits, ensuring they fit into a single post. If the post exceeded the limit, I rephrased them to make it shorter and more concise, whether for a single tweet or a thread.

There were also times in the past when I wrote tutorials and courses for some platforms that had a target on the number of words I needed to meet. To ensure I didn’t go below the target, I always tried to find tools I could use to count the number of words, sentences, characters, paragraphs, etc., and I do end up copying and pasting all the content into Google Docs to use their counting toolbar.

So, I decided to build my own tool now that I can use whenever I want, and I’m sharing it publicly for others to enjoy as part of the tiny projects I’m building.

Design

The UI design process was simple and straightforward.

Text Counter — Empty State UI

I added a text area input field where you can paste the texts you want to count, and it can immediately calculate the values for the number of characters, sentences, words, lines, paragraphs, spaces, and the reading and speaking time of the texts you pasted.

Text Counter — Filled State UI

Development

I used HTML, CSS, and JavaScript like the previous ones I built.

The development went smoothly, and I didn’t encounter any issues.

I also found out about how to calculate the speaking and reading time of any texts using their average speed, which seemed to be what most text editor libraries are using.

File Directory

This is how the project directory or folder looks in VS Code.

textcounter/
  ├── icons/
  ├── manifest.json
  ├── popup.html
  ├── script.js
  └── style.css

Code Snippets

These are some of the snippets for the code that’s making the Text Counter extension work.

HTML

Text area for inputting texts you want to count.

<textarea id="textInput" placeholder="Paste texts here..."></textarea>

Container for the grid of results/statistics boxes, which includes the titles and their values.

        <div class="grid">
            <div class="box">
                <!-- Title of the stat -->
                <div class="title">Characters</div>
                <!-- Value of the stat -->
                <div class="value" id="charCount">0</div>
            </div>
            <div class="box">
                <div class="title">Words</div>
                <div class="value" id="wordCount">0</div>
            </div>
            <div class="box">
                <div class="title">Paragraphs</div>
                <div class="value" id="paragraphCount">0</div>
            </div>
            <div class="box">
                <div class="title">Sentences</div>
                <div class="value" id="sentenceCount">0</div>
            </div>
            <div class="box">
                <div class="title">Lines</div>
                <div class="value" id="lineCount">0</div>
            </div>
            <div class="box">
                <div class="title">Spaces</div>
                <div class="value" id="spaceCount">0</div>
            </div>
            <div class="box">
                <div class="title">Reading Time</div>
                <div class="value" id="readingTime">0</div>
            </div>
            <div class="box">
                <div class="title">Speaking Time</div>
                <div class="value" id="speakingTime">0</div>
            </div>
        </div>

CSS

I reused what I learned previously to add an outline to the text area on focus.

textarea:focus {
    outline: 2px solid #0F172A;
}

JavaScript

Get the current value of the text area.

const text = this.value;

Count the texts based on the predefined stat titles.

// Count the number of characters
const charCount = text.length;  
// Count the number of words (split by whitespace)
const wordCount = text.trim().split(/\s+/).length;  
// Count the number of paragraphs (split by double newlines)
const paragraphCount = text.split(/\n\n+/).length; 
// Count the number of sentences (split by sentence-ending punctuation) 
const sentenceCount = text.split(/[.!?]+/).length - 1; 
// Count the number of lines (split by newlines) 
const lineCount = text.split(/\n/).length;  
// Count the number of spaces
const spaceCount = text.split(' ').length - 1;  

Calculate the reading and speaking time in seconds. The average reading time is 200 words per minute, while the average speaking time is 130 words per minute. Source: Trust me, bro.

const readingTimeSeconds = wordCount / (200 / 60);
const speakingTimeSeconds = wordCount / (130 / 60);

Convert to minutes and seconds.

// Whole minutes of reading time
const readingTime = Math.floor(readingTimeSeconds / 60);  
// Remaining seconds of reading time
const readingTimeRemainder = Math.ceil(readingTimeSeconds % 60);  
// Whole minutes of speaking time
const speakingTime = Math.floor(speakingTimeSeconds / 60);  
// Remaining seconds of speaking time
const speakingTimeRemainder = Math.ceil(speakingTimeSeconds % 60);  

Format reading time.

  let readingTimeFormatted = '';
  if (readingTime > 0) {
      readingTimeFormatted = `${readingTime} min${readingTime > 1 ? 's' : ''} `;
  }
  if (readingTimeRemainder > 0) {
      readingTimeFormatted += `${readingTimeRemainder} sec${readingTimeRemainder > 1 ? 's' : ''}`;
  }

Format speaking time.

  let speakingTimeFormatted = '';
  if (speakingTime > 0) {
      speakingTimeFormatted = `${speakingTime} min${speakingTime > 1 ? 's' : ''} `;
  }
  if (speakingTimeRemainder > 0) {
      speakingTimeFormatted += `${speakingTimeRemainder} sec${speakingTimeRemainder > 1 ? 's' : ''}`;
  }

Update the UI with the calculated values to display them to the users.

document.getElementById('charCount').innerText = charCount;
document.getElementById('wordCount').innerText = wordCount;
document.getElementById('paragraphCount').innerText = paragraphCount;
document.getElementById('sentenceCount').innerText = sentenceCount;
document.getElementById('lineCount').innerText = lineCount;
document.getElementById('spaceCount').innerText = spaceCount;
// Update with formatted reading time
document.getElementById('readingTime').innerText = readingTimeFormatted;
// Update with formatted speaking time  
document.getElementById('speakingTime').innerText = speakingTimeFormatted;  

Manifest JSON File

This is what the manifest.json file looks like.

{
    "manifest_version": 3,
    "name": "Text Counter",
    "version": "1.0",
    "description": "Your Ultimate Text Analysis Tool",
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": [],
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

Publishing and Installations

I zipped the project folder, filled out the required forms, and submitted Text Counter for review.

It has been published publicly, so you can install Text Counter today and add it to your Chrome browser to enhance your text editing experience.

If you’re using other browsers that support Chrome extensions, you can install Text Counter on Chrome and import it into the browser you frequently use.

Demo

I recorded a short video to show how Text Counter works.

Text Counter — Demo

Text Counter processes all data locally on your device. It does not collect, store, or share any personal data.

Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.