DEV Community: sam khan

How to Build a Word and Character Counter with JavaScript

sam khan — Sun, 27 Sep 2026 10:21:22 +0000

How to Build a Word and Character Counter with JavaScript

Word and character counters are useful in text editors, blogging platforms, social media applications, and content management systems.

In this tutorial, we'll build a simple word and character counter using HTML, CSS, and vanilla JavaScript. Our counter will update instantly as users type, without requiring any external libraries.

1. Create the HTML

First, create an index.html file and add a textarea where users can enter their text.

<div class="container">
  <h1>Word and Character Counter</h1>

  <textarea
    id="textInput"
    placeholder="Start typing here..."
    rows="8"
  ></textarea>

  <div class="stats">
    <p>Words: <span id="wordCount">0</span></p>
    <p>Characters: <span id="charCount">0</span></p>
    <p>Characters without spaces:
      <span id="charNoSpaces">0</span>
    </p>
  </div>
</div>

We'll use JavaScript to update the three counters whenever the text changes.

2. Add Some CSS

Let's give our counter a clean, responsive layout.

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f6fb;
  padding: 30px;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

textarea {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

3. Write the JavaScript

Now let's implement the counting logic.

const textInput = document.getElementById("textInput");

const wordCount = document.getElementById("wordCount");
const charCount = document.getElementById("charCount");
const charNoSpaces = document.getElementById("charNoSpaces");

function updateCounts() {
  const text = textInput.value;

  const words = text.trim()
    ? text.trim().split(/\s+/u).length
    : 0;

  const characters = text.length;

  const withoutSpaces = text.replace(/\s/gu, "").length;

  wordCount.textContent = words;
  charCount.textContent = characters;
  charNoSpaces.textContent = withoutSpaces;
}

textInput.addEventListener("input", updateCounts);

updateCounts();

How does it work?

The input event fires whenever the user changes the textarea's value through typing, pasting, or deleting text.

We use trim() to remove leading and trailing whitespace, then split the remaining text using a regular expression that matches one or more whitespace characters.

The character counter uses JavaScript's length property, while the counter without spaces removes whitespace before calculating the length.

One important detail: JavaScript's length counts UTF-16 code units. Some emoji and other Unicode characters can therefore count as more than one character.

4. Test Your Counter

Try entering the following text:

Hello world! JavaScript is awesome.

The counter should display:

Words: 5
Characters: 35
Characters without spaces: 30

Try pasting longer paragraphs, adding line breaks, and deleting text to make sure everything updates correctly.

5. Try a Text Analysis Tool

Building a counter yourself is a great way to understand JavaScript string manipulation and DOM events.

For everyday writing and content editing, you can also explore TextNivo, a collection of online tools.

I recommend experimenting with your own implementation first, then comparing its results with other text-processing tools.

6. Ideas for Improving the Project

Once your basic counter works, consider adding:

A reading-time estimator.
Sentence and paragraph counting.
A character limit with a visual progress indicator.
A copy-to-clipboard button.
More advanced Unicode-aware character counting.

These features can turn a simple beginner project into a more useful text analysis application.

Final Thoughts

A word counter is a small project, but it teaches several important JavaScript concepts, including DOM manipulation, event listeners, regular expressions, and string processing.

You can build on these fundamentals to create more advanced text editors and writing tools.

What feature would you add to this project next?

10 PHP Best Practices Every Developer Should Know in 2026

sam khan — Sun, 27 Sep 2026 10:06:43 +0000

10 PHP Best Practices Every Developer Should Know in 2026

PHP remains a widely used language for building websites, APIs, content management systems, and web applications. Whether you're working with WordPress, Laravel, or plain PHP, following good development practices makes your code more secure, readable, and maintainable.

In this article, I'll share 10 practical PHP best practices with examples you can apply to your next project.

1. Use Strict Types

PHP supports type declarations that help make your code more predictable.

Add declare(strict_types=1); at the beginning of your PHP files when appropriate.

<?php

declare(strict_types=1);

function addNumbers(int $a, int $b): int
{
    return $a + $b;
}

echo addNumbers(10, 20);

Strict typing reduces unexpected type coercion for supported declarations and helps catch certain mistakes earlier.

2. Follow Consistent Coding Standards

Readable code is easier to debug, maintain, and share with other developers.

Use consistent naming conventions, indentation, and formatting throughout your project.

For modern PHP projects, consider following the PHP-FIG PSR-12 coding style.

<?php

class UserService
{
    public function getUserName(string $name): string
    {
        return trim($name);
    }
}

Consistency is particularly important when multiple developers work on the same codebase.

3. Use Prepared Statements for Database Queries

SQL injection is a serious security risk in web applications.

Avoid inserting user input directly into SQL queries. Instead, use prepared statements with bound parameters.

<?php

$stmt = $pdo->prepare(
    'SELECT * FROM users WHERE email = :email'
);

$stmt->execute([
    'email' => $email,
]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

Prepared statements help separate SQL code from user-supplied values.

Remember that parameters cannot replace SQL identifiers such as table or column names. Use an allowlist for dynamic identifiers.

4. Validate Input and Escape Output

Never assume that data submitted by users is safe or correctly formatted.

Validate input according to the data your application expects.

<?php

$email = filter_input(
    INPUT_POST,
    'email',
    FILTER_VALIDATE_EMAIL
);

if ($email === false || $email === null) {
    echo 'Invalid email address.';
}

When displaying user-generated content in HTML, escape it appropriately.

<?php

echo htmlspecialchars(
    $username,
    ENT_QUOTES | ENT_SUBSTITUTE,
    'UTF-8'
);

Input validation and output escaping solve different problems. Both are important for secure applications.

5. Use Composer for Dependency Management

Composer makes it easier to install, update, and manage PHP packages.

For example, you can install a package using:

composer require monolog/monolog

Composer also generates an autoloader, so you don't need to manually include every class file.

<?php

require __DIR__ . '/vendor/autoload.php';

Commit your composer.json and composer.lock files for applications to help maintain reproducible dependency versions.

6. Handle Errors and Exceptions Properly

A production application should handle errors without exposing sensitive technical information to visitors.

Use exception handling where you can meaningfully recover from or respond to an error.

<?php

try {
    $result = $pdo->query('SELECT * FROM users');

    $users = $result->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log($e->getMessage());

    http_response_code(500);

    echo 'Something went wrong. Please try again later.';
}

Log errors securely, and avoid displaying database credentials, stack traces, or internal file paths to users.

7. Never Store Plain-Text Passwords

Passwords should never be stored as plain text.

PHP provides built-in functions for securely hashing and verifying passwords.

<?php

$password = 'example-password';

$hash = password_hash(
    $password,
    PASSWORD_DEFAULT
);

if (password_verify($password, $hash)) {
    echo 'Password verified.';
}

Store the generated hash in your database, not the original password.

For production applications, also consider login rate limiting, secure password reset flows, and multifactor authentication.

8. Keep Your Code Modular

Avoid putting all your application logic into a single large PHP file.

Separate responsibilities into appropriate classes, functions, and components.

For example, a small project might use this structure:

project/
├── public/
│   └── index.php
├── src/
│   ├── Controllers/
│   ├── Services/
│   └── Models/
├── config/
├── tests/
├── vendor/
└── composer.json

A modular structure makes it easier to test individual components, fix bugs, and add new features.

9. Optimize Database Queries

Poor database queries can slow down even a well-written PHP application.

Instead of retrieving every column, select only the data you need.

<?php

$stmt = $pdo->prepare(
    'SELECT id, name, email
     FROM users
     WHERE status = :status
     LIMIT 20'
);

$stmt->execute([
    'status' => 'active',
]);

$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

For larger applications, consider appropriate database indexes, pagination, caching, and query profiling.

Measure performance before making optimizations so you can focus on actual bottlenecks.

10. Keep PHP and Dependencies Updated

Keeping your PHP environment updated is an important part of application security and maintenance.

Use a currently supported PHP release, install security updates, and regularly review your dependencies.

You can inspect outdated Composer packages with:

composer outdated

Before upgrading a production application, test compatibility in a staging environment.

If you develop WordPress websites, also keep WordPress core, themes, and plugins updated, and maintain reliable backups.

Final Thoughts

Writing good PHP isn't just about making your code work. It's about building applications that are secure, maintainable, and easier to improve over time.

By following these practices, you can improve your development workflow and build a stronger foundation for future projects.

Which PHP best practice has made the biggest difference in your development workflow? Share your experience in the comments!