Create Word Counter App using Django

Our task is to build a simple Django application that counts the number of words in a given text. This is a great beginner project if you have some basic knowledge of Django.

Refer to the below article to know about basics of Django.

• Django Basics
• How to Create a Basic Project using MVT in Django ?

Step 1: Create the Word Counting Logic in Views

First, we create a function called counter in views.py which will handle the logic for counting words:

from django.shortcuts import render

def counter(request):
    if request.method == 'POST':

        text = request.POST['texttocount']

        if text != '':
            word = len(text.split())
            i = True
            return render(request, 'counter.html',
                          {'word': word,
                          'text': text,
                          'i': i, 
                          'on': 'active'
            })

        else:
            return render(request, 'counter.html', {'on': 'active'})
    else:
        return render(request, 'counter.html', {'on': 'active'})

 Explanation:

• When the user submits text via POST, we check if the input is not empty.
• We then split the text by spaces and count the resulting words.
• If successful, we pass the word count and original text back to the template.
• On GET requests or empty input, we simply render the form without results.

Step 2: Configure URL Patterns

In your app's urls.py, map the URL /counter to your counter view:

from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('counter',views.counter, name='counter'),
]

Then include your app URLs in the main project urls.py:

from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', RedirectView.as_view(url='counter', permanent=False)),  # Redirect root to /counter
    path('', include('yourappname.urls')),  # Replace yourappname with your actual app name
]

Step 3: Create the HTML Template

Create a file called counter.html inside your app’s templates folder and add the following code:

{% if i %}
<div class="mb-2" style="border-style: groove; border-radius: 10px;">
  <div class="card-header">
    <p style="font-size: 20px;">{{ word }} Word{{ word|pluralize }} in the text</p>
  </div>
</div>
{% endif %}

<div class="col-12 pb-3" style="background-color: #c2d6d6; border: 2px groove; border-radius: 10px;">
  <form action="counter" method="POST">
    {% csrf_token %}
    <div class="form-group">
      <label for="text1">Paste your text here</label>
      <textarea name="texttocount" id="text1" rows="8" style="background-color: #f0f5f5;" class="form-control" placeholder="Enter text to count words">{{ text }}</textarea>
    </div>
    
    <div class="text-center">
      <!-- Ads or other content can go here -->
    </div>

    <div class="form-group text-center">
      <button type="submit" class="btn btn-primary w-25">Run Counter</button>
    </div>
  </form>
</div>

Notes:

• The {% csrf_token %} tag is essential for POST requests to pass Django’s CSRF protection.
• We conditionally display the word count only when the counting process has succeeded (i is true).
• {{ word|pluralize }} adds an “s” when the word count is more than one for proper grammar.

Step 4: Run Your Application

Make sure your Django server is running:

python manage.py runserver

Output: