Random Joke Website
In this activity, create a Flask Web Server that serves a random joke website. The goal is for the user to be able to see a random joke every time the joke page loads.
Setting Up
Luckily, there is code for a basic Flask app built into Replit through an example.
- Go to Replit
- Log in
- Create a new Python Repl project named "Random Joke Website"
- At the top of the main.py file, click on the "examples" link
- From there, select the "Server (Flask)" option
- Run the program to see the boiler-plate Flask app render!
The Code So Far
The boiler-plate code should look like this:
from flask import Flask
app = Flask('app')
@app.route('/')
def hello_world():
return 'Hello, World!'
app.run(host='0.0.0.0', port=8080)
There aren't many lines, but they may be a little confusing. Here's a quick breakdown of what each line does:
from flask import Flask # imports the Flask library
app = Flask('app') # initializes the Flask app variable
@app.route('/') # sets a route for the app - the root
def hello_world(): # defines a function to handle that route
return 'Hello, World!' # returns text to display
app.run(host='0.0.0.0', port=8080) # runs the app locally
Rendering HTML
Currently, the homepage has some simple text. However, it is possible to update that text to display HTML instead!
Update the hello_world
function so that it returns <h1>Hello, World!</h1>
. Run the program to see the HTML render!
Creating an HTML File
This is working, but it would be difficult to write an entire HTML document in Python. Luckily, the Flask
library has the ability to render full HTML files too. The first step is to create one.
- On the left side of the Replit page, click the "Add folder" icon
- Enter "templates" for the folder name, and press Enter
- Click the three dots by the "templates" folder, and then the "Add file" button
- Enter "home.html" for the name of the file
Now there should be a templates folder, and a file named home.html within that folder. The name of the folder is important; make sure it is templates.
Next, open up the home.html file, and add the following code:
templates/home.html
<html>
<body>
<h1>Welcome to my Website</h1>
<p>This is one of the greatest websites of all time.</p>
</body>
</html>
This is a simple page, but it is much easier to have the code in a file instead of in a string!
Using the HTML File
The next step is using the HTML file in the Flask app.
- Open the main.py file
- At the top of the file, find the
from flask
line - At the end of the line, add
, render_template
from flask import Flask, render_template
- Find the
hello_world
function, and rename ithome
- In the body of the
home
function, remove the currentreturn
- In its place, call the
render_template
function, passing in"home.html"
- Return the result of the function call
- Stop the server and run it again to see the updated home page!
main.py
from flask import Flask, render_template
app = Flask('app')
@app.route('/')
def home():
return render_template("home.html")
app.run(host='0.0.0.0', port=8080)
Adding Another Page
Adding additional pages to the web server will be very similar to creating the first page. This second page will have a joke for the user.
A New HTML File
The first step is creating a new HTML file. Add a file named joke.html to the templates folder. Note that the file must be within the proper folder; otherwise it will not work. Once the file has been created, add the following HTML code:
templates/joke.html
<html>
<body>
<h1>Joke Page</h1>
<p>Here is a joke for you:</p>
<blockquote>
How do you tell when you're out of invisible ink?
</blockquote>
<p><a href="/">Go back home</a></p>
</body>
</html>
A New Route Function
The next step is to create a new route function for the joke page.
- In the main.py file, define a new function named
joke
- In the body of the
joke
function, call therender_template
function - In the call, pass in
"joke.html"
as the parameter - Return the result of the call
- On the line above the function definition, add an
@app.route
- For the route argument, use
'/joke'
- This means the page will be available at {examplename.name}.repl.co/joke
Run the project, and notice that the homepage still appears. That's what's supposed to be happening. What's missing is that the homepage has no link to the new page!
Updating the home.html File
Open up the templates/home.html file, and find the <p></p>
. Right underneath it, add the following HTML:
templates/home.html
<a href="/joke">Get a Joke</a>
With that, a link to the joke page should appear! Try running the project again. Verify that it is possible to click the link and go to the joke page!
A Random Joke
Now comes the fun part. The website so far is not bad, but it would be a lot better if there were more jokes! Update the server so that, instead of only displaying one joke, it displays a random joke every time the joke page loads.
Setup
Python has a built-in random library to help with all things random. At the top of the main.py file, right under the other import
, add the following line:
from random import choice
That will import the choice
function, which can choose a random item from a list. It is extremely helpful for this situation. All that's missing is a list!
To save time, copy the following jokes
list into the main.py file (under the app
variable):
jokes = [
"I saw a bank that said '24 Hour Banking,' but I don't have that much time.",
"I went to a general store. They wouldn't let me buy anything specifically.",
"A computer once beat me at chess, but it was no match for me at kick boxing.",
"How do you tell when you’re out of invisible ink?",
"Saying 'I'm sorry' is the same as saying 'I apologize.' Except at a funeral.",
"I went into a clothes store and a lady came up to me and said 'if you need anything, I'm Jill'. I never met anyone with a conditional identity before.",
"I find that a duck's opinion of me is very much influenced over whether or not I have bread.",
"I haven't slept for 10 days... because that would be too long.",
"I'm against picketing, but I don't know how to show it."
]
The program should pick a random joke from the list.
Creating the Random Joke
The next step is to actually use the jokes
list!
- Find the
joke
function - Make a new line at the top of the body of the function
- In the body, create a variable named
random_joke
- Set the variable to equal a call to the
choice
function- Pass in the
jokes
list as the variable
- Pass in the
- In the call to
render_template
, add a comma after the first argument - Add
joke=random_joke
to pass in therandom_joke
to the template- This is an example of a keyword argument
@app.route('/joke')
def joke():
random_joke = choice(jokes)
return render_template("joke.html", joke=random_joke)
Now the joke.html template will have access to the random joke!
Displaying the Random Joke
Now that the joke is properly passed to the template, it will be possible to display it in the HTML.
- Open the templates/joke.html file
- Find the existing joke text
- Replace the text with
{{ joke }}
- Because the
joke
argument was passed inrender_template
, this will contain a joke!
- Because the
- Under the
<blockquote></blockquote>
, create a<p></p>
element - Within the
<p>
and</p>
, create an<a></a>
element - Set the
href
attribute of thea
to"?"
- This will cause a refresh when the link is clicked
- Within the
a
, add the text "Get another joke"
templates/joke.html
<blockquote>
{{ joke }}
</blockquote>
<p><a href="?">Get another joke</a></p>
Run the project again and test it out! It should generate a random joke every time the joke page loads.
Adding Some Style
The last step is to use CSS to add some style to the site! This isn't strictly necessary, but it can make the user experience much more engaging.
CSS File
First, create a CSS file in the proper place.
- Create a folder named static
- Within that folder, create a file named style.css
Add the following code to the file:
static/style.css
body {
font-family: sans-serif;
background-color: darkgreen;
color: gold;
}
a {
color: white;
text-decoration: none;
}
a:hover {
font-weight: bold;
}
blockquote {
border: 1px dotted gold;
padding: 10px;
width: 300px;
}
HTML Files
Now, the HTML files must be updated to point to the static/style.css file.
Add the following code to the home.html and joke.html files (within the <html></html>
, above the <body>
):
<head>
<link rel="stylesheet" href="static/style.css">
</head>
Seeing the Website
Sometimes, Replit has issues with static CSS files. This is because they can be cached, which means they don't always refresh with changes.
To help with this, open the Repl project in another tab:
From there, it should be possible to press Ctrl+F5 to clear the cache and refresh the page. Verify that the pages are nicely styled!
Final Code
Review the final code for each file. Make sure to note the folder structure of the project. There is also a Repl project containing the complete web app.
main.py
from flask import Flask, render_template
from random import choice
app = Flask('app')
jokes = [
"I saw a bank that said '24 Hour Banking,' but I don't have that much time.",
"I went to a general store. They wouldn't let me buy anything specifically.",
"A computer once beat me at chess, but it was no match for me at kick boxing.",
"How do you tell when you’re out of invisible ink?",
"Saying 'I'm sorry' is the same as saying 'I apologize.' Except at a funeral.",
"I went into a clothes store and a lady came up to me and said 'if you need anything, I'm Jill'. I never met anyone with a conditional identity before.",
"I find that a duck's opinion of me is very much influenced over whether or not I have bread.",
"I haven't slept for 10 days... because that would be too long.",
"I'm against picketing, but I don't know how to show it."
]
@app.route('/')
def home():
return render_template("home.html")
@app.route('/joke')
def joke():
random_joke = choice(jokes)
return render_template("joke.html", joke=random_joke)
app.run(host='0.0.0.0', port=8080)
templates/home.html
<html>
<head>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<h1>Welcome to my Website</h1>
<p>This is one of the greatest websites of all time.</p>
<a href="/joke">Get a Joke</a>
</body>
</html>
templates/joke.html
<html>
<head>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<h1>Joke Page</h1>
<p>Here is a joke for you:</p>
<blockquote>
{{ joke }}
</blockquote>
<p><a href="?">Get another joke</a></p>
<p><a href="/">Go back home</a></p>
</body>
</html>
static/style.css
body {
font-family: sans-serif;
background-color: darkgreen;
color: gold;
}
a {
color: white;
text-decoration: none;
}
a:hover {
font-weight: bold;
}
blockquote {
border: 1px dotted gold;
padding: 10px;
width: 300px;
}
Challenges
After the activity, start working on the Flask Challenges.