Assignment 4: Fantastic munching

The assignment

Continue developing the Munchin Lunchin web site. This time you have more leeway, but you must do at least the following:

1. Use CSS in the <style> section instead of using JavaScript. It's better coding, after all. So no use of the DOM nodes' style attribute or the jQuery css() function.
2. Continue using AJAX as before. If you used fetch(), you may switch to the jQuery .ajax() or .post().
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. The <h2> regions should be in the Antique Heritage font. See https://www.fontspace.com/antique-heritage-font-f57562. You will need to add extra margins.
5. Add a button labelled "Compute tip". When a user clicks it, an input area should appear (it can be type=text or type=number with step=0.01). You may use the display style in this one case to cause it to appear. As the user types a number into the input area representing a bill amount, a list of possible gratuity amounts should appear, looking something like this:

    	bill: $49.23
    	with 15% tip: $56.61
    	with 18% tip: $58.09
    	with 20% tip: $59.08
    	with 25% tip: $61.54
   

   This computation must be conducted entirely within the web page, using JavaScript. You may want to make use of the JavaScript function toFixed(). You can make the list as simple or as fancy as you like; you could, for instance, format it as a Bootstrap table.

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. Any extra credit idea from the third assignment that you did not program for that assignment.
2. Use a Bootstrap modal to display the gratuity computation.
3. Use JavaScript to warn if the amount entered doesn't look like a valid bil amount.
4. Use JavaScript to remove a character from the amount entered as soon as it causes the value to be invalid, even if the character is in the middle of the amount. You might want to use selectionStart and substr().

Turn in

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