ironhack-labs · 02ernesto · Aug 8, 2019 · Nov 18, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/starter-code/index.html b/starter-code/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Pizza Builder</title>
+    <title>Pizza Builder ErnestO</title>
     <link rel="stylesheet" href="pizza.css">
   </head>
 
   <body>
     <!-- Begin Header -->
     <header>
-      <h1>Pizza Builder</h1>
+      <h1>Pizza Builder ErnestO</h1>
       <p class="description">Build your own HTML and CSS pizza.</p>
     </header>
     <!-- End Header -->
@@ -221,7 +221,7 @@ <h2>Your pizza's price</h2>
       </section>
 
       <section class="mushroom thirty">
-        <div class="cap">30</div>
+        <div class="cap"><strong>30</strong></div>
         <div class="stem"></div>
       </section>
 
@@ -289,6 +289,10 @@ <h2>Your pizza's price</h2>
     </footer>
     <!-- Footer -->
 
+    <script
+    src="https://code.jquery.com/jquery-3.4.1.min.js"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+    crossorigin="anonymous"></script>
     <script src="jquery-2.1.4.js"></script>
     <script src="pizza.js"></script>
   </body>

diff --git a/starter-code/pizza.css b/starter-code/pizza.css
@@ -384,12 +384,12 @@ p.description {
     text-indent: -9999px;
     color: #fff;
 }
-/*.pep:hover{
+pep:hover{
     -moz-transform: scale(1.3);
     -webkit-transform: scale(1.3);
     -o-transform: scale(1.3);
     transform: scale(1.3);
-  } */
+  } 
 .pep.one {
     margin: 60px 0 0 305px;
 }

diff --git a/starter-code/pizza.js b/starter-code/pizza.js
@@ -1 +1,36 @@
 // Write your Pizza Builder JavaScript in this file.
+
+
+//buttons
+//1
+$('.btn-pepperonni').click(function () { 
+    $('.btn-pepperonni').toggleClass('active')  //Obtiene boton peperoni 
+    $('.pep').toggle();//LE da la propiedad de toggle
+    $('li:contains("$1 pepperonni")').toggle(1000); //le da un aspecto de transición 
+
+});
+//2
+
+$('.btn-mushrooms').click(function () { 
+    $('.btn-mushrooms').toggleClass('active')
+    $('.mushroom').toggle();
+    $('li:contains("$1 mushrooms")').toggle(1000);     
+});
+//3
+$('.btn-green-peppers').click(function () { 
+    $('.btn-green-peppers').toggleClass('active')
+    $('.green-pepper').toggle();
+    $('li:contains("$1 green peppers")').toggle(1000);     
+});
+//4
+$('.btn-sauce').click(function () { 
+    $('.btn-sauce').toggleClass('active')
+    $('.sauce').toggle();    
+    $('li:contains("$3 white sauce")').toggle(1000); 
+});
+//5
+$('.btn-crust').click(function () { 
+    $('.btn-crust').toggleClass('active')
+    $('.crust').toggle(); 
+    $('li:contains("$5 gluten-free crust")').toggle(1000);    
+});