The Codes Python Unit Project

Important

TODO: replace csv files with another utils class that generates randomised data.

Table of Contents

• Introduction
  • How The Tools Work
    • HTMLWidget
    • WeatherEndpoint
  • What's Done Already
  • What You Need To Do

Introduction

Your first unit showed you how to write HTML and CSS code to create websites.

In this unit, you have learned how to write programs using Python. Perhaps you've been wondering: when do we get to the Python WEBSITES?

Great news! In this project we will demonstrate our Python skills in a way that also exercises our existing HTML/CSS knowledge! You'll use some tools we've written for you to create a webpage that shows weather information based on automatically generated data.

How The Tools Work

HTMLWidget

The project repo defines a class called HTMLWidget that you can use to create snippets of HTML. This class is already written for you, and you shouldn't need to touch it or read through it unless you want to do a deep dive on what's happening under the hood.

Here's a quick explainer on how the HTMLWidget class is supposed to be used:

1. You create a subclass based on HTMLWidget. An example is the PageHeadingWidget class.
2. You create an HTML template using the Jinja2 templating language, and add that template file's relative location to your new class as a class attribute. In the template, you specify how the attributes in your class should be rendered. Example: the page_heading.html template
3. In your subclass, you write an __init__ method to set one or more instance attributes on your subclass that define values that you want to render in HTML. For instance, PageHeadingWidget's __init__ method defines an attribute called page_heading.
4. You use the .render() method to insert the variables into the template, and then render the template as HTML! Check out the homepage.py file to see PageHeadingWidget in use.

WeatherEndpoint

The project repo also defines a class called WeatherEndpoint. This class mimics a real weather data source by providing two methods:

• current_week: outputs a dictionary that shows (fictional) weather data for the current week
• next_week: outputs a dictionary that shows (fictional) weather data for next week

To get weather data, you just create an instance of the WeatherEndpoint class, and call one of those two methods!

What's Done Already

We've set up a widget called HomePageWidget for you. It renders a homepage HTML file that is intended to display information about the weather. It does this by putting a bunch of HTML components together, by rendering a bunch of other widgets. But right now it is broken, because the component widgets are unfinished!

What You Need To Do

Your job is to finish writing each of the HTML components. You'll need to complete the following components, and create a template for each of them:

• WeeklyForecastWidget
• DailySummaryWidget
• PageFooterWidget

If you need an example of how this is supposed to work, take a look at the completed example widgets - PageHeadingWidget and DateAndTimeWidget. There's are docstrings in each widget's file describing how it is supposed to work and what it is supposed to look like.

Caution

Not yet there aren't!

You can check your work by running bash run_tests.sh from the project root directory. We've written some tests to make sure that your program creates the output we're expecting.

Caution

The tests aren't written yet!

The HomePageWidget also has a styles.css file in its directory. You can create whatever styles you like here to make the weather page beautiful, but they won't be tested, so they're completely up to you. Let your creative juices flow!