` and `` elements. We also include a `total` variable to store the total price of all items.
+
+```js live-sample___shopping-list
+const form = document.querySelector("form");
+const item = document.querySelector("input[type='text']");
+const price = document.querySelector("input[type='number']");
+const priceList = document.querySelector("ul");
+const totalOutput = document.querySelector("p");
+
+let total = 0;
+```
+
+In our next code block, we define a function called `updateTotal()` that has one job — it updates the price displayed in the `
` element to equal the current value of the `total` variable:
+
+```js live-sample___shopping-list
+function updateTotal() {
+ totalOutput.textContent = `Total: £${Number(total).toFixed(2)}`;
+}
+```
+
+Next, we define a function called `addItemToList()`. Inside the function body we first create an {{htmlelement("li")}} element to store a newly-added item. We store the item name and price in [`data-*`](/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) attributes on the element, and make its text content equal to a string containing the item and price. We also create a {{htmlelement("button")}} element with text of "Remove <item-name>", then append the list item to the unordered list, and the button to the list item.
+
+The second major part of the function body is a `click` event listener definition on the button. When the button is clicked, we first grab a reference to the button's parent node — the list item it is inside. We then subtract the number contained in the list item's `data-price` attribute from the `total` variable, call the `updateTotal()` function to update the shown total price, then call `ariaNotify()` to announce the item that was removed, and what the new total is. Finally, we remove the list item from the DOM.
+
+```js live-sample___shopping-list
+function addItemToList(item, price) {
+ const listItem = document.createElement("li");
+ listItem.setAttribute("data-item", item);
+ listItem.setAttribute("data-price", price);
+ listItem.textContent = `${item}: £${Number(price).toFixed(2)}`;
+ const btn = document.createElement("button");
+ btn.textContent = `Remove ${item}`;
+
+ priceList.appendChild(listItem);
+ listItem.appendChild(btn);
+
+ btn.addEventListener("click", (e) => {
+ const listItem = e.target.parentNode;
+ total -= Number(listItem.getAttribute("data-price"));
+ updateTotal();
+ document.ariaNotify(
+ `${listItem.getAttribute(
+ "data-item",
+ )} removed. Total is now £${total.toFixed(2)}.`,
+ {
+ priority: "high",
+ },
+ );
+ listItem.remove();
+ });
+}
+```
+
+Our final code block add a `submit` event listener to the `