Adding Pizzas To The Oven

What we will be doing

The final stage of moving this pizza around is to move it from the kitchen to the oven. We have not yet created the pizza, but we will look at how to do this soon, along with checking the correct ingredients have been used.

For now, we can use the pizza name which we have selected and add this to the oven. Our oven will be an array to store multiple pizzas, and we will need some other variables too.

Create the oven related variables

Create the following variables above our functions:

// to store pizzas
let oven = [];

// max number of pizzas which will fit in oven
const ovenCapacity = 6;

// keep track of the pizzas we have made for each single order
let pizzasCompleteForOrder = 0;

Adding pizzas to the oven

To the bottom of our script, our first function will be used to push the pizza to this new oven array:

function addToOven() {
  // get current pizza name from the kitchen heading
  const pizzaName = document.querySelector('#current_pizza').innerText;
  // check if a pizza has been selected
  if (pizzaName) {
    // push to array
    oven.push(pizzaName);
  }
  // console log to check if working
  console.log(oven);
}

Listening for a button click

To call this function, we can attach a click listener. In the HTML we have a button to add the pizza to the oven. Add a unique ID to this element:

<div>
  <!-- add the id attribute: -->
  <button id="addToOven" class="oven_btn">OVEN</button>
  <!-- ... -->

To the bottom of the script, add an event listener to listen for the button click:

document.querySelector('#addToOven').addEventListener('click', addToOven);

To test this out, select a pizza to add to the kitchen area, then add to the oven using the button. The oven array should fill up in the console. Now we know this works, we can extend it a little. Along with adding this pizza name to the oven, we need to also set the time it was added. This is because later we will also add a cooking time.

Creating a pizza object

For this we can create a new object in the addToOven function:

function addToOven() {
  // get current pizza name from kitchen heading
  const pizzaName = document.querySelector('#current_pizza').innerText;

  if (pizzaName) {
    // 1. create object
    const pizzaForOven = {
      name: pizzaName,
      // temporary time placeholder- will come back to
      timeAdded: '5/5/28',
    };
    // 2. change name:
    oven.push(pizzaForOven);
  }
// …

Updating number of completed orders

And update the number of completed pizzas at the top of the function:

function addToOven() {
  pizzasCompleteForOrder++;
  // ...

The oven array now contains the pizzas. Next, a function to loop through this array and display them in the oven section.

Displaying pizzas in the oven

Just after we push to the oven, this new function can be called to update the user interface:

function addToOven() {
  pizzasCompleteForOrder++;
  const pizzaName = document.querySelector('#current_pizza').innerText;
  if (pizzaName) {
    const pizzaForOven = {
      name: pizzaName,
      timeAdded: '5/5/28',
    };
    oven.push(pizzaForOven);
    // Call the function
    displayOvenItems();
  }
}

Then create this function to add pizzas to the oven:

function displayOvenItems() {

  // clear oven before re-calculating
  document.querySelector('#oven').innerHTML = '';

  // loop through all pizzas in oven
  oven.forEach(function (pizza) {

  // create pizza wrapper
  const pizzaDiv = document.createElement('div');

  // add class for css
  pizzaDiv.className = 'pizza_div';

  // pizza image
  const image = document.createElement('img');
  image.src = 'pizza.svg';

  // create pizza name element
  const pizzaName = buildElement('p', `(${pizza.name})`);

  // append can add multiple nodes, add image and pizza name to wrapper
  pizzaDiv.append(image, pizzaName);

  // add final pizza to dom
  document.querySelector('#oven').appendChild(pizzaDiv);

  });
}

The pizzas should now display in the oven area when added to the array. We still need to come back to creating the pizzas, but we know this step is ready when we do. And we will come back to these functions to check the correct ingredients have been used later.

Completed code after this lesson

If needed, here is the completed code we added to the starter file:

let oven = [];
const ovenCapacity = 6;
let pizzasCompleteForOrder = 0;

function buildElement(elementName, elementContent) {
    const element = document.createElement(elementName);
    const content = document.createTextNode(elementContent);
    element.appendChild(content);
    return element;
}

function createListOfPizzas(pizzas) {
    const pizzaList = document.createElement("ul");
    pizzas.forEach(function (pizza) {
        const orderQuantityEl = buildElement("span", `${pizza.quantity} - `);
        const pizzaNameElement = buildElement("span", pizza.name);
        pizzaNameElement.classList.add("pizza_name");
        const pizzaItem = document.createElement("li");
        pizzaItem.append(orderQuantityEl, pizzaNameElement);
        pizzaList.appendChild(pizzaItem);
    });
    return pizzaList;
}

function createSingleOrder(order) {
    const orderWrapper = document.createElement("div");
    orderWrapper.className = "order_wrapper";
    orderWrapper.addEventListener("click", selectCurrentOrder);
    const orderNumberEl = buildElement("h4", `Order: ${order.id}`);
    orderWrapper.appendChild(orderNumberEl);
    const pizzaList = createListOfPizzas(order.pizzas);
    orderWrapper.appendChild(pizzaList);
    return orderWrapper;
}

function createOrdersList() {
    orders.forEach(function (order) {
        const singleOrder = createSingleOrder(order);
        document.querySelector("#orders").appendChild(singleOrder);
    });
}

function selectCurrentOrder(e) {
    const pizzas = document.querySelectorAll(".pizza_name");
    pizzas.forEach(function (pizza) {
        pizza.addEventListener("click", setCurrentPizza);
    });

    if (document.querySelector("#working_on").children.length > 1) {
        return;
    }
    let element = e.target;
    const orderWrapper = element.closest(".order_wrapper");
    if (orderWrapper !== null) {
        orderWrapper.removeEventListener("click", selectCurrentOrder);
        const orderDiv = document.querySelector("#working_on");
        orderDiv.appendChild(orderWrapper);
    }
}

function setCurrentPizza(e) {
    const pizzaName = e.target.innerText;
    document.querySelector("#current_pizza").innerText = pizzaName;
    displayMethod(pizzaName);
}
createOrdersList();

function displayMethod(pizzaName) {
    document.querySelector("#pizza_name").innerText = pizzaName;
    const selectedPizza = pizzas.find((pizza) => pizza.name === pizzaName);
    const methodSteps = selectedPizza.method.split(".");
    document.querySelector("#pizza_method").innerHTML = "";
    methodSteps.forEach(function (method) {
        const element = buildElement("li", method);
        document.querySelector("#pizza_method").appendChild(element);
    });
}

function addToOven() {
    pizzasCompleteForOrder++;
    const pizzaName = document.querySelector("#current_pizza").innerText;
    if (pizzaName) {
        const pizzaForOven = {
            name: pizzaName,
            timeAdded: "5/5/28",
        };
        oven.push(pizzaForOven);
        displayOvenItems();
    }
}

document.querySelector("#addToOven").addEventListener("click", addToOven);

function displayOvenItems() {
    document.querySelector("#oven").innerHTML = "";
    oven.forEach(function (pizza) {
        const pizzaDiv = document.createElement("div");
        pizzaDiv.className = "pizza_div";
        const image = document.createElement("img");
        image.src = "pizza.svg";
        const pizzaName = buildElement("p", `(${pizza.name})`);
        pizzaDiv.append(image, pizzaName);
        document.querySelector("#oven").appendChild(pizzaDiv);
    });
}