diff --git a/starter-code/index.html b/starter-code/index.html
index 189a3311..59a72c24 100755
--- a/starter-code/index.html
+++ b/starter-code/index.html
@@ -17,13 +17,13 @@ <h1>Pizza Builder</h1>
     <div class="panel controls">
       <ul>
         <li>
-          <button class="btn btn-pepperonni active">Pepperonni</button>
+          <button class="btn btn-pepperonni">Pepperonni</button>
         </li>
         <li>
-          <button class="btn btn-mushrooms active">Mushrooms</button>
+          <button class="btn btn-mushrooms">Mushrooms</button>
         </li>
         <li>
-          <button class="btn btn-green-peppers active">Green peppers</button>
+          <button class="btn btn-green-peppers">Green peppers</button>
         </li>
         <li>
           <button class="btn btn-sauce active">White sauce</button>
@@ -41,13 +41,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>$<span>1</span> pepperonni</li>
+        <li>$<span>1</span> mushrooms</li>
+        <li>$<span>1</span> green peppers</li>
+        <li style="display:none;">$<span>3</span> white sauce</li>
+        <li style="display:none;">$<span>5</span> gluten free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong><span id="total">$</span></strong>
     </aside>
     <!-- End Price -->
 
@@ -268,9 +268,9 @@ <h2>Your pizza's price</h2>
       <section class="pep thirty-one">31</section>
       <section class="pep thirty-three">33</section>
 
-      <section class="crust crust-gluten-free">
+      <section class="crust">
         <section class="cheese"></section>
-        <section class="sauce sauce-white"></section>
+        <section class="sauce"></section>
       </section>
     </div>
     <!-- End Pizza -->
diff --git a/starter-code/pizza.js b/starter-code/pizza.js
index b473d048..d12f8934 100755
--- a/starter-code/pizza.js
+++ b/starter-code/pizza.js
@@ -1 +1,132 @@
 // Write your Pizza Builder JavaScript in this file.
+$('document').ready(function () {
+    
+    // array to calc final pizza price
+    var pizzaTotalPrice = [{ type: '', price: 0 }];
+
+    // create object containing base pizza price
+
+    pizzaTotalPrice.push({
+        type: "basePizza",
+        price: 10
+    });
+
+    pizzaTotalPrice.push({
+        type: "pepperonniTopping",
+        price: 1
+    });
+
+    pizzaTotalPrice.push({
+        type: "mushroomTopping",
+        price: 1
+    });
+
+    pizzaTotalPrice.push({
+        type: "greenPepperTopping",
+        price: 1
+    });
+
+    // Total value Calculation
+
+    var pizzaTotal = pizzaTotalPrice.reduce((a, b) => ({ price: a.price + b.price }));
+    $("#total").text("$" + pizzaTotal.price);
+
+    // Pepperoni topping button
+
+    $('.btn-pepperonni').click(function () {
+        $('.pep').toggle()
+        if ($('.btn-pepperonni').hasClass("active")) {
+            $('.price li').eq(0).show();
+
+            pizzaTotalPrice.push({
+                type: "pepperonniTopping",
+                price: 1
+            })
+
+        }
+        else {
+            $('.price li').eq(0).hide();
+            pizzaTotalPrice.splice(pizzaTotalPrice.map(function (e) { return e.type; }).indexOf('pepperonniTopping'), 1);
+        }
+    });
+
+    // Mushroom topping button
+
+    $('.btn-mushrooms').click(function () {
+        $('.mushroom').toggle()
+        if ($('.btn-mushrooms').hasClass("active")) {
+            $('.price li').eq(1).show();
+
+            pizzaTotalPrice.push({
+                type: "mushroomTopping",
+                price: 1
+            })
+        }
+        else {
+            $('.price li').eq(1).hide();
+            pizzaTotalPrice.splice(pizzaTotalPrice.map(function (e) { return e.type; }).indexOf('mushroomTopping'), 1);
+        }
+    });
+
+    // Green Pepper topping button
+
+    $('.btn-green-peppers').click(function () {
+        $('.green-pepper').toggle()
+        if ($('.btn-green-peppers').hasClass("active")) {
+            $('.price li').eq(2).show();
+            pizzaTotalPrice.push({
+                type: "greenPepperTopping",
+                price: 1
+            })
+        }
+        else {
+            $('.price li').eq(2).hide();
+            pizzaTotalPrice.splice(pizzaTotalPrice.map(function (e) { return e.type; }).indexOf('greenPepperTopping'), 1);
+        }
+    });
+
+    // White Sauce topping button
+
+    $('.btn-sauce').click(function () {
+        $('.sauce').toggleClass("sauce-white")
+        if ($('.btn-sauce').hasClass("active")) {
+
+            $('.price li').eq(3).show();
+            pizzaTotalPrice.push({
+                type: "whiteSauceTopping",
+                price: 3
+            })
+        }
+        else {
+            $('.price li').eq(3).hide();
+            pizzaTotalPrice.splice(pizzaTotalPrice.map(function (e) { return e.type; }).indexOf('whiteSauceTopping'), 1);
+        }
+    });
+
+    // Gluten Free Crust button
+    $('.btn-crust').click(function () {
+        $('.crust-gluten-free').toggleClass("crust")
+        if ($('.btn-crust').hasClass("active")) {
+
+            $('.price li').eq(4).show();
+            pizzaTotalPrice.push({
+                type: "GlutenFreeCrust",
+                price: 5
+            })
+        }
+        else {
+            $('.price li').eq(4).hide();
+            pizzaTotalPrice.splice(pizzaTotalPrice.map(function (e) { return e.type; }).indexOf('GlutenFreeCrust'), 1);
+        }
+    });
+
+    //Total Price Calculation
+
+    $(".btn").on("click", function () {
+        $(this).toggleClass("active");
+
+        var pizzaTotal = pizzaTotalPrice.reduce((a, b) => ({ price: a.price + b.price }));
+        $("#total").text("$" + pizzaTotal.price);
+    });
+
+});