Skip to content
Related Articles

Related Articles

Improve Article

Create Word Counter app using Django

  • Last Updated : 25 Aug, 2021

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.

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:

TemplateDoesNotExist at /counter

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course




My Personal Notes arrow_drop_up
Recommended Articles
Page :