Django

Download as odt, pdf, or txt
Download as odt, pdf, or txt
You are on page 1of 30

Creating Homepage of our TextUtils Website |

Python Django Tutorials In Hindi #9


After we created a template and defined some initial endpoints to work with, it's time
to create a homepage for our textutils website. The home page will contain two things
:
• Text Area: For taking text input from the user.
• Buttons: For redirecting the user to a specific endpoint.

So, let's start with the development of textarea.

0:55 - Creating Textarea :


Before getting our hands dirty by writing code for creating a text area, it is essential
to understand why do we need a text area? The purpose of our textutils website is to
perform some basic operations on the text entered by users. But to perform any
function on the text, we need text! So, from where will we get this text? To get the
text from the user, we need to build a text area into which the user can enter the text. 
I think we have talked much, and it's time to start the development of our website.
Follow the steps given below to create a text area.
Steps To Create Textarea:
Step 1: Open index.html.
Step 2: Type the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template is working</title>
</head>
<body>
<h1>Welcome to the text analyazer. Enter your text below</h1>
<form action='/removepunc' method='get'>
<textarea name='text' style='margin: 0px; width: 721px; height:
93px;'></textarea>

</form>
</body>
</html>

I am assuming that you already have a firm grip on HTML. If that is not the case,
then you can learn HTML within 30 minutes by clicking here.
03:08 - Creating Buttons :
We will use the HTML <button> tag for creating buttons.Open index.html and type
the following code :
<button type='submit'> Analyze Text</button>

Here, we have created only one button, i.e., Analyze Text. But, we will include more
buttons in the future.

03:30- Transfering Text Entered By User To A Specific Endpoint :


We have successfully created a text area and a analyze button. But, are they
performing any function? You can see that we can enter text in the text area, so it is
performing its function correctly. But, what about the button? On clicking the button,
it takes the user to nowhere! Therefore, we will now include the action attribute in the
form tag that will send the entered text to a specific endpoint when the user clicks on
the Analyze Text button.
Type the following code :
<form action='/removepunc' method='get'>
<textarea name='text' style='margin: 0px; width: 721px; height:
93px;'></textarea>
<button type='submit'> Analyze Text</button>

</form>

Restart the Django development server. From now, any text entered in the text area
will be sent to the removepunc endpoint. For example, I entered "Code With Harry"
in the text area and then clicked on the Analyze Text button. In the image below, you
can see that "Code With Harry" is sent to the removepunc endpoint.

With this, we have successfully created the home page of our website. I hope each
and every step is working fine on your end.

Code as described/written in the video

# views.py
# I have created this file - Harry
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'index.html')

# return HttpResponse("Home")

def removepunc(request):
#Get the text
djtext = request.GET.get('text', 'default')
print(djtext)
#Analyze the text
return HttpResponse("remove punc")

def capfirst(request):
return HttpResponse("capitalize first")

def newlineremove(request):
return HttpResponse("newline remove first")

def spaceremove(request):
return HttpResponse("space remover back")

def charcount(request):
return HttpResponse("charcount ")

# urls.py
"""textutils URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from . import views

# Code for video 6


# urlpatterns = [
# path('admin/', admin.site.urls),
# path('', views.index, name='index'),
# path('about/', views.about, name='about'),
#
# ]

# Code for video 7


urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('removepunc', views.removepunc, name='rempun'),
path('capitalizefirst', views.capfirst, name='capfirst'),
path('newlineremove', views.newlineremove, name='newlineremove'),
path('spaceremove', views.spaceremove, name='spaceremove'),
path('charcount', views.charcount, name='charcount'),

]
index.html code as described/written in the video

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template is working</title>
</head>
<body>
<h1>Welcome to the text analyazer. Enter your text below</h1>
<form action='/removepunc' method='get'>
<textarea name='text' style='margin: 0px; width: 721px; height:
93px;'></textarea>
<button type='submit'> Analyze Text</button>

</form>
</body>
</html>

Django Site: Coding The Backend |


Python Django Tutorials In Hindi
#10
We have come so far in our Django journey and successfully made a skeleton of our textutils
website. Now, it's time to give some powers to this skeleton so that it can perform some functions.
In this tutorial, we will build logic to remove all the punctuations from the text entered by the user.

01:30 - Creating Checkbuttons :


First of all, we will make some changes to the pipeline that we have laid in our previous tutorials.
Now, we will use only one view function named analyze. So, open the urls.py file and type the
below code :
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('analyze', views.analyze, name='analyze')
]

In the views.py file, delete all the view functions that we made earlier and define only one function,
called analyze. Type the following code:
def analyze(request):

#Get the text

djtext = request.GET.get('text', 'default')

Now, open the index.html file and type the following code for creating a checkbox:
<input type="checkbox" name="removepunc"> Remove Punctuations<br>

Restart your server and check whether all the things are working correctly or not. 

06:20 - Creating A New Template:


Now, we will create a new template named "analyze.html."

 Steps To Create analyze.html: 


Step 1: Right-click on the templates folder.
Step 2: Click on "New" and select the HTML file.

Step 3: Name the file as analyze.html and press enter. Now, open analyze.html and type the below
code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analyzing Your Text...</title>
</head>
<body>
<h1>Your Analyzed Text - {{ purpose }}</h1>
<p>
{{ analyzed_text }}
</p>
</body>
</html>

In the above code, we have created a <h1> tag into which we have passed a variable named
"purpose." We have also made a paragraph tag into which we have passed another variable called
"analyzed_text." 

07:30 - Declaring analyzed_text and purpose variable :


Open the views.py and type the following code:
def analyze(request):

# Get the text


djtext = request.GET.get('text', 'default')
analyzed=djtext
params = {'purpose': "Removing Punctuations", 'analyzed_text': analyzed}
return render(request,'analyze.html',params)

Let's understand the above code line by line:


• First of all, we have stored the text entered by the user in the djtext variable.
• After that, we have stored the same string in the analyzed variable so that we can use this
value in the params dictionary.
• Then, we have created a dictionary named params which holds the key-value pair for
purpose and analyzed_text variable that we used earlier in analyze.html.
• In the last line, we have used the render statement to return the text from the analyze.html
file.
Now, let's check whether everything is working correctly or not. Restart the server and type
anything in the text area. I wrote "Django Is Easy" and then clicked on the Analyze Text button. In
the image given below, you can see that the same text is sent to the removepunc endpoint with the
help of analyze.html.
 

09:25 - Logic Building For Removing Punctuations :


Now, we will write code for removing punctuations marks from the text entered by the user. Open
the views.py file and type the code given below:
def analyze(request):
# Get the text
djtext = request.GET.get('text', 'default')
removepunc=request.GET.get('removepunc','off')

if removepunc == "on":
punctuations = '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
analyzed = ""
for char in djtext:
if char not in punctuations:
analyzed = analyzed + char
params = {'purpose': 'Removed Punctuations', 'analyzed_text': analyzed}
return render(request, 'analyze.html', params)

else:
return HttpResponse('Error')

Let's understand the above code one line at a time. First of all, we are checking if the removepunc
checkbox is on or off. If it is off, then the control will come to the else statement, and an error
message will be printed on the user's screen. Otherwise, the if block of the code will be executed.
Inside the if block, we have stored all the punctuation marks in a punctuations variable and made an
empty variable named analyzed. When the user checks on the removepunc checkbox, iteration will
be performed on the user's text with the help of a for loop. Finally, all the punctuations will be
removed from the text entered by the user.
Example: I wrote the text "Remove;';' all ;./ the punctuations;#" and then clicked on the Analyzed
Text button after checking on the removepunc checkbox. In the image given below, you can see that
all the punctuations are removed.
 
YOU'VE DONE IT. YOU'VE MADE YOUR VERY FIRST WORKING WEBSITE!!! I'm so proud
of you. We will continue our Django series in the next tutorial. I hope you all are falling in love
with Django ❤️

Code as described/written in the video

# Views.py
# I have created this file - Harry
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'index.html')

# return HttpResponse("Home")

def analyze(request):
#Get the text
djtext = request.GET.get('text', 'default')

# Check checkbox values


removepunc = request.GET.get('removepunc', 'off')
fullcaps = request.GET.get('fullcaps', 'off')
newlineremover = request.GET.get('newlineremover', 'off')
extraspaceremover = request.GET.get('extraspaceremover', 'off')

#Check which checkbox is on


if removepunc == "on":
punctuations = '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
analyzed = ""
for char in djtext:
if char not in punctuations:
analyzed = analyzed + char
params = {'purpose':'Removed Punctuations', 'analyzed_text': analyzed}
return render(request, 'analyze.html', params)

else:
return HttpResponse("Error")

# def capfirst(request):
# return HttpResponse("capitalize first")
#
# def newlineremove(request):
# return HttpResponse("newline remove first")
#
#
# def spaceremove(request):
# return HttpResponse("space remover back")
#
# def charcount(request):
# return HttpResponse("charcount ")

Code as described/written in the video


# Urls.py
"""textutils URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('analyze', views.analyze, name='analyze')

index.html code as described/written in the video

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Utils</title>
</head>
<body>
<h1>Welcome to the text analyzer. Enter your text below</h1>
<form action='/analyze' method='get'>
<textarea name='text' style='margin: 0px; width: 721px; height:
93px;'></textarea><br>

<input type="checkbox" name="removepunc"> Remove Punctuations<br>


<button type='submit'> Analyze Text</button>

</form>
</body>
</html>

analyze.html code as described/written in the video

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analyzing Your Text...</title>
</head>
<body>
<h1>Your Analyzed Text - {{ purpose }}</h1>
<p>
{{ analyzed_text }}

</p>
</body>
</html>

Django Exercise 1 Solution + Shoutouts |


Python Django Tutorials In Hindi #11
In tutorial number #6 of this course, I gave you the exercise to create a personal
navigator. Let's recall one more time what was the problem and expected output :

Problem Statement :
You are supposed to create a personal navigator for the top 5 websites that you use most.
You should be able to access all the five websites directly through your development
environment of Django.

Expected Output :

Solution :
Type the below code in the views.py file :
def ex1(request):
s=''' Navigation Bar <br> </h2>
<a href= "https://www.youtube.com/playlist?
list=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9" > Django Code With Harry Bhai </a><br>
<a href="https://www.facebook.com/"> Facebook </a> <br>
<a href="https://www.flipkart.com/"> Flipkart </a> <br>
<a href="https://www.hindustantimes.com/"> News </a> <br>
<a href="https://www.google.com/"> Google </a> <br>
reutrn HttpResponse(s)

Type the below code in the urls.py file :


path('ex1', views.ex1, name="ex1")

Code as described/written in the video

# Views.py

# I have created this file - Harry


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

def index(request):
return render(request, 'index.html')
# return HttpResponse("Home")

def ex1(request):
sites = ['''<h1>For Entertainment </h1><a href = "https://www.youtube.com"
>youtube video</a>''',
'''<h1>For Interaction </h1><a href = "https://www.facebook.com"
>Facebook</a>''',
'''<h1>For Insight </h1><a href = "https://www.ted.com/talks"
>Ted Talk</a>''',
'''<h1>For Internship </h1><a href="https://internshala.com"
>Intenship</a>''',
]
return HttpResponse((sites))

Python Django Tutorials In Hindi #12


In our previous tutorial, we made a removepunc endpoint that removes all the punctuations from the
text entered by the user. Now, it's time to include some other exciting functionalities on our website.

01:30 - Logic Building For UPPERCASE:


We will include a functionality named UPPERCASE that will convert the user's text into uppercase.
First of all, we need a checkbox like we created for removepunc. Open index.html and type the
following code: 
<input type="checkbox" name="fullcaps"> UPPERCASE<br>

Now, open the views.py file and type the following code:
fullcaps=request.GET.get('fullcaps','off')

In the above code, we have made a variable named fullcaps which stores the on or off the value of
the fullcaps checkbox. Now, type the following code in views.py :
elif fullcaps=="on":
analyzed=""
for char in djtext:
analyzed=analyzed+char.upper()
params = {'purpose': 'Change To Uppercase', 'analyzed_text': analyzed}
return render(request, 'analyze.html', params)

else:
return HttpResponse('Error')

Let's understand the above code line by line. We have used the elif loop to check whether the
fullcaps checkbox is on or off. After that, we have made an empty string variable named analyzed.
When the user checks on the fullcaps checkbox, then the for loop inside the elif loop will be
executed, and an iteration will be performed on djtext. On performing iteration, the text will be
converted into the upper case with the help of the upper() function. Example: I wrote "change to
upper case" and checked on the UPPERCASE check button. You can see in the image below that
the text is converted into upper case.
06:10 - Logic Building For newlineremover :
Now, we will write code for removing a new line from the text entered by the user. Open index.html
and type the following code:
<input type="checkbox" name="newlineremover"> New Line Remover<br>

Open views.py and type the following code :


elif newlineremover=="on":
analyzed=""
for char in djtext:
if char!="\n":
analyzed=analyzed+char
params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}

# Analyze the text

return render(request, 'analyze.html', params)

In the above code, we are using the same approach that we have used for creating other buttons. We
are using an elif loop to check whether the newlineremover checkbox is turned on or off by the user.
When the user checks on the newlineremover, then the for loop will be executed, and the new line
will be removed with the help of a newline character("\n").

09:20: Logic Building For extraspaceremover :


Isn't it irritating when we add extra spaces by mistake while writing an important mail or
assignment? How would it be if you could remove all the extra spaces with your own website? So
let's write code for removing additional spaces from the text entered by the user. Open index.html
and type the following code for creating a checkbox: 
<input type="checkbox" name="extraspaceremover"> Extra Spaces Remover<br>

Open views.py and write the following code :


elif(extraspaceremover=="on"):
analyzed = ""
for index, char in enumerate(djtext):
if not(djtext[index] == " " and djtext[index+1]==" "):
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}

# Analyze the text


return render(request, 'analyze.html', params)

In the above code, we have used elif to check whether the extraspaceremover is on or off. If the
checkbox is on, then the for loop will be executed, and extra spaces will be removed with the help
of the built-in function enumerate(). For example, I wrote, "Remove all the extra spaces." I checked
on the Extra Spaces Remover button. You can see in the image below that all the extra spaces are
removed.
With this, we have successfully added some amazing functionalities to our textutils website. This
tutorial ends here, and I will see you in the next tutorial. Feel free to ask your questions in QnA.
views.py code as described/written in the video

# Views.py
# I have created this file - Harry
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'index.html')

# return HttpResponse("Home")

def ex1(request):
sites = ['''<h1>For Entertainment </h1> <a href="https://www.youtube.com/">
Youtube Videos</a> ''',
'''<h1>For Interaction </h1> <a href="https://www.facebook.com/">
Facebook</a> ''',
'''<h1>For Insight </h1> <a href="https://www.ted.com/talks"> Ted
Talks</a> ''',
'''<h1>For Internship </h1> <a
href="https://www.internshala.com">Internship</a> ''']
return HttpResponse((sites))

def analyze(request):
#Get the text
djtext = request.GET.get('text', 'default')

# Check checkbox values


removepunc = request.GET.get('removepunc', 'off')
fullcaps = request.GET.get('fullcaps', 'off')
newlineremover = request.GET.get('newlineremover', 'off')
extraspaceremover = request.GET.get('extraspaceremover', 'off')

#Check which checkbox is on


if removepunc == "on":
punctuations = '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
analyzed = ""
for char in djtext:
if char not in punctuations:
analyzed = analyzed + char
params = {'purpose':'Removed Punctuations', 'analyzed_text': analyzed}
return render(request, 'analyze.html', params)

elif(fullcaps=="on"):
analyzed = ""
for char in djtext:
analyzed = analyzed + char.upper()

params = {'purpose': 'Changed to Uppercase', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)

elif(extraspaceremover=="on"):
analyzed = ""
for index, char in enumerate(djtext):
if not(djtext[index] == " " and djtext[index+1]==" "):
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)
elif (newlineremover == "on"):
analyzed = ""
for char in djtext:
if char != "\n":
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)
else:
return HttpResponse("Error")

# def capfirst(request):
# return HttpResponse("capitalize first")
#
# def newlineremove(request):
# return HttpResponse("newline remove first")
#
#
# def spaceremove(request):
# return HttpResponse("space remover back")
#
# def charcount(request):
# return HttpResponse("charcount ")

urls.py code as described/written in the video

# Urls.py
"""textutils URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from . import views

# Code for video 6


# urlpatterns = [
# path('admin/', admin.site.urls),
# path('', views.index, name='index'),
# path('about/', views.about, name='about'),
#
# ]

# Code for video 7


urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('analyze', views.analyze, name='analyze'),
path('ex1', views.ex1, name='ex1'),

index.html code as described/written in the video


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Utils</title>
</head>
<body>
<h1>Welcome to the text analyzer. Enter your text below</h1>
<form action='/analyze' method='get'>
<textarea name='text' style='margin: 0px; width: 721px; height:
93px;'></textarea><br>

<input type="checkbox" name="removepunc"> Remove Punctuations<br>


<input type="checkbox" name="fullcaps"> UPPERCASE<br>
<input type="checkbox" name="newlineremover"> New Line Remover<br>
<input type="checkbox" name="extraspaceremover"> Extra Spaces Remover<br>
<button type='submit'> Analyze Text</button>

</form>
</body>
</html>

analyze.html code as described/written in the video

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analyzing Your Text...</title>
</head>
<body>
<h1>Your Analyzed Text - {{ purpose }}</h1>
<p>
{{ analyzed_text }}

</p>
</body>
</html>

Django Exercise 2: Revamping TextUtils |


Python Django Tutorials In Hindi #13
Problem Statement :
You are supposed to change the code in such a way so that the user can perform more
than one operation on the text. For example: if I turn on more than one button, then only
one of the features of the textutils website is working now, but I want you to change the
code in such a way so that all the turned on buttons should work properly.
Expected Output :
Input :

Output:

Notice that text is changed to upper case, and all the punctuations marks are also
removed.

Code as described/written in the video

No source code was associated with this video!

Adding Boostrap To Our Django Website |


Python Django Tutorials In Hindi #14
In our previous tutorials, we have added some really amazing functionalities to our website. But our
website looks very simple! Till now, we have just focused on adding different features on our
website. But now it's time to focus on the design of our website. It's time to make our site beautiful.
But how are we going to do that? We are going to use Bootstrap to change the look of our website.
And trust me! Adding Bootstrap is the best thing that you can do to kickstart the designing of a
website. So, let's start with the introduction of Bootstrap.

What Is Bootstrap?
• Bootstrap is a front-end development framework.

• It is a library of HTML, CSS, and JS used to create modern websites and web applications.

Sounds great! But, you might be thinking that you don't know anything about it, so how you will
use it. Don't worry! Click here to learn Bootstrap in one hour.

02:05- Adding Bootstrap Starter Template To Our Website :


Let me send you to the Getting Started page of Bootstrap. Scroll down and copy the starter template

After copying the starter template, open the index.html file, and paste the starter template. You can
also copy the starter template from below :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRk
fj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/
kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

02:40- Adding Navigation Bar :


After adding a starter template, it's time to include the navigation bar on our website. Click here and
copy the navbar of your choice. Below is the code for the one that I am using :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>

After copying the code, paste this code in index.html. After pasting, your website will look
something like this :

04:40 - Adding Alerts :


Click here to select the alert of your choice. I am using dismissible alerts, and below is the code for
the same :
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Welcome to TextUtils!</strong> You can do anything with your text
here!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

06:00- Adding Text Area :


Copy and paste the code given below to add text area:
<div class="form-group">
<label for="exampleFormControlTextarea1">Enter your text here and let Text
Utils do the magic</label>
<textarea class="form-control" name='text' id="exampleFormControlTextarea1"
rows="9"></textarea>
</div>

09:00 - Adding Switches :


Copy the below code and paste it into the index.html file.
<div class="custom-control custom-switch">
<input type="checkbox" name="removepunc" class="custom-control-input"
id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Remove
Punctuations</label>
</div>

Use the same code to make more switches. But, do not forget to change the switch id.
12:20 - Adding Analyze Text Button :
Type the code given below to add the analyze text button :
<button type="submit" class="btn btn-dark mt-2">Analyze Text</button>

After successfully adding buttons and switches, add the action attribute in the form tag. Write the
following code :
<form action='/analyze' method='get'>

With this, we have successfully added Bootstrap to the home page of our textutils website. But, we
have not included Bootstrap on the endpoints pages of our website. So, let's add Boostrap on the
endpoint pages.

15:00 -  Adding Bootstrap To analyze.html:


Copy the below code and paste it into analyze.html file : 
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>Text Utils</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">TextUtils.in</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>

<div class="alert alert-success alert-dismissible fade show" role="alert">


<strong>Success!Your Text Has Been Analyzed</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="container mt-5">


<h1>Your Analyzed Text -- {{purpose}}</h1>
<p>
{{ analyzed_text}}
</p>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6ji
zo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/
mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

In the above code, we have added the starter template and navigation bar of Bootstrap. After that,
we have passed the analyzed_text and purpose variable inside the div container.
And that's how we completely changed the overall look of our website without even writing a single
line of code. Isn't it amazing? That's why I love Bootstrap, and you should too! This tutorial ends
here, and we have also completed the development of our textutils website.

views.py code as described/written in the video:


# Views.py
# I have created this file - Harry
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'index.html')

# return HttpResponse("Home")

def ex1(request):
sites = ['''<h1>For Entertainment </h1> <a href="https://www.youtube.com/">
Youtube Videos</a> ''',
'''<h1>For Interaction </h1> <a href="https://www.facebook.com/">
Facebook</a> ''',
'''<h1>For Insight </h1> <a href="https://www.ted.com/talks"> Ted
Talks</a> ''',
'''<h1>For Internship </h1> <a
href="https://www.internshala.com">Internship</a> ''']
return HttpResponse((sites))

def analyze(request):
#Get the text
djtext = request.GET.get('text', 'default')

# Check checkbox values


removepunc = request.GET.get('removepunc', 'off')
fullcaps = request.GET.get('fullcaps', 'off')
newlineremover = request.GET.get('newlineremover', 'off')
extraspaceremover = request.GET.get('extraspaceremover', 'off')

#Check which checkbox is on


if removepunc == "on":
punctuations = '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
analyzed = ""
for char in djtext:
if char not in punctuations:
analyzed = analyzed + char
params = {'purpose':'Removed Punctuations', 'analyzed_text': analyzed}
return render(request, 'analyze.html', params)

elif(fullcaps=="on"):
analyzed = ""
for char in djtext:
analyzed = analyzed + char.upper()

params = {'purpose': 'Changed to Uppercase', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)

elif(extraspaceremover=="on"):
analyzed = ""
for index, char in enumerate(djtext):
if not(djtext[index] == " " and djtext[index+1]==" "):
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)

elif (newlineremover == "on"):


analyzed = ""
for char in djtext:
if char != "\n":
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)
else:
return HttpResponse("Error")

# def capfirst(request):
# return HttpResponse("capitalize first")
#
# def newlineremove(request):
# return HttpResponse("newline remove first")
#
#
# def spaceremove(request):
# return HttpResponse("space remover back")
#
# def charcount(request):
# return HttpResponse("charcount ")

index.html code as described/written in the video

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

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>Text Utils</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">TextUtils.in</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>

<div class="alert alert-success alert-dismissible fade show" role="alert">


<strong>Welcome to TextUtils!</strong> You can do anything with your text
here!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="container">

<form action='/analyze' method='get'>

<div class="form-group">
<label for="exampleFormControlTextarea1">Enter your text here and let Text
Utils do the magic</label>
<textarea class="form-control" name='text' id="exampleFormControlTextarea1"
rows="9"></textarea>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="removepunc" class="custom-control-input"
id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Remove
Punctuations</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="fullcaps" class="custom-control-input"
id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">UPPERCASE</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="newlineremover" class="custom-control-input"
id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">New Line
Remover</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="extraspaceremover" class="custom-control-input"
id="customSwitch4">
<label class="custom-control-label" for="customSwitch4">Extra Spaces
Remover</label>
</div>

<button type="submit" class="btn btn-dark mt-2">Analyze Text</button>


</form>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6ji
zo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/
mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

analyze.html code as described/written in the video:

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

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>CWH Text Utils</title>


</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">CWHTextUtils.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>

<div class="alert alert-success alert-dismissible fade show" role="alert">


<strong>Success!</strong> Your text has been analyzed!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="container">

<h1>Your Analyzed Text - {{ purpose }}</h1>


<p>
<p>{{ analyzed_text }}</p>

</p>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6ji
zo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/
mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Fixing Bugs In Our TextUtils


Website | Python Django Tutorials
In Hindi #15
In our previous tutorial, we successfully created our textutils website and added bootstrap to it. But,
while using our website, I found out that there is a bug on our website. In this tutorial, we will fix
all the bugs on our textutils website.
Let's have a look at the bug I was talking about. I entered some text in the text area and turned on
the UPPERCASE button. Here is the text that I entered :

In the image given below, you can see that the text that I entered was changed to uppercase. But, all
the new lines were also removed automatically. So, why are we facing this issue? I would suggest
you spend some time in finding out the reason of this bug. We will discuss the cause and solution of
this bug further in this tutorial.

If you have figured out the reason for this bug, then I must say that you are a good programmer, and
all the basic concepts are crystal clear to you. Now, let's discuss the cause:
This error is coming from our analyze.html file. In our analyze.html file, we have directly dumped
the analyzed_text variable inside the paragraph tag. But, it is the default property of HTML to chop
off the new line character inside the paragraph tag. To stop this, HTML requires us to use a <pre>
tag, which indicates that the text is preformatted. 
Open analyze.html and add the <pre> tag :
<div class="container mt-5">
<h1>Your Analyzed Text -- {{purpose}}</h1>
<p>
<pre> {{ analyzed_text}} </pre>
</p>
</div>

Now, let's check whether everything is working correctly or not. Again, I entered the text and turned
on the UPPERCASE button. Now, you can see in the image given below that newlines are still
there, and HTML is not removing them automatically.

And that's how we quickly fixed the bug on our textutils website. I hope all the concepts are crystal
clear to you. Ask your queries in the QnA section.

views.py code as described/written in the video

# Views.py
# I have created this file - Harry
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'index.html')

# return HttpResponse("Home")

def ex1(request):
sites = ['''<h1>For Entertainment </h1> <a href="https://www.youtube.com/">
Youtube Videos</a> ''',
'''<h1>For Interaction </h1> <a href="https://www.facebook.com/">
Facebook</a> ''',
'''<h1>For Insight </h1> <a href="https://www.ted.com/talks"> Ted
Talks</a> ''',
'''<h1>For Internship </h1> <a
href="https://www.internshala.com">Internship</a> ''']
return HttpResponse((sites))

def analyze(request):
#Get the text
djtext = request.POST.get('text', 'default')
print(djtext)

# Check checkbox values


removepunc = request.POST.get('removepunc', 'off')
fullcaps = request.POST.get('fullcaps', 'off')
newlineremover = request.POST.get('newlineremover', 'off')
extraspaceremover = request.POST.get('extraspaceremover', 'off')

#Check which checkbox is on


if removepunc == "on":
punctuations = '''!()-[]{};:'"\,<>./?@#$%^&*_~'''
analyzed = ""
for char in djtext:
if char not in punctuations:
analyzed = analyzed + char

params = {'purpose':'Removed Punctuations', 'analyzed_text': analyzed}


return render(request, 'analyze.html', params)

elif(fullcaps=="on"):
analyzed = ""
for char in djtext:
analyzed = analyzed + char.upper()

params = {'purpose': 'Changed to Uppercase', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)

elif(extraspaceremover=="on"):
analyzed = ""
for index, char in enumerate(djtext):
if not(djtext[index] == " " and djtext[index+1]==" "):
analyzed = analyzed + char

params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}


# Analyze the text
return render(request, 'analyze.html', params)

elif (newlineremover == "on"):


analyzed = ""
for char in djtext:
if char != "\n" and char!="\r":
analyzed = analyzed + char
else:
print("no")
print("pre", analyzed)
params = {'purpose': 'Removed NewLines', 'analyzed_text': analyzed}
print(params)
# Analyze the text
return render(request, 'analyze.html', params)
else:
return HttpResponse("Error")

# def capfirst(request):
# return HttpResponse("capitalize first")
#
# def newlineremove(request):
# return HttpResponse("newline remove first")
#
#
# def spaceremove(request):
# return HttpResponse("space remover back")
#
# def charcount(request):
# return HttpResponse("charcount ")
index.html code as described/written in the video

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

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>Text Utils</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">TextUtils.in</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>

<div class="alert alert-success alert-dismissible fade show" role="alert">


<strong>Welcome to TextUtils!</strong> You can do anything with your text
here!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="container">
<form action='/analyze' method='get'>

<div class="form-group">
<label for="exampleFormControlTextarea1">Enter your text here and let Text
Utils do the magic</label>
<textarea class="form-control" name='text' id="exampleFormControlTextarea1"
rows="9"></textarea>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="removepunc" class="custom-control-input"
id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Remove
Punctuations</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="fullcaps" class="custom-control-input"
id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">UPPERCASE</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="newlineremover" class="custom-control-input"
id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">New Line
Remover</label>
</div>

<div class="custom-control custom-switch">


<input type="checkbox" name="extraspaceremover" class="custom-control-input"
id="customSwitch4">
<label class="custom-control-label" for="customSwitch4">Extra Spaces
Remover</label>
</div>

<button type="submit" class="btn btn-dark mt-2">Analyze Text</button>


</form>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6ji
zo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/
mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

analyze.html code as described/written in the video


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

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

<title>CWH Text Utils</title>


</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">CWHTextUtils.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>

<div class="alert alert-success alert-dismissible fade show" role="alert">


<strong>Success!</strong> Your text has been analyzed!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

<div class="container">

<h1>Your Analyzed Text - {{ purpose }}</h1>


<p>
<pre>{{ analyzed_text }}</pre>

</p>
</div>

<!-- Optional JavaScript -->


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6ji
zo" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/
mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

You might also like