CSci 284 - Homework 5

Due: Thursday, Apr 2nd, 2026

This assignment is worth 50 points. For full credit:

Resources.

Part 0. Client-side Validation

In class, we looked at ways to add validation to different types of <input> objects in our forms. The Client-Side Validation page at Mozilla Developer's Network works through a form in a file basic.html. Using this as a starting point, complete the tutorial, testing your file at each point by loading in the browser and seeing how it behaves with no input, wrong input, and correct input. Be sure to look at the URL in the location bar to see if your input are added as parameters.
 
When you add the final version of the form, save the file as basic-forms.html in your ~/html/CS284 folder so I can try it out.

Part 1. Flask Toy Examples

Your 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 an example of styling a border, see the Normalization page. Consider using a CSS file to go with this web page.

Turn in a screenshot of each example running in a web browser along with 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 (20 points)

The tutorial Flask Templates is a decent introduction to using templates. Use the presidents.csv file you modified in a previous assignment; 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.

Hopefully this zip file containing the presidential images will be helpful.

This example illustrates:

Before moving on to the next part, make a copy of the directory structure of your solution so you can create a Zip file to turn in 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 way to style this to make it more aesthetically pleasing
  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 as well

Deliverables

For each part, make sure you've submitted everything I need to recreate a running Flask program.