Bootstrap Modals

In this lab, you will work with Bootstrap modals, using both the basic HTML syntax provided by Bootstrap and the JavaScript API they provide. Modals are pop-over boxes designed for user interactions. These boxes are displayed on top of the existing page, which is darkened to indicate a sort of "inactive" status. Modals are frequently used for focused user input.

You will need to consult the Bootstrap and JavaScript documentation throughout this lab.

When working with Bootstrap, you should NOT just copy and paste the code. Make sure you understand the attributes used, as you will need to modify them. In particular, your code should use id attributes that are meaningful to your web page, not the names like "collapseExample" or "navbarSupportedContent". At the same time, you will need to recognize why it is important to distinguish between this:

<div class="modal-content">
  <div class="modal-header">...</div>
</div>

and this:

<div class="modal-content modal-header">...</div>

Generally speaking, you should keep the nested <div> structure instead of combining the classes into one <div>; often, the two define spacing-related CSS properties that will end up conflicting if you combine them. Only combine them if you know it is safe to do so.

Step 1: Basic modal interactions

Start by downloading the following files onto your workspace and opening them in your preferred text editor:

This step requires modifying only index.html. In this step, you will create a modal based on the Bootstrap documentation. Note that there is no <h5> element in the header and there is no modal footer. The modal body is a flexbox with three circles in a row. The classes required to create the circles and the modal body layout are embedded in index.html.

You will also need to modify the <button> element so that clicking it will bring up the modal. A completed version of this step should generate a result that looks like this screenshot.

Step 2: Basic modal interactions

In this step, you will modify a few functions in menu.js to work with the modal. First, you will modify orderItem so that it hides the modal using the Bootstrap API. (This is literally two or three lines of code depending on how you structure it.) Next, you will modify the initialization function at the bottom of the file to add click event listeners on the three order-item elements so that they will call orderItem when clicked.

Next, you will implement buildSelection so that it creates a new <li> element based on the instructions provided in the code. This function will return the new element for testing purposes, but it will not actually add this item to the list.

Step 3: Updating the order

Your final step is to update the order cart with the new list item. You will need to extend your implementation of buildSelection to do this. You'll need to add all of the following features:

Append the <li> element from Step 2 to the order-cart list.
Update the subTotal variable with the new total cost.
Update the cart-summary row with the new subtotal.
Update the itemsOrdered array by pushing the new item ID to the end.

Adding a few new items will produce the updated page shown in this screenshot.

Submission

Submit both files to Gradescope.