Creating and removing elements

const items = ['bread', 'milk', 'eggs'];
const list = document.querySelector('#list');

// Builds the list from items. It runs again whenever items change.
function render() {
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = item;
    list.append(li);
  }
  // TODO: the count, such as "4 items".
}

render();
items.push('tea');
render();

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const shown = (page) => [...page.document.querySelectorAll('#list li')].map((li) => li.textContent);

test('The list shows every item once, in order', async () => {
  const page = await loadPage();
  assert.deepEqual(shown(page), ['bread', 'milk', 'eggs', 'tea'], 'the list shows ' + JSON.stringify(shown(page)));
});

test('The list has exactly four items', async () => {
  const page = await loadPage();
  const n = page.document.querySelector('#list').children.length;
  assert.equal(n, 4, 'the list has ' + n + ' children');
});

test('The count says 4 items', async () => {
  const page = await loadPage();
  const text = page.document.querySelector('#count').textContent;
  assert.equal(text, '4 items', 'the count says ' + JSON.stringify(text));
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shopping</title>
</head>
<body>
  <h1>Shopping</h1>
  <ul id="list"></ul>
  <p id="count"></p>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}

const dishes = [
  { name: 'Soup', price: 4, soldOut: false },
  { name: 'Pasta', price: 9, soldOut: true },
  { name: 'Salad', price: 6.5, soldOut: false }
];
const menu = document.querySelector('#menu');
const template = document.querySelector('#dish');

// TODO: remove the placeholder; one row from the template per dish that is not sold out.
for (const dish of dishes) {
  const li = document.createElement('li');
  li.textContent = dish.name;
  menu.append(li);
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {loadPage} from './learnrun.js';

const texts = (page, selector) => [...page.document.querySelectorAll(selector)].map((el) => el.textContent);

test('The placeholder is gone', async () => {
  const page = await loadPage();
  assert.equal(page.document.querySelector('#placeholder'), null, 'the placeholder is still on the page');
});

test('Only the dishes that are not sold out are shown', async () => {
  const page = await loadPage();
  const names = texts(page, '#menu .name');
  assert.deepEqual(names, ['Soup', 'Salad'], 'the menu shows ' + JSON.stringify(names));
});

test('Each row shows its price with two decimals', async () => {
  const page = await loadPage();
  const prices = texts(page, '#menu .price');
  assert.deepEqual(prices, ['€4.00', '€6.50'], 'the prices are ' + JSON.stringify(prices));
});

test('Every row in the menu is a copy of the template', async () => {
  const page = await loadPage();
  const classes = [...page.document.querySelectorAll('#menu li')].map((li) => li.className);
  assert.deepEqual(classes, ['dish', 'dish'], 'the rows have the classes ' + JSON.stringify(classes));
});

test('The template itself stays empty', async () => {
  const page = await loadPage();
  const content = page.document.querySelector('#dish').content;
  assert.equal(content.querySelector('.name').textContent, '', 'the template was filled in: copy it, then fill the copy');
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu</title>
</head>
<body>
  <h1>Today's menu</h1>
  <ul id="menu"><li id="placeholder">Loading the menu...</li></ul>
  <template id="dish"><li class="dish"><span class="name"></span> <span class="price"></span></li></template>
  <script type="module" src="main.js"></script>
</body>
</html>

{
  "type": "module"
}