diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f673a71b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/starter-code/index.html b/starter-code/index.html index 189a3311..0eeb2448 100755 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -1,14 +1,14 @@ - Pizza Builder + Pizza Builder ErnestO
-

Pizza Builder

+

Pizza Builder ErnestO

Build your own HTML and CSS pizza.

@@ -221,7 +221,7 @@

Your pizza's price

-
30
+
30
@@ -289,6 +289,10 @@

Your pizza's price

+ diff --git a/starter-code/pizza.css b/starter-code/pizza.css index 2d125b3d..7a02b050 100755 --- 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 index b473d048..d0e0e42f 100755 --- 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); +});