Discounting the pizzas

2019-05-07•javascript

Until now, we have only updated the home pages by adding new Players to the Dreamteam. But it is also important to be able to update a single property of an object. So let’s use the pizza site as a starting point and show how we could implement a discount where the price of all pizza are reduced by the same percentage

The repl with all code can be found here: Pizzalist with discount

The input field and button

We start in the HTML file by implementing an input field with the percentage we want the pizzas to be discounted with. This is followed by a button that actually performs the update of the prices.

<form class="myForm">
  <label for="discount">Discount</label>
  <input type="number" name="discount" id="discount" required>
  <input type="button" class="calc-button" onclick="makeDiscount(pizzas, discount.value)"
  value="Make Discount" />
</form>

The syntax used here is exactly the same as in the Dreamteam project. The only difference is that our makeDiscount function takes two arguments.

The discount function

Our discount function take an Array of pizzas and a number between 1 and 100 representing the discount. First we have a for..of loop that goes through the pizzas. It then sets the new price based on the value of the discount argument. After that we call a function called updateAll(). This is necessary to force the HTML page to be updated with the new prices.

function makeDiscount(pizzas, discount) {
  for (pizza of pizzas) {
    pizza.pizzaPrize = pizza.pizzaPrize * (1 - (discount / 100));
  }
  updateAll();
}

The updateAll function

This function does not really do anything new. We make this solely to avoid code duplication:

function updateAll() {
  document.getElementById("listAll").innerHTML = displayAllPizzas(pizzas);

  document.getElementById("listNumbered").innerHTML = displayPizzaNumbered(pizzas);

  document.getElementById("listGarlic").innerHTML = displayGarlicPizzas(pizzas);
}

As we can see, the updateAll function merely calls the three display functions. Why would we do that? As the program grows larger it is natural to organize pieces of the code that are used together into one function. The program needs to call all the display functions on the first run and since it also needs to call them after updating the price, it makes sense to pack them into one function.

So this is the reason for the following code right after the function definition:

updateAll();

This merely calls the function and displays the initial values.

Rounding the pizza prices

Nobody wants to buy a pizza that costs 54.9876 kr. So wouldn’t it be nice if we could round to the nearest number? Luckily, we can. The Math.round function does exactly that. So we use it in our display functions like this:

function displayAllPizzas(pizzas) {
  let pizzaString = "";
  for (pizza of pizzas) {
    pizzaString += pizza.pizzaName + ", " + pizza.pizzaType + ", " + Math.round(pizza.pizzaPrize) + ", " + pizza.garlic + "<br/>";
  }
  return pizzaString;
}

We have to use it in all of our three display functions right now. Maybe we could somehow refactor the code so we have a shared display function where we only have to call Math.round in one place. But that is a tale for another time :-).

Informatics - programming