LAB | DOM Pizza Builder

Introduction

We have got the munchies for a nice, fresh pie of pizza. Of course, we want to order online. After all, talking to a person will only delay the consumption of pizza.

There is only one problem: our local pizzeria's pizza builder is not working. This time, the local pizzeria is in luck because their customer today is a Web developer. We always hear about how developers should give back to their community. I can't think of a more meaningful contribution than helping the community get pizza more easily.

You can find a demo of the finished version by clicking here.

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

• Create Pull Request so your TAs can check up your work.

Instructions

We will only work with the js/index.js file. As you will see, the file contains some code. The file is built to have a separation of concerns and make the code scalable. This architecture is very close to what you will use with React.

In this architecture, there is a variable state with different values, such as pepperoni initially set to true. When the user clicks on it, the value will be changed to the opposite (example: false).

In this architecture, there is also a function renderEverything that renders the pizza, the buttons and the price based on the state. This function every time the state is changed, because the pizza, the buttons and the price must be changed. To give an example, when state.pepperoni is true, the function will:

• make the pepperoni on the pizza visible,
• add a class active to the "pepperoni" button,
• update the price panel.

Iteration 1: Add and remove toppings

There are five buttons on the left of the pizza builder. Three of those have to add or remove toppings from the pizza. Write the necessary JavaScript for those three buttons to add and remove pepperoni, mushrooms and green peppers from the pizza. Don't worry about updating the price. We will do it later.

Each individual topping has its own HTML element.

<!-- When this button is clicked -->
<button class="btn btn-pepperoni active">Pepperoni</button>

<!-- ... -->

<!-- Hide/show all the following sections at the same time -->
<section class="pep one">1</section>
<section class="pep two">2</section>
<!-- ... -->

<!-- When this button is clicked -->
<button class="btn btn-mushrooms active">Mushrooms</button>

<!-- ... -->

<!-- Hide/show all the following sections at the same time -->
<section class="mushroom one">
  <div class="cap">1</div>
  <div class="stem"></div>
</section>
<section class="mushroom two">
  <div class="cap">2</div>
  <div class="stem"></div>
</section>
<!-- ... -->

<!-- When this button is clicked -->
<button class="btn btn-green-peppers active">Green peppers</button>

<!-- ... -->

<!-- Hide/show all the following sections at the same time -->
<section class="green-pepper one"></section>
<section class="green-pepper two"></section>
<!-- ... -->

Create the code to hide/show those elements when the buttons are clicked. For this, you will have to:

• Add click event listener on <button class="btn btn-mushrooms"> and <button class="btn btn-green-peppers"> (pepperoni is already done)
• Write the code for the functions renderMushrooms() and renderGreenPeppers()

Iteration 2: Sauce and crust options

In this iteration, your goal is to:

• Add click event listener on <button class="btn btn-sauce"> and change state.whiteSauce
• Write the function renderWhiteSauce()
• Add click event listener on <button class="btn btn-crust"> and change state.glutenFreeCrust
• Write the function renderGlutenFreeCrust()

As you can see, the initial value for state.whiteSauce and state.glutenFreeCrust is false. The reason is because, by default, we want a pizza with pepperoni, mushrooms, green peppers but no white sauce nor gluten-free crust.

For now, don't worry about updating the price.

<!-- Example of a pizza with white-sauce and a gluten-free crust -->
<section class="crust crust-gluten-free">
  <section class="cheese"></section>
  <section class="sauce sauce-white"></section>
</section>

<!-- Example of a pizza with no white-sauce and no gluten-free crust -->
<section class="crust">
  <section class="cheese"></section>
  <section class="sauce"></section>
</section>

Iteration 3: Make the buttons active or not

Currently, all buttons look the same, no matter if the option is activated or not. If you notice, all the buttons have an active class.

<button class="btn btn-pepperoni active">Pepperoni</button>

Write the logic for removing and adding the buttons' active class appropriately. Write the code in the function renderButtons().

Iteration 4: Ingredients and prices

On the right side of the pizza builder, there is a price section.

Write the function renderPrice() that:

• Displays the list of all items selected
• Displays the total price.

Happy coding! ❤️