Assignment 3: Even better munching

The assignment

Build a web page that looks and behaves similarly to the one you built for the previous assignment. However, the new page must be implemented differently.

1. Instead of buttons in each menu option, bind some events: (1) as long as the cursor is over the option, change its background to green and its foreground color to white. (2) if the mouse is clicked over the option, display the list of prices as before.
2. You may use jQuery 3.6.0; you may not use any other JavaScript packages. Alternatively, you may use plain JavaScript.
3. All style must be established by JavaScript; you may not have a <style> region, and you may not use style attributes in elements. (This requirement represents poor web design, but it gives you experience styling items with JavaScript.)
4. The calls to update the data must use AJAX and must be mediated by the either by the jQuery routines for AJAX or the fetch() method in JavaScript. The AJAX response must be in JSON, formatted like this (white space is insignificant, and you must quote field names):

    	{
    	 	"category": "snacks",
    	 	"accesses": 42,
    	 	"details": [
    	 	 	{
    	 	 	 	"item": "olive hash",
    	 	 	 	"description": "mashed olives in gravy",
    	 	 	 	"price": 2.50
    	 	 	},
    	 	 	{
    	 	 	 	"item": "smarties",
    	 	 	 	"description": "small savory bites",
    	 	 	 	"price": 1.50
    	 	 	},
    	 	 	{
    	 	 	 	"item": "clumpers",
    	 	 	 	"description": "chocolate-covered raisins",
    	 	 	 	"price": 1.50
    	 	 	}
    	 	]
    	}
   

   Updating the data must not cause the current page to be reloaded.

As before, your web page should be self-contained and it should validate without warnings or errors. The CGI program may be written in PHP (preferably) or Python, Perl, or Java. The AJAX call must invoke the same CGI program that generates the original page.

Extra credit ideas

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

1. Add an "Easter Egg", that is, an unexpected behavior triggered when the user clicks on something that does not look like it has any clickable function. The Easter Egg can be simple reformatting of part of the page, a display of the full menu, a pop-up of a message (keep it clean!) or anything you like. However, the page must look just like the screenshot for the previous assignment (except for buttons) until the Easter Egg is invoked.
2. Put a timeout on the page so that 5 minutes after it is loaded into the browser, it indicates that time has expired and refuses to perform any action.
3. Let the user construct an meal order from the menu; compute the total bill. Try to do all the computations in JavaScript, not in the CGI program.
4. Continuing the previous suggestion, use the database to store the number of calories in each item and warn the user who constructs an order that has too many calories.

Turn in

Turn in your CGI program (a single file called cafe-3.php or cafe-3.cgi or a ZIP package containing your CGI program and a template file) via Canvas.