From a2e329b0057378633f351ab050fb47cfa94d730c Mon Sep 17 00:00:00 2001 From: Patricia Date: Sun, 12 Jan 2020 22:10:42 -0600 Subject: [PATCH] solves --- starter-code/index.html | 10 ++++----- starter-code/pizza.js | 48 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+), 5 deletions(-) diff --git a/starter-code/index.html b/starter-code/index.html index 189a3311..afb8e381 100755 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -2,7 +2,7 @@ Pizza Builder - + @@ -26,10 +26,10 @@

Pizza Builder

  • - +
  • - +
    • @@ -44,8 +44,8 @@

    Your pizza's price

  • $1 pepperonni
  • $1 mushrooms
  • $1 green peppers
    • -
  • $3 white sauce
    • -
  • $5 gluten-free crust
    • +
  • $3 white sauce
    • +
  • $5 gluten-free crust
    • $21 diff --git a/starter-code/pizza.js b/starter-code/pizza.js index b473d048..7e21f45d 100755 --- a/starter-code/pizza.js +++ b/starter-code/pizza.js @@ -1 +1,49 @@ // Write your Pizza Builder JavaScript in this file. +$(() => updatePrice()); + +const hideShow = element => { + $(`.${element}`).css("display") == "none" + ? $(`.${element}`).show() + : $(`.${element}`).hide(); + updatePrice(); +}; + +function updatePrice() { + let base = 10; + for (let i = 1; i < 6; i++) { + if ($(`.price ul li:nth-child(${i})`).css("display") != "none") { + let price = $(`.price ul li:nth-child(${i})`).html(); + base += parseInt(price[1]); + } + } + $(".price strong").html(`$${base}`); +} +$("button.btn-pepperonni").on("click", function() { + hideShow("pep"); + hideShow("price ul li:nth-child(1)"); + $(this).toggleClass("active"); +}); + +$("button.btn-mushrooms").on("click", function() { + hideShow("mushroom"); + hideShow("price ul li:nth-child(2)"); + $(this).toggleClass("active"); +}); + +$("button.btn-green-peppers").on("click", function() { + hideShow("green-pepper"); + hideShow("price ul li:nth-child(3)"); + $(this).toggleClass("active"); +}); + +$("button.btn-sauce").on("click", function() { + $(".sauce").toggleClass("sauce-white"); + hideShow("price ul li:nth-child(4)"); + $(this).toggleClass("active"); +}); + +$("button.btn-crust").on("click", function() { + $(".crust").toggleClass("crust-gluten-free"); + hideShow("price ul li:nth-child(5)"); + $(this).toggleClass("active"); +});