Dynamic HTML

You should consult the following references as needed.

• MDN HTML reference
• MDN Javascript reference

Starting Code

Start by downloading and extracting the source code in this ZIP file:

• lab7.zip

There are two source code files in this ZIP file: index.html and data.js. You are encouraged to examine the index.html to understand the structure of the HTML code. Your task is to implement the features specified in data.js.

Step 1: Dynamically building list items

Your first task is to implement the createElement and buildItem functions.

The purpose of createElement is to make the rest of your coding easier; it takes an element type, class name, and (optional) value to use as the element's text content. You can then use this in buildItem to create several list items. As an illustration, consider the following examples of function calls and a description of their return values:

let button = createElement('button', 'btn', 'Click me'); // returns DOM element for <button class="btn">Click me</button>
let div = createElement('div', 'row'); // returns DOM element for <div class="row"></div>

It is important to note that you are returning an object, not the string '<div class="col">hello</div>'. It is more efficient when work with the DOM to use the objects themselves rather than generating HTML that must be parsed in order to create the elements.

Once you have the createElement helper function, you will use this in buildItem to generate a row that will be put inside a list item. This function behaves similarly to createElement in the sense that it takes string parameters and returns a DOM element. The string parameters here are used as the textContent for two of the <div> elements in the row. Your implementation must build the row exactly as shown in the code comments.

Now that you have these helper functions, modify the initialization function at the bottom of the file. In this function, you will loop through the data array (at the top of the file), passing the relevant fields as parameters to buildItem. You'll take the return value that you get back and append it to the list. It is very important that the list item appended to the list uses the data entry's first value (i.e., the username) as the element ID.

A completed solution of this portion should generate a page that looks like this screenshot.

Step 2: Dynamically modifying a list

In this next step, you will add interactive mechanisms to modify the list. In one way, you will implement deleteRow. In this function, you will find a specific list item based on the user ID and remove it. That is, deleteRow('alice') should locate the DOM object for <li class="list-group-item" id="alice">. Modify the buildItem function so that the X button has a click listener that will call deleteRow(user).

Note that these deletions are not persistent. If you reload the page, all five rows will be generated again.

Another way to modify the list is to generate rows for only the usernames requested. To do this, you will get the list of usernames from the query string. (The base code includes a line to get the query.) As you loop through the data array, check to see if the username is in this query string. If so, add the row; otherwise continue on to the next user. If the original query string is empty, just generate all of the values.

Recall that query strings are part of the URL for a web page. If you load index.html?alice&eve, then the query string is 'alice&eve' and you will only generate list items for the alice and eve users.

A complete solution to this step could eventually produce the output shown in this image. For instance, this could be produced by loading index.html?bob&eve in your browser. Alternatively, it could be produced by loading all (or almost all using a query string) users then deleting all users but bob and eve.

Step 3:

Finally, you will add another click listener to toggle whether or not a user's password is shown. By default, all passwords are shown as ********. You will add a click listener on the <div> element containing this text. (Note that you can make everything clickable, not just buttons and links.) When this element is clicked, you will call togglePassword(user).

For the implementation of togglePassword, you will first need to find the <div> for the user's password and check its textContent. If it is equal to the default string (********), find the user in the data array and replace this string with the password. Otherwise, the password is currently shown and you need to hide it by restoring the default string.

A completed version of this step would generate this screenshot after click on the password fields for bob and eve.

Submission

Submit only the data.js file to Gradescope.