In this demo, we'll create a simple Flask application that plays MadLibs. The flask docs (http://flask.pocoo.org/docs/0.10/) are about to become your bestest friend.
We're giving you a skeleton webapp to start with. Go in to your src directory and:
git clone https://github.com/hackbrightacademy/flask-madlibs.git
In your project directory, create a "virtual environment" so we don't have to install Flask (or other special libraries) system-wide:
virtualenv env
And start using your virtual environment:
source env/bin/activate
Install Flask:
pip install Flask
(this will run for a moment and will download and install several Python libraries)
If you haven't done so in this terminal window, start using your virtual environment:
source env/bin/activate
(Notice what changes about your command line prompt when you are in a virtual Python environment)
Run the application:
python madlibs.py
Visit http://localhost:5000/
This URL is "routed" to the function
start_here()
and returns a simple string: "Hi! This is the home page."Visit http://localhost:5000/hello
This is routed to the function
say_hello()
and shows a simple form which asks your name. It is rendering a template calledtemplates/hello.html
.Submit the form. This will send you to http://localhost:5000/greet?person={your name here}
This URL, "/greet", is routed to
greet_person()
. This page is getting the name entered in the previous form viarequest.args.get('person')
, choosing a random compliment, and passing both the person variable and the compliment to the function that renders the template attemplates/compliment.html
. Reload this page a few times. Change the text after theperson=
in the URL and hit return. Notice how the page changes.
Now that we've got a solid foundation for our first webapp, let's have some fun.
Modify the template
compliment.html
to ask the person if they'd like to play a game (hint: try radio buttons!). Have this form submit to the URL path/game
.Make a function called
show_game_form
and route this to the URL path/game
, so that when users fill out your "play a game?" form, it uses this function.In this function, get their response to the yes-or-no question. If they said no, return a rendered template,
goodbye.html
, that tells them goodbye and that they'll be missed or something. If they said yes, render a different template,game.html
that has a simple form that asks for a person, a color, a noun, and an adjective. How you choose to implement those inputs are up to you, but you should feel free to mix and match. (Hint: it might be fun to try one as a drop-down menu of choices). This new form should have the action/madlib
.Write a new function,
show_madlib()
, which is routed to the URL path/madlib
. It should render the templatemadlib.html
, which should fill in the given-by-user person, color, noun, and adjective in a MadLibs-style story.Some MadLibs text to get you started:
There once was a {{ color }} {{ noun }} sitting in the Hackbright Lab. When {{ person }} went to pick it up, it burst into flames in a totally {{ adjective }} way.
STOP. Please ask for a code review at this point.
- Change
game.html
to have more inputs. Try to use as many different input types as you can. Change yourshow_madlib()
function andmadlib.html
template to show the new fields in the story. - Add some style to your pages. You can use the empty file in
static/madlibs.css
if you'd like. - Make a bunch of other Madlib templates and change
show_madlib()
to randomly choose which one to render.
STOP. If you get here, please ask for a code review.
- Change the type of request for
game.html
submission tomethod="POST"
. What other changes in your code are needed to make that work? Can you make the same route handle both GET and POST? And do something slightly different with each type of request? - Modify
greet_person()
to pass a list of 3 compliments tocompliment.html
. Modifycompliment.html
to display that list using a jinja for loop. Try putting that list of compliments in an unordered list. (Hint: there's a very useful function in Python'srandom
module for "make several random selections from a list").
STOP. If you get here, please ask for a code review.
- We don't want people to be able to submit a MadLib until they've filled out each
field on their form. Using jQuery, check when they submit a form if they've put something
into each of the form fields and, if not, present an error message with
alert()
and don't submit the form.
STOP. If you get here, please ask for a code review.