[AMS] Merle Jansen

starter-code/index.html

@@ -26,10 +26,11 @@ <h1>Pizza Builder</h1>
           <button class="btn btn-green-peppers active">Green peppers</button>
         </li>
         <li>
-          <button class="btn btn-sauce active">White sauce</button>
+          <button class="btn btn-sauce ">White sauce</button>
         </li>
+
         <li>
-          <button class="btn btn-crust active">Gluten-free crust</button>
+          <button class="btn btn-crust ">Gluten-free crust</button>
         </li>
       </ul>
     </div>
@@ -41,13 +42,13 @@ <h2>Your pizza's price</h2>
 
       <b>$10 cheese pizza</b>
       <ul>
-        <li>$1 pepperonni</li>
-        <li>$1 mushrooms</li>
-        <li>$1 green peppers</li>
-        <li>$3 white sauce</li>
-        <li>$5 gluten-free crust</li>
+        <li class="price-pep">$<span>1</span>  pepperonni</li>
+        <li class="price-mush">$<span>1</span>  mushrooms</li>
+        <li class="price-green">$<span>1</span>  green peppers</li>
+        <li class="price-wsauce">$<span>3</span>  white sauce</li>
+        <li class="price-glut">$<span>5</span>  gluten-free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong>$<span id="sum">21</span> </strong>
     </aside>
     <!-- End Price -->
 

starter-code/pizza.js

@@ -1 +1,78 @@
 // Write your Pizza Builder JavaScript in this file.
+
+// to make a tomato sauce as default, toggle it first to OFF:
+//to make crust to be dafault
+$('.sauce').toggleClass('sauce-white');
+$('.crust').toggleClass('crust-gluten-free');
+$('.price-wsauce').toggle();
+$('.price-glut').toggle();
+
+//price of a plain pizza, displayed in #sum:
+var sum = 13;
+$('#sum').html(sum);
+
+//pepperoni toggel 
+//$(".selector").toggleClass(className)
+$('.btn-pepperonni').click(function(){
+  $('.pep').toggle();
+  $(this).toggleClass("active");
+  $('.price-pep').toggle();
+  if ($('.btn-pepperonni').hasClass('active')) {
+    sum += 1;
+  } else {
+    sum -=1;
+  }
+})
+
+//mushroom toggel 
+$('.btn-mushrooms').click(function(){
+  $('.mushroom').toggle();
+  $(this).toggleClass("active");
+  $('.price-mush').toggle();
+  if ($('.btn-mushrooms').hasClass('active')) {
+    sum += 1;
+  } else {
+    sum -=1;
+  }
+})
+
+//green-pepper toggel 
+$('.btn-green-peppers').click(function(){
+  $('.green-pepper').toggle();
+  $(this).toggleClass("active");
+  $('.price-green').toggle();
+
+  if ($('.btn-green-peppers').hasClass('active')) {
+    sum += 1;
+  } else {
+    sum -=1;
+  }
+})
+
+// choose white sauce
+$('.btn-sauce ').click(function(){
+  $('.sauce').toggleClass('sauce-white');
+  $(this).toggleClass("active");
+  $('.price-wsauce').toggle();
+  if ($('.btn-sauce ').hasClass('active')) {
+    sum += 3;
+  } else {
+    sum -=3;
+  }
+})
+
+// choose gluten-free 
+$('.btn-crust').click(function(){
+  $('.crust').toggleClass('crust-gluten-free');
+  $(this).toggleClass("active");
+  $('.price-glut').toggle();
+  if ($('.btn-crust').hasClass('active')) {
+    sum += 5;
+  } else {
+    sum -=5;
+  }
+})
+//funtion to calc total sum, on each btn pressing
+$('.btn').click(function(){
+  $('#sum').html(sum);
+})