diff --git a/starter-code/index.html b/starter-code/index.html index 189a3311..0f5e729b 100755 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -3,6 +3,8 @@ Pizza Builder + + @@ -26,11 +28,12 @@

Pizza Builder

  • - +
  • - +
    • + @@ -41,13 +44,13 @@

    Your pizza's price

    $10 cheese pizza - $21 + $21 @@ -268,9 +271,9 @@

    Your pizza's price

    31
    33
    -
    +
    -
    +
    @@ -290,6 +293,6 @@

    Your pizza's price

    - + diff --git a/starter-code/js/pizza.js b/starter-code/js/pizza.js new file mode 100755 index 00000000..9c72af00 --- /dev/null +++ b/starter-code/js/pizza.js @@ -0,0 +1,81 @@ +// Write your Pizza Builder JavaScript in this file. +$(document).ready(function() { + + + var sumPrice = document.getElementsByClassName('ingredients'); + var totalPrice = document.querySelector('.totalPrice'); + var calculatePrice = 0; + + //elegimos ingredientes, ingrediente-botón activo ||no ingrediente-no activo + $(".btn").removeClass("active") + + $(".btn-pepperonni").click(function(event){ + if ($(".pep").hasClass("pep-index")) { + $(".pep").removeClass("pep-index") && $(".price li:nth-child(1)").removeClass("visible"); + $(".btn-pepperonni").removeClass("active") + totalPrice.innerHTML = calculatePrice -= 1; + + } else { + $(".pep").addClass("pep-index") && $(".price li:nth-child(1)").addClass("visible"); + $(".btn-pepperonni").addClass("active") + totalPrice.innerHTML = calculatePrice += 1; + } + + }) + + $(".btn-mushrooms").click(function(event){ + if ($(".mushroom").hasClass("mushroom-index")) { + $(".mushroom").removeClass("mushroom-index") && $(".price li:nth-child(2)").removeClass("visible"); + $(".btn-mushrooms").removeClass("active") + totalPrice.innerHTML = calculatePrice -= 1; + + } else { + $(".mushroom").addClass("mushroom-index") && $(".price li:nth-child(2)").addClass("visible"); + $(".btn-mushrooms").addClass("active") + totalPrice.innerHTML = calculatePrice += 1; + } + }) + + $(".btn-green-peppers").click(function(event){ + if ($(".green-pepper").hasClass("green-pepper-index")) { + $(".green-pepper").removeClass("green-pepper-index") && $(".price li:nth-child(3)").removeClass("visible"); + $(".btn-green-peppers").removeClass("active") + totalPrice.innerHTML = calculatePrice -= 1; + + } else { + $(".green-pepper").addClass("green-pepper-index") && $(".price li:nth-child(3)").addClass("visible"); + $(".btn-green-peppers").addClass("active") + totalPrice.innerHTML = calculatePrice += 1; + } + }) + + $(".btn-sauce").click(function(event){ + if ($(".sauce").hasClass("sauce-white")) { + $(".sauce").removeClass("sauce-white") && $(".price li:nth-child(5)").removeClass("visible"); + $(".btn-sauce").removeClass("active") + totalPrice.innerHTML = calculatePrice -= 3; + + } else { + $(".sauce").addClass("sauce-white") && $(".price li:nth-child(5)").addClass("visible"); + $(".btn-sauce").addClass("active") + totalPrice.innerHTML = calculatePrice += 3; + } + }) + + $(".btn-crust").click(function(event){ + if ($(".crust").hasClass("crust-gluten-free")) { + $(".crust").removeClass("crust-gluten-free") && $(".price li:nth-child(4)").removeClass("visible"); + $(".btn-crust").removeClass("active") + totalPrice.innerHTML = calculatePrice -= 5; + + } else { + $(".crust").addClass("crust-gluten-free") && $(".price li:nth-child(4)").addClass("visible"); + $(".btn-crust").addClass("active") + totalPrice.innerHTML = calculatePrice += 5; + } + }) + + + +}); + diff --git a/starter-code/pizza.css b/starter-code/pizza.css index 2d125b3d..061b42b2 100755 --- a/starter-code/pizza.css +++ b/starter-code/pizza.css @@ -319,6 +319,12 @@ p.description { display: block; margin-top: 6px; } +.ingredients{ + visibility: hidden; +} +.visible{ + visibility: visible; +} /*--- Crust & Sauce ---*/ .crust { @@ -370,12 +376,12 @@ p.description { } .pep { + display: block; position: absolute; width: 80px; height: 70px; border-radius: 60px; background: #b3241c; - z-index: 15; font-size: 2em; text-align: center; padding-top: 10px; @@ -384,6 +390,9 @@ p.description { text-indent: -9999px; color: #fff; } +.pep-index{ + z-index: 20; +} /*.pep:hover{ -moz-transform: scale(1.3); -webkit-transform: scale(1.3); @@ -523,10 +532,12 @@ p.description { position: absolute; width: 70px; height: 75px; - z-index: 20; margin: 200px 0 0 200px; text-indent: -9999px; } +.mushroom-index{ + z-index: 40; +} .cap { width: 70px; @@ -811,7 +822,9 @@ p.description { background: #2f5e20; box-shadow: 2px 2px 2px rgba(66, 132, 45, .9); margin: 250px 0 0 400px; - z-index: 30; +} +.green-pepper-index{ + z-index: 60; } .green-pepper.one { @@ -853,7 +866,6 @@ p.description { -o-transform: rotate(-86deg); transform: rotate(-86deg); } - .green-pepper.six { margin: 300px 0 0 200px; -webkit-transform: rotate(0deg); @@ -982,6 +994,8 @@ p.description { transform: rotate(69deg); } +/*------ Added clases -----*/ + /*------ Footer -----*/ footer { margin: 0 0 30px 0; diff --git a/starter-code/pizza.js b/starter-code/pizza.js deleted file mode 100755 index b473d048..00000000 --- a/starter-code/pizza.js +++ /dev/null @@ -1 +0,0 @@ -// Write your Pizza Builder JavaScript in this file.