Home
CSS
HTML

Crafting a Word Counter using HTML, CSS and JavaScript

Word Counter | Coding Zemigle

In today’s digital world, where written content is abundant, keeping track of word counts has become essential. Whether you're drafting an article, writing an essay, or composing a social media post, knowing the number of words is often a critical requirement. Word counters help users manage content length, meet word limits, and improve readability.

Building a word counter is a great project for learning the fundamentals of web development. It gives you hands-on experience with structuring web pages using HTML, applying styles with CSS, and adding interactive functionality through JavaScript.

In this project, we’ll create a simple yet powerful word counter tool. Users will be able to type or paste text into a box, and the tool will display the word count instantly. This can be further expanded to include additional features like character count or live word counting as you type.

Step 01: Setting up the HTML structure

Now that we have our project set up, it’s time to build the structure of the word counter using HTML. This will define the layout and essential elements of our tool. Below is the basic HTML structure for the word counter:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Counter | Coding Zemigle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <textarea id="text-input" placeholder="Type or paste your text here..." oninput="countWords()"></textarea>
        <div class="output">
            <p>Total Words: <span id="word-count">0</span></p>
            <p>Total Characters: <span id="char-count">0</span></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>



With this HTML structure in place, we’ve created a skeleton for the word counter tool. Next, we’ll move on to styling this layout using CSS.


Step 02: Styling the Word Counter (CSS)

Now that we have our HTML structure in place, it’s time to add some styling to make our word counter look visually appealing and responsive. We’ll be using CSS to style the text area, the result section, and the overall layout to create a clean and user-friendly interface. Here’s the CSS code to style the layout and components:

✲    style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #169873;
}

.container {
    width: 90%;
    max-width: 600px;
    background: white;
    padding: 25px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
    font-size: 24px;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 15px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    border: 1px solid;
    border-radius: 4px;
    resize: none;
}

.output {
    margin-top: 20px;
}

.output p {
    font-size: 18px;
    margin-top: 10px;
    color: #333;
}

@media (max-width: 600px) {
    h1 {
        font-size: 20px;
    }
    
    textarea {
        height: 120px;
        font-size: 14px;
    }
    
    .output p {
        font-size: 16px;
    }
}



With the CSS styling in place, our word counter now has a professional and user-friendly interface. Next, we’ll add the functionality using JavaScript to count words and display the result dynamically.


Step 03: Adding Functionality with JavaScript

Now that we have the HTML structure and CSS styling in place, it’s time to make the word counter functional using JavaScript. We’ll write code to capture the text from the input field, calculate the number of words, and display the result dynamically.

✲    script.js
function countWords() {
    const text = document.getElementById('text-input').value.trim();
    const words = text.split(/\s+/).filter(word => word.length > 0);
    const wordCount = words.length;
    const charCount = text.length;

    document.getElementById('word-count').textContent = wordCount;
    document.getElementById('char-count').textContent = charCount;
}

With this JavaScript code in place, our word counter is now fully functional. Users can type or paste text into the input box, and the word count will update in real-time. The project can be further enhanced by adding features like character count or word limit indicators.

Conclusion

In this project, we successfully created a fully functional Word Counter using HTML, CSS, and JavaScript.

This project demonstrates how simple yet effective web applications can be created with minimal tools and code. Not only does it provide a practical tool for counting words, but it also offers opportunities for further enhancements, such as adding a character count, setting word limits, or displaying word frequency.

By combining these core web development technologies, you’ve built a project that enhances your understanding of user interaction and real-time feedback in web applications. As a next step, you can challenge yourself by expanding this project with additional features or integrating it into a larger web application. Happy coding!