Building a list

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can make a new element and add it to the page.
• I can build a list on the page from an array.
• I can make each new element do something when clicked.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 15 min · Make 15 min

Before class

Read the unit primer first. This brings together arrays and loops (p5.js) with the page: the array is data, the list on the page is a picture of it. createElement makes an element in memory; append is what shows it. li.remove() takes one away. The classic slip is changing the array and expecting the page to follow, so the bug has no red error. A listener added to each new li is a closure over li: students do not need that word, only that "this li removes itself". Plain append, createElement and remove are enough; we do not use innerHTML on purpose.

Running the lesson

1. Predict: ask students to count the loop turns on their fingers.
2. Run: ask where the new li came from, and where it went.
3. Investigate: for the bug, ask "what does the page know about the array?"
4. Modify: ask what return does inside a handler.
5. Make: ask each student what the elements of their list are, and what each one should do.

The hard part (on purpose)

Made is not shown: createElement does nothing visible until append. Ask "is it on the page yet?" at every step.

When students get stuck

Answers to the checks

1. Predict: How many bullet points does the page show?
   3. The loop runs once for each of the three items. Each time it makes a new li, gives it the item as text, and appends it to the list.
2. Which line does what?: Match each line with what it does.
   document.createElement("li") → C. makes a new li that is not on the page yet; li.textContent = input.value; → D. gives the new li the typed words; list.append(li); → A. puts the li at the end of the list on the page; input.value = ""; → B. empties the box ready for the next item
3. What shows it?: What makes the new item appear on the page?
   list.append(li)
   createElement only makes the element, in memory. append puts it into the page; before that, nobody can see it.
4. Spot the bug: Clicking Add changes nothing on the page, and there is no red error. Click the line that is the problem.
   line 8
   items.push changes the array in the script only. The page changes when the code makes an li and appends it to the list.
5. Where this leads: You want your page to keep a score that goes up as you click. Where must the score variable be made?
   Above the function, so it keeps its value between clicks
   A variable made inside a handler starts over on each click. One made above it keeps its value. Next lesson.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Click to remove

<input id="item" placeholder="Add an item">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
  const input = document.querySelector("#item");
  const list = document.querySelector("#list");
  document.querySelector("#add").addEventListener("click", function () {
    const li = document.createElement("li");
    li.textContent = input.value;
    li.addEventListener("click", function () {
      li.remove();
    });
    list.append(li);
    input.value = "";
  });
</script>

Modify › No empty items

<input id="item" placeholder="Add an item">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
  const input = document.querySelector("#item");
  const list = document.querySelector("#list");
  document.querySelector("#add").addEventListener("click", function () {
    if (input.value === "") {
      return;
    }
    const li = document.createElement("li");
    li.textContent = input.value;
    list.append(li);
    input.value = "";
  });
</script>

a list of your own

<h1>Homework tracker</h1>
<input id="item" placeholder="A task">
<button id="add">Add task</button>
<ul id="list"></ul>
<p><span id="left">0</span> tasks left</p>
<script>
  const input = document.querySelector("#item");
  const list = document.querySelector("#list");
  const left = document.querySelector("#left");
  let remaining = 0;
  document.querySelector("#add").addEventListener("click", function () {
    if (input.value === "") {
      return;
    }
    const li = document.createElement("li");
    li.textContent = input.value;
    li.addEventListener("click", function () {
      li.remove();
      remaining = remaining - 1;
      left.textContent = remaining;
    });
    list.append(li);
    remaining = remaining + 1;
    left.textContent = remaining;
    input.value = "";
  });
</script>

Stretch and support

Stretch: Add a Clear all button, or keep the items in an array as well, and show how many there are.

Support: Give the Add handler complete and ask students only for the remove-on-click.

Exit ticket

What is the difference between createElement and append?

createElement makes the element in memory; append puts it on the page, where people can see it.

What each step is for

• Investigate: A new element is made with createElement and only appears once it is appended; changing an array does not change the page, so update both.
• Modify: A handler can be added to every new element, and an if with return stops a handler early.
• a list of your own: Goals only: a list that grows from what someone types, with one more feature of your own.

Where it leads

Next lesson: a page that keeps a score between clicks.