Object & Array Practice

pizza-party.html

// HTML SECTION

    <h1>Papa Turing's Pizza</h1>
    <h2>Review Your Order</h2>
    <ul id="order-details"></ul>
    <button id="submit-order">Place Order</button>


// JAVASCRIPT SECTION

    let pizza = {
      orderNumber: 123,
      size: 14,
      delivery: true,
      extraCheese: true,
      toppings: ['onions', 'garlic', 'peppers']
    };

    // Object.keys() returns an array containing 
    // each property of the object you specify
    let orderDetails = Object.keys(pizza);

    // Arrays have a prototype method that allows you
    // to iterate through them as well: forEach
    orderDetails.forEach(key => {
      let ulElem = document.getElementById('order-details');
      let newLiElem = document.createElement('li');
      newLiElem.innerText = `${key}: ${pizza[key]}`;
      ulElem.appendChild(newLiElem);
    });

    // Pizza time!
    let submitButton = document.getElementById('submit-order');

    submitButton.addEventListener('click', (event) => {
      let ulElem = document.getElementById('order-details');
      ulElem.innerHTML = '';

      // 1. Create a new object named 'order' that includes:
      //    a timestamp (the time the order was placed),
      //    a delivery property (either true/false),
      //    an order number (can be an arbitrary integer like 123456)
      // 2. Merge the `order` object with the `pizza` object
      // 3. Append each key/value pair from your newly merged object to the <ul>
    });