Assignment 5: All you can munch

The assignment

Continue developing the Munchin Lunchin web site. As before, use Bootstrap to format the page. Retain the "compute tip" feature, as well as the main menu and the details menu. You can still be fancy about formatting.

  1. Instead of using CGI programming and a MySql back end, use IndexedDB in the browser to store the menu details and then to populate the details menu. You can still use a hard-coded table for the menu, but you must consult the IndexedDB for the details. The number of times a user has accessed a menu category is now stored in the browser. To avoid database conflicts between student submissions that the grader runs in the same browser, set your IndexedDB version number (once) to a random number you get by running 
    od -N 2 -t dI < /dev/random
    You can run this command on any Unix machine. The random number is the second number output; the first and third are just offset indications.
  2. Build a logo for the page. You must use a HTML canvas element and the jQuery and jCanvas plugins. The logo must include at least one rectangle, one arc, and one ellipse. It must respond to mouseover and change in a significant way. Be creative.
  3. Use Bootstrap to format the page. How it should look is up to you, but you must employ at least Bootstrap tables, tooltips, buttons, and grid layout.
  4. Use at least 3 different fonts on the page. You don't need to use Antique Heritage.

As before, your web page should validate without warnings or errors.

Extra credit ideas

To get extra credit, you must document the extra work, preferably in a comment in your CGI program.

  1. Any extra credit idea from the second or third assignment that you did not program for those assignments.
  2. Use DataTables for the details table.
  3. Learn about JWT (JSON web tokens) and add a login facility that uses JWT. A logged-in user sees a different logo and gets a 10% discount on all menu items.

Turn in

Turn in your HTML file (a single file called cafe-5.html or, if you are using a templating package or a separate JavaScript file (a good idea), a ZIP package containing the various files.