DEV Community

Madhuban Khatri
Madhuban Khatri

Posted on

Create A Dictionary App using Django and BeautifulSoup

Welcome Back,
After a long time again putting a new blog. In this blog, I am going to create a 'Dictionary Website' where user can type a Word and can get the meaning of the Word.

Here is the Source Code for this Project:-
1.) views.py

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect

from bs4 import BeautifulSoup
import requests



# Create your views here.
def home(request):
    if request.method == "POST":
        word = request.POST['word']
        url = 'https://www.dictionary.com/browse/'+word
        r = requests.get(url)
        data = r.content
        soup = BeautifulSoup(data, 'html.parser')
        span = soup.find_all('span', {"class": "one-click-content"})

        param = {'text': span[0].text, 'word': word}
        return render(request, 'index.html', param)
    else:
        return render(request, 'index.html')
Enter fullscreen mode Exit fullscreen mode

2.) urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]
Enter fullscreen mode Exit fullscreen mode

3.) Index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Django Dictionary</title>
  </head>
  <body style="background-color: black;">

    <div class="container w-50 my-3">
    <div class="container btn btn-primary">
        <h1>Dictionary App</h1>
    </div>
    <br><br><br>
    <div class="mb-3">
        <form action="{% url 'home' %}" method="post">
            {% csrf_token %}
            <input type="text" class="form-control" name="word" id="exampleFormControlInput1" placeholder="Search Word..."><br>
            <input type="submit" name="" class="btn btn-success" value="Search">
        </form>
    </div>
    <hr>
    <h4 class="text-danger">{{word}}</h4>
    <h5 class="text-info">{{text}}</h5>
    </div>




    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

ANY PROBLEM?
Comment Down...

Thank You.

Top comments (0)