For this lab, you will need to be familiar with the following Bootstrap
components:
Starting Code
Download the following files to get started:
Requirements
Step 1: Bootstrap Components
Your first task is to modify the provided HTML file to use Bootstrap classes
to make some pre-built components. Start by adding classes to create
this annotated layout. You will need to use the
grid system, as well as the button and card classes.
Next, 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.
Step 2: Controlling Bootstrap with JavaScript
Now that you've created the components in HTML, you'll use JavaScript to
control them. Start by editing the initialization function in events.js
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 this point, 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.
Step 3: Building the 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 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 to Gradescope.
