Due: Thursday, Apr 3rd, 2025

This assignment is worth 50 points. For full credit:

• submit responses to BrightSpace by 11:59pm on the due date
• see the Deliverables section below

Resources.

• Python Web Apps Flask Tutorial
• Flask Quickstart
• Jinja Templates

Part 1. Flask Toy Examples

Your presumably did the first Flask example in the introduction to Flask. Picking up where you left off, build the next two toy examples (which I demoed in class earlier):

1. Second Flask example
2. Weather API example

For the Weather example, make the weather conditions text stand out more by adding a border and punching up the size/style of the font used. For a border example, see the Normalization page.

Turn in a screenshot of each example running in a web browser, and the Python files you develop. This part will count as a Class Exercise, but turn it in with the rest of the homework.

Part 2. Using Templates in Flask (30 points)

The tutorial Flask Templates is a decent introduction to using templates. You'll need the presidents.csv file we modified in a previous homework; if the CSV file you turned in is not complete (for example, there are missing data fields), complete it or grab the solution from BrightSpace. Missing data will give the example code fits.

This example illustrates:

• template inheritance
• use of the render_template function to pass values to templates and render new HTML
• use of embedded expressions to generate text and markup

Before moving on to the next part, make a copy of the directory structure of your solution so you can create a Zip file for turnin without the modifications made in Part 3.

Part 3. Improve the styling of the Presidents website (20 points)

After completing the Flask Templates example, personalize it; make it less generic looking by adding styling and/or modifying the generated HTML. This can be accomplished by modifying the template files, adding a CSS file to the static folder, or a combination of the two. At minimum:

1. the initial list of links to each president's page is pretty basic; find a nice way of styling this better
2. modify colors (background, font, etc.), font-family, and other visual elements to add interest
3. without changing the style of the narrative too much, put some of the provided information in lists (for example, important dates)
4. modify the placement and size of the presidential photo; you might add background or shadowing effects

Deliverables

• Post Part 1 files separately, individually or zipped up.
• For Parts 2&3, create a Zip file containing the entire directory structure.
• Post these files to the Assignments page on BrightSpace.

---