Lists in JavaScript

HTML has two kinds of list. A ul, an unordered list, is a set of things whose order does not matter, shown with bullets. An ol, an ordered list, is a list where the order is the point, like steps: the browser numbers its items 1, 2, 3.

Both hold only li elements, list items, one per thing. You never type the numbers of an ol yourself:

<ul>
  <li>Gift wrap</li>
  <li>Delivery</li>
</ul>
<ol>
  <li>Pack it in its box.</li>
  <li>Bring it to the shop.</li>
</ol>

Anything else, like a heading, goes outside the list, after its closing tag. The check prints a ul as list and an ol as numbered list, with their items under them:

> open the page
  screen:
    ...
    image: A white mug with a blue handle
    image: A green desk lamp
    list
      item: Mug $12
      item: Notebook $7
      item: Lamp $29
    heading 2: How to order
    numbered list
      item: Choose your products.
      item: Check your cart.
      item: Pay and pick up your order.
    heading 2: Opening hours
    ...

Your task: under the lamp image, add a ul with three items: Mug $12, Notebook $7 and Lamp $29. Under it, add an h2 How to order, then an ol with the three steps: Choose your products., Check your cart. and Pay and pick up your order.

Assignment
Follow the Coding Tutorial to add the shop's products as a list and the steps of ordering as a numbered list.

Hint
Each item is its own li, directly inside the list. The heading How to order goes after </ul>, not inside it.