Dynamic List

This document describes how to implement a dynamic list, which may help with the quizzes assignment.

Static Ordered Lists

Each of these sections will dynamically add list items (<li>) to a static list. The lists will all look like this:

<ol id="list0"></ol>

    Building a List

    Here's a function to create a list item. It doesn't add it to anything (so it's "off-stage"). It relies on the caller to do something with it.

    function makeItem(itemText) {
   let li = $("<li>")
   let b = $("<button>").text("mark");
   let p = $("<p>").text(itemText);
   li.append(p).append(b);
   return li;
}

var a = makeItem("buy milk");
var b = makeItem("feed cat");
$("#list1").append(a).append(b);

    Here's our first list. Note the dynamically added items.

    <ol id="list1"></ol>

      Open a JS console and add something of your own to the list.

      Use the Dev Tools to see the dynamically added items in the Inspector.

      A Class

      Let's create a class to do these steps.

      class Item {
    li;

    constructor (itemText) {
        this.li = makeItem(itemText);
    }

    addOne(where) {
        $(where).append(this.li);
    }
}

      Using the Class

      Here's some code that might use that class to add to a new list. The list is below.

      var oa = new Item("buy milk");
var ob = new Item("feed cat");
oa.addOne("#list2");
ob.addOne("#list2");

      Here's a new list:

      <ol id="list2"></ol>

        Marking Items

        Now, we want to add a feature where items can be marked. We will add a handler to the static ancestor.

        An "ancestor" is a parent, grandparent, great-grandparent and so on, up to the root of the tree. In the context of a web page, that means one of the many containers of an element, all the way up to the root, which for a web page is the <body>.

        A static element is one that is part of the fixed HTML of the page, written in the HTML file, as opposed to being dynamically added by JavaScript. We can see static elements if we do a "View Source", but to see dynamic elements, we have to use the Inspector in the Developer Tools.

        I'll define the static ancestor below the JS code.

        Delegated Event Handling

        Our event handler will use the delegation idea, so that we just add one event handler, and we add it to a static ancestor of our dynamic items. Using a static ancestor is helpful because we can add the handler when the page loads and never worry about it later.

        In this case our static ancestor will be an <ol> list. The descendants we are delegating are the <button> elements that we put in each <li>.

        Here's our JavaScript code:

        $("#list3").one().on("click", "button", function (evt) {
    let theButton = evt.target;
    console.log("clicked button", theButton);
    markItemFromButton(theButton);
    });

        Here's a helper function that will mark an item (<li>), given the button in that item. It uses .closest() to climb the tree from the <button> to the <li> and then it marks it using .css().

        function markItemFromButton(button) {
    let item = $(button).closest("li");
    console.log("marking item", item);
    $(item).css("border", "1px solid red");
}

        Let's initialize our list and try marking items. Here's the new list:

        <ol id="list3"></ol>
          var oa = new Item("buy milk");
var ob = new Item("feed cat");
oa.addOne("#list3");
ob.addOne("#list3");

          Try clicking the buttons.

          Rubric

          Here's the grading rubric for this assignment:

          Style

          Coding style for CS 204 is fairly straightforward:

          • HTML must be properly indented.
          • CSS code:
            • must be properly indented
            • should be organized logically, such as putting related rules next to each other
            • should be commented as appropriate.
          • JavaScript Code:
            • must be properly indented
            • every top-level function definition or other meaningful chunk of code (such as the attachment of event handlers) must have clear, useful documentation. Function arguments should be described in terms of semantics and data type.
            • Inline comments should be used as appropriate
            • lines should not exceed 80 characters in length
            • If you'd like a much larger, more comprehensive description of good JavaScript style, consult the Google JavaScript Style Guide

          Gradescope

          Be sure to submit to gradescope.

          Time and Work

          Finally, when you have completed the assignment, make sure you fill out the time and work Fall 2022 That report is required.