From 152630de822be7dc14e94ed8c91e93b7ab393ce1 Mon Sep 17 00:00:00 2001 From: Tatijana Rajcic Date: Wed, 3 Jul 2019 18:57:19 +0200 Subject: [PATCH 1/3] first version with functions --- starter-code/pizza.js | 88 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 87 insertions(+), 1 deletion(-) diff --git a/starter-code/pizza.js b/starter-code/pizza.js index b473d048..ce81b47d 100755 --- a/starter-code/pizza.js +++ b/starter-code/pizza.js @@ -1 +1,87 @@ -// Write your Pizza Builder JavaScript in this file. +$(document).ready(function(){ + + // MY ELEMENTS + + var buttonPepperonnis = $(".btn-pepperonni"); + var buttonMushrooms = $(".btn-mushrooms"); + var buttonGreenpeppers = $(".btn-green-peppers"); + var buttonSauce = $(".btn-sauce"); + var buttonCrust = $(".btn-crust"); + + var pepperonnis = $(".pep"); + var mushrooms = $(".mushroom"); + var greenpeppers = $(".green-pepper"); + var sauce = $(".sauce"); + var crust = $(".crust"); + + // SET UP MY DEFAULT PIZZA + + function defaultPizza() { + sauce.removeClass("sauce-white"); + crust.removeClass("crust-gluten-free"); + buttonSauce.removeClass("active"); + buttonCrust.removeClass("active"); + $(".panel ul li:contains('white')").hide(); + $(".panel ul li:contains('gluten')").hide(); + } + + defaultPizza(); + + // DISPLAY INGREDIENTS DEPENDING ON THE PRESSED BUTTONS + + function toggleIngredients(button,ingredients) { + button.click(function(){ + ingredients.toggle(); + button.toggleClass("active"); + }) + } + + toggleIngredients(buttonPepperonnis,pepperonnis); + toggleIngredients(buttonMushrooms,mushrooms); + toggleIngredients(buttonGreenpeppers,greenpeppers); + + // DISPLAY PRICES DEPENDING ON THE PRESSED BUTTONS + + function togglePrices(button,keyword,selector) { + button.click(function(){ + $(selector + ":contains('" + keyword + "')").toggle(); + }) + } + + togglePrices(buttonPepperonnis,"pepperonni",".panel ul li"); + togglePrices(buttonMushrooms, "mushrooms",".panel ul li"); + togglePrices(buttonGreenpeppers, "green",".panel ul li"); + + // SWITCH BETWEEN TWO TYPES OF INGREDIENTS FOR ONE GIVEN TOPPING + + $(".btn-sauce").click(function(){ + $(".sauce").toggleClass("sauce-white"); + $(".btn-sauce").toggleClass("active"); + $(".panel ul li:contains('white')").toggle(); + }) + + $(".btn-crust").click(function(){ + $(".crust").toggleClass("crust-gluten-free"); + $(".btn-crust").toggleClass("active"); + $(".panel ul li:contains('gluten')").toggle(); + }) + + // CHECK FOR TOTAL PRICE + + $(".btn").click(function(){ + let myTotalPriceContainer = $("strong"); + myTotalPriceContainer.text("$"+checkTotalPrice()); + }) + + function checkTotalPrice() { + let myTotalPrice = 10; + let myAdditionalPricesContainer = $(".price ul li"); + myAdditionalPricesContainer.each(function(){ + if ($(this).css("display") !== "none") { + myTotalPrice += parseInt($(this).text().substr(1,1)); + } + }); + return myTotalPrice; + } + +}) From 787a5b2d5c47f581320353ded0837c9864d848b4 Mon Sep 17 00:00:00 2001 From: Tatijana Rajcic Date: Wed, 3 Jul 2019 19:10:05 +0200 Subject: [PATCH 2/3] added my comments --- starter-code/pizza.js | 55 +++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/starter-code/pizza.js b/starter-code/pizza.js index ce81b47d..1b083125 100755 --- a/starter-code/pizza.js +++ b/starter-code/pizza.js @@ -1,21 +1,14 @@ $(document).ready(function(){ - // MY ELEMENTS + // SET UP MY DEFAULT PIZZA + // default sauce and crust + // hidden prices of ingredients we don't want - var buttonPepperonnis = $(".btn-pepperonni"); - var buttonMushrooms = $(".btn-mushrooms"); - var buttonGreenpeppers = $(".btn-green-peppers"); var buttonSauce = $(".btn-sauce"); var buttonCrust = $(".btn-crust"); - - var pepperonnis = $(".pep"); - var mushrooms = $(".mushroom"); - var greenpeppers = $(".green-pepper"); var sauce = $(".sauce"); var crust = $(".crust"); - // SET UP MY DEFAULT PIZZA - function defaultPizza() { sauce.removeClass("sauce-white"); crust.removeClass("crust-gluten-free"); @@ -27,7 +20,15 @@ $(document).ready(function(){ defaultPizza(); - // DISPLAY INGREDIENTS DEPENDING ON THE PRESSED BUTTONS + // DISPLAY INGREDIENTS (MUSHROOMS/PEPERONNIS/GREENPEPPERS) DEPENDING ON THE PRESSED BUTTONS + // when we press a given button it adds/removes the ingredients we target + + var buttonPepperonnis = $(".btn-pepperonni"); + var buttonMushrooms = $(".btn-mushrooms"); + var buttonGreenpeppers = $(".btn-green-peppers"); + var pepperonnis = $(".pep"); + var mushrooms = $(".mushroom"); + var greenpeppers = $(".green-pepper"); function toggleIngredients(button,ingredients) { button.click(function(){ @@ -40,7 +41,24 @@ $(document).ready(function(){ toggleIngredients(buttonMushrooms,mushrooms); toggleIngredients(buttonGreenpeppers,greenpeppers); + // SWITCH BETWEEN TWO TYPES FOR ONE GIVEN TOPPING (SAUCE/CRUST) + // for one given topping, adds/removes a class that changes the type of topping + + buttonSauce.click(function(){ + sauce.toggleClass("sauce-white"); + buttonSauce.toggleClass("active"); + $(".panel ul li:contains('white')").toggle(); + }) + + buttonCrust.click(function(){ + crust.toggleClass("crust-gluten-free"); + buttonCrust.toggleClass("active"); + $(".panel ul li:contains('gluten')").toggle(); + }) + // DISPLAY PRICES DEPENDING ON THE PRESSED BUTTONS + // when we press a given button (mushrooms Button for ex.), using a keyword (ex:"mushroom") that is inside the
  • we target (thanks to the selector) + // it shows/hides this price of this element function togglePrices(button,keyword,selector) { button.click(function(){ @@ -52,21 +70,8 @@ $(document).ready(function(){ togglePrices(buttonMushrooms, "mushrooms",".panel ul li"); togglePrices(buttonGreenpeppers, "green",".panel ul li"); - // SWITCH BETWEEN TWO TYPES OF INGREDIENTS FOR ONE GIVEN TOPPING - - $(".btn-sauce").click(function(){ - $(".sauce").toggleClass("sauce-white"); - $(".btn-sauce").toggleClass("active"); - $(".panel ul li:contains('white')").toggle(); - }) - - $(".btn-crust").click(function(){ - $(".crust").toggleClass("crust-gluten-free"); - $(".btn-crust").toggleClass("active"); - $(".panel ul li:contains('gluten')").toggle(); - }) - // CHECK FOR TOTAL PRICE + // everytime a ingredient button is pressed, and depending if this item is shown or not on the page, we add its price to the total price $(".btn").click(function(){ let myTotalPriceContainer = $("strong"); From 470c76b61f1473ebf11edd2e0c45f562cd69f35c Mon Sep 17 00:00:00 2001 From: Tatijana Rajcic Date: Wed, 3 Jul 2019 19:15:06 +0200 Subject: [PATCH 3/3] fixed small bug for the initial total price --- starter-code/pizza.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/starter-code/pizza.js b/starter-code/pizza.js index 1b083125..15b334be 100755 --- a/starter-code/pizza.js +++ b/starter-code/pizza.js @@ -72,13 +72,13 @@ $(document).ready(function(){ // CHECK FOR TOTAL PRICE // everytime a ingredient button is pressed, and depending if this item is shown or not on the page, we add its price to the total price - - $(".btn").click(function(){ + + function updateTotalPrice(){ let myTotalPriceContainer = $("strong"); - myTotalPriceContainer.text("$"+checkTotalPrice()); - }) + myTotalPriceContainer.text("$"+calculateTotalPrice()); + }; - function checkTotalPrice() { + function calculateTotalPrice() { let myTotalPrice = 10; let myAdditionalPricesContainer = $(".price ul li"); myAdditionalPricesContainer.each(function(){ @@ -89,4 +89,10 @@ $(document).ready(function(){ return myTotalPrice; } + updateTotalPrice(); + + $(".btn").click(function(){ + updateTotalPrice(); + }) + })