Skip to content

Lab 6: Events and Bootstrap

Due: Friday, Mar 14th

In this lab, you will use Bootstrap to create a few basic components, then use your own JavaScript code to control them. You will need to become familiar with Bootstrap's grid system (container, row, col) and the following components:

Starter Code

Download the following files to get started:

Step 1: Bootstrap Components

Modify the provided HTML file to use Bootstrap classes to create this annotated layout. You will need to use the grid system, as well as the button and card classes.

  • The DIV containing the list becomes a Collapse element. Clicking the H2 or the Toggle... button will expand or collapse it.

Update 3/12

There are two subtle issues that will cause the autograder to break here:

  1. The comment originally stated that the "first column IS a card" but should actually be the "first column CONTAINS a card". The test cases are looking for a <div> that contains only the "card" class. The HTML file has been updated.
  2. A Bootstrap card should have both a "card-header" and a "card-body". In our reference implementation (which was used to generate the autograder), we forgot to include the "card-body". As such, the "card" contains a <div> that is a "card-header" and another one that is the "collapse".

As mentioned above, make the card body (the <div> containing the list) into a Collapse element. You'll need to add attributes to the <h2> element to toggle the collapse to show or hide the list. Expanding the collapse will look like this annotated layout.

  • The list and toggle button are each within equal-sized columns in a single-row container.
  • The H2 element becomes a card header and the DIV containing the UL becomes the card body.
  • Use the appropriate classes to format the UL, LI, and button elements.
  • Set the button IDs to "add-item" (the +) and "expand" (the Toggle...)

That's it for Step 1. Your HTML file should be finished at this point.

Step 2: Controlling Bootstrap with JavaScript

Now that you've created the components in HTML, you'll use JavaScript to control them. In this step, you will implement all the comments in events.js except for the last one ("If the search variable…").

Start by editing the initialization function to get a reference to the collapse element. Add an event listener to the Toggle... button to toggle the collapse instead of relying on Bootstrap's HTML attributes.

Continue with the initialization function, adding the other event listeners described. These event listeners will call functions that you will need to create at the top of the file.

At the end of Step 2, you should be able to toggle the collapse with the <h2> attributes or the Toggle... button. You should also be able to add new list items by clicking on the + button. Lastly, if you click on a list item, a form should pop up where you can change the text content of all of the list items.

Tip

To keep things simple, the form in the modal changes the text content of all list items to be the same text. You should think about how you could change this behavior so that it only updates the text of the list item that was actually clicked. As a hint, the clicked list item will be the event's target object; you could use a global variable, a form field, or a helper function to keep track of that as the object to update. (Don't actually implement this in the version you upload to Gradescope because the autograder expects all items to change.)

Step 3: Building the Collapse List Dynamically

In the last step, you'll use the query string in a similar way to Lab 3. If the query string is not empty, then the user may have entered something like index.html?a&b&c. When this happens, you'll start by removing all of the existing list items. Next, split the query string into an array of tokens (splitting at the &). For each one, you will create a new list item and append it to the list.

Once this step is completed, visiting index.html?a&b&c&d&e&f will produce the list shown in this layout.

Submission

When you are finished, submit both files to Gradescope.