A document from MCS 275 Spring 2023, instructor Emily Dumas. You can also get the notebook file.

MCS 275 Spring 2023Worksheet 14

  • Course instructor: Emily Dumas

Topics

This worksheet focuses on Flask web applications. There is also a problem where you explore the additional Python language features we talked about in lecture 35, anonymous functions and decorators.

Resources

These things might be helpful while working on the problems. Remember that for worksheets, we don't strictly limit what resources you can consult, so these are only suggestions.

2. Single page utilities

This problem asks you to write a Flask application, but a relatively simple one that can probably be done without HTML templates. You can use templates if you want, but it's also OK to just write functions that return strings and embed the HTML in those strings.

Make a flask application called spu.py (single page utilities) that has the following routes, all of which produce a page with a single word or number centered in the browser window, styled as in problem 1.

To be clear, we're talking about a single Flask application, and each part of the problem asks you to add another route to it.

A. /coin/

When you visit localhost:5000/coinflip/ (or the corresponding URL with a different port number that Flask selects), you should see either the word HEADS or TAILS centered on the screen in large letters. The word is selected at random, with each having a 50% probability.

B. /fib/<n>/

When you visit localhost:5000/fib/13/ (or the corresponding URL with a different port number that Flask selects), you should see the number 233 centered on the screen in large numerals. More generally, if you replace 13 in the URL with another positive integer $n$, the page should display the $n^{\mathrm{th}}$ Fibonacci number $F_n$ in the same way.

C. /switch/<x>/

When you visit localhost:5000/switch/1/ (or the corresponding URL with a different port number that Flask selects), you see the word ON in the center of the screen in big black letters against a white background. The word ON is actually a link, and if you click it, it takes you to /switch/0/. That page shows the word OFF in white text on a black background, with OFF being a link to /switch/1/.

Thus, this part of the app behaves like a light switch. Clicking toggles it on or off.

3. Elements info app

Here's a SQLite database with information about the first 112 chemical elements:

It has columns:

  • number - the atomic number
  • name - the element name
  • symbol - one- or two-letter symbol for the element
  • periodnum - the number of the period in the periodic table that contains this element
  • groupnum - the number of the group in the periodic table that contains this element
  • phase - whether this element is a solid, liquid, or gas at 25C and 1 atmosphere of pressure
  • category - metal, metalloid, noble gas, etc.
  • interesting_fact - NULL for most, but in some cases contains a sentence with an interesting fact about the element.

Note: The column phase may also contain the value "artificial" for some artificially-produced radioactive elements which are produced in such small quantities that characterization of their physical properties is not possible. But in a few cases, such as Plutonium, this value is incorrectly applied to artificial elements where such characterization has been done (e.g. Plutonium is a solid at room temperature). If we work with the elements database again, I'll try to correct the ones for which the phase info is incorrect.

A. Basic lookup by number

Make a Flask application that uses HTML templates and this database to generate a page with information about any element on demand.

For example, the endpoint /element/number/4/ should produce a page looking something like this (note the presence of an interesting fact):

Be

Beryllium

The element with atomic number 4. This Alkaline Earth Metal is a solid at standard temperature and pressure. A brittle, toxic metal when pure, it is a component of gemstones such as emerald and aquamarine.

And the endpoint /element/number/61/ should produce a page looking something like this (note the lack of phase information, and the lack of an interesting fact):

Pm

Promethium

The element with atomic number 61. This Lanthanide is an artificially produced element whose phase at standard temperature and pressure is not known.

B. Lookup by symbol

Add a feature to the application so it also generates the same sort of page at endpoints that specify an element's symbol such as /element/symbol/Ag/.

4. Extras (no solutions will be given)

If you finish the material above, add additional features to the elements Flask app:

Phase-dependent styling

Give the element info pages a different background color (always light in color, but maybe green, purple, yellow, or gray) depending on the phase of the element at room temperature (solid, liquid, gas, or artificial/unknown).

Add links to the elements pages that take you to the next and previous element (by atomic number). Hydrogen has no previous element, and Copernicium has no next element in this dataset, so handle those possibilities appropriately.

Optional photo

When asked for an element page, say for element 17, have the application check to see whether a file 117.jpg exists in the static/ subdirectory. If it does, then have that image included on the page. Add a couple of images of chemical element samples in this way, by finding, downloading, and renaming public-domain images from the web.