Flask Challenges

After completing the code-along, attempt the challenges below. Note that students will be expected to present their websites, so complete the first challenge (new jokes) at minimum!

1. New Jokes

Replace the existing jokes list with a new list; either write your own, or search for some existing jokes! Make sure the jokes are appropriate.

After updating the jokes, change up some of the styles. Open the static/style.css file, and change the following:

  • background color
  • text color
  • font

2. Quotes

A website about jokes is nice, but it is a little restrictive. Update it so that it provides a random quote in addition to a random joke. This way, there are a lot more options for what to show. Note that this will be extremely similar to the Joke page; for the purposes of this exercise, much of it can be copied and pasted.

Python Code

Open the main.py file, and make the following changes:

  1. Under the jokes list, create a new list named quotes
  2. For now, add a couple of quotes to the list (more can be added later):
    • "You miss 100% of the shots you don't take."
    • "The future ain't what it used to be."
  3. Under the joke function, define a function named quote
    • It should have no parameters
  4. Above the quote function, add the @app.route line, pointing to "/quote"
  5. In the body of the quote function, create a variable named random_quote
  6. Set the random_quote variable to choice(quotes)
  7. Under that, return a call to render_template
    • Pass in "quote.html" and quote=random_quote
  8. Check that the quote function matches the joke function for the most part

Note that this will not work just yet; there is currently no quote.html file.

HTML Template Code

The next step is to add a quote.html file and update the home.html file.

  1. In the templates folder, create a new file named quote.html
  2. Copy the code from the joke.html file into the quote.html file
  3. Change the h1 text so that it says "Quote Page"
  4. Change the p text so that it says "Here is a quote for you"
  5. Change the {{ joke }} to {{ quote }}
    • This is because a different value is passed to render_template in the Python
  6. Change the first a text so that it says "Get another quote"
  7. Open the home.html file
  8. Under the existing a element, add another <a></a>
  9. Set the href of the second a to point to /quote
  10. Make the text of the second a say "Get a quote"

Run the program and verify that it is possible to go to the Quote Page!

Find More Quotes

Now the fun part: find more quotes! These can be quotes from movies, books, songs, or whatever else. Update the quotes list in the main.py file so that it contains some updated quotes.

3. A Hello Page

Create another page - a "Hello" page - that greets the user based on a name passed in the URL. This is possible using URL Converters. These can turn values from URLs into Python variables.

By the end of this challenge, the user should be go to a URL like "proj.name.repl.co/hello/Joan" and the page should say "Hello Joan!" It should work for any name passed in the URL.

Python Code

First, change the code in the main.py file.

  1. Under the existing route functions, define a new function named hello
  2. Give the hello function one parameter: username
  3. Above the function, add the @app.route decorator
  4. For the URL, pass in /hello/<username>
    • Note the <> around username - that means it will be the parameter!
  5. In the body of the hello function, add a return statement
  6. Return render_template, passing in "hello.html" and name=username
    • This will pass the URL username variable into the "hello.html" template

This will not work just yet, because there is no file named hello.html.

HTML Template Code

Next, create a proper HTML template to render.

  1. In the templates folder, create a file named hello.html
  2. Open the file, and add basic boiler-plate HTML elements to it: html, body
  3. Between the <body> and </body> add a <h1></h1>
  4. Make the text say Hello {{ name }}!
    • This will render the name passed in the Python code
  5. Under the h1, add a p saying "I hope you enjoy the site"

Now the new route should work! It will not be linked from anywhere, but that should not be a problem.

Testing the Hello Page

Testing the page is easiest when the site is opened in a new window:

After that, append /hello/Name to see it say hello! Verify that it can say hello to any name provided in the URL.

4. Make Something New

Use Flask to create a completely new website! There are several options. If desired, take a look at this tutorial to learn some more advanced template concepts, which will make it possible to do a lot more with Flask!

Optional Practice: Bug Fixing

Find and fix all of the bugs in the programs below. Note that the projects may have multiple bugs - fix all of them!

results matching ""

    No results matching ""