Create Word Counter app using Django

In this article, we are going to make a simple tool that counts a number of words in text using Django. Before diving into this topic you need to 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 ?

Now moving forward to make our wordcounter, first, we need to create a function where we can write the logic for counting words. 

views.py

Python3

from django.shortcuts import render


# defining function for wordcounter
def counter(request):
    # checking if method is POST or not
    if request.method == 'POST':

        # taking text input
        text = request.POST['texttocount']

        # checking weather text is empty
        # or not
        if text != '':

            # splitting the text and taking length
            # of that
            word = len(text.split())

            # defining boolean so that we can keep
            # track of process later
            i = True

            # returning HTML page with data, if calculated
            # successfully
            return render(request, 'counter.html',
                          {'word': word, 'text': text, 'i': i, 'on': 'active'})

        else:
            # returning HTML page without data, if any
            # error occurs
            return render(request, 'counter.html', {'on': 'active'})

    else:
        # returning HTML page if request.method is not POST
        return render(request, 'counter.html', {'on': 'active'})

Explanation:

First, we created a counter function that will receive text input from the frontend. After that, it will check if the text is empty or not. Then it will split the words from the text and measure the length of them. Also, store that length into a variable named “word”. We have also created one Boolean which will be used to keep track of the process later. If this process gets completed successfully then it will return an HTML page with data stored in word & text. And if the process can’t be completed successfully then it will return the same HTML page without any data.

After creating the function, we need to define a URL for that. We will be using http://localhost:8000/counter here. For that open your urls.py folder and write the following code.

Python3

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'),
]

  After this, we need to create an HTML page for that. Here you can use your Designing skills and prepare your own design and name it counter.html.  Over here we will show the logic which you can frontend. 

First of all, we will check that Boolean is true or false to know the process completed successfully or not. If that is true then we can move forward. Later on, we will use the word variable to print output with the help of Jinja format. Then we will create form to take data from user which will be sent inside our counter function. Since we are using the POST method to handle requests, we have to give  {% csrf_token %} to that.

counter.HTML

HTML

{% if i %}
<div class="mb-2" style="border-style: groove;border-radius: 10px;">
  <div class="card-header">
    <p class="m-0" style="font-size: 20px;">{{word}} Word's in that text</p>


  </div>
</div>
{% endif %}

<div class="col-12 pb-3" style="background-color:  #c2d6d6; border: 2px; border-style: groove; border-radius: 10px;">
  <form action="counter" method="POST"> {% csrf_token %}
    <div class="form-group">
      <label for="text1">Paste you're text</label>
      <textarea class="form-control" placeholder="Paste you're text here to count word and character"
                name="texttocount" id="text1" rows="8" style="background-color: #f0f5f5;">{{text}}</textarea>
    </div>

    <!-- ads section start-->
    <div class="text-center">
      ads
    </div>

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

Output: