Section Introduction

Open the project folder

What is coming up

Coming up we have a great project for you to work through. This is going to give you lots of practice with what you have learned.

It is a reasonably big project compared to what we have built so far. But most of which you already know, it is just a case of building one small feature at a time.

Along the way, you will have a series of tasks to try things out yourself, but don’t worry, you are not on your own. We will also be going through each stage so you can compare. Remember though, with coding there is often lots of ways to do things, so if you have a different solution which works, this is fine.

For the starter files, we have a basic starter with the HTML and CSS for the project so we can focus on the JavaScript.

This is the bare project with no functionality, we will be coding all of this during the upcoming sections.

Also, there is a JavaScript file linked. This contains three starter arrays. First is a pizzas array, and you can change or add to this array if you want to:

// index.js
const pizzas = [
 {
    name: 'Margherita',
    method:
      '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese.',
    requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE'],
  },
  // …
]

It contains a pizza name, the required steps and method. We will use this in the project to check the chef has made the correct pizza.

Then below, some sample orders to get the game going. We will also be generating these dynamically:

let orders = [
  {
    id: 1,
    pizzas: [
      {
        quantity: 1,
        name: 'Ham and Pineapple',
      },
      {
        quantity: 2,
        name: 'Pepperoni',
      },
    ],
  },
  // ...
]

Finally, a list of the ingredients we need in the kitchen:

const ingredients = [
  'ROLL DOUGH',
  'PIZZA SAUCE',
  'CHEESE',
  'PEPPERONI',
  'HAM',
  'PINEAPPLE',
  'ONIONS',
  'PEPPERS',
  'MUSHROOMS',
  'GARLIC',
  'CHICKEN',
];

We are now ready to begin the project.