Skip to content

completed #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
debasrid wants to merge 2 commits into
base: master
Choose a base branch
from
Open

completed #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c0a49d
pizza is flying
debasrid Feb 16, 2019
3611185
Pizza Project done
debasrid Feb 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 -->

Expand Down Expand Up @@ -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 -->
Expand Down
131 changes: 131 additions & 0 deletions starter-code/pizza.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }];

Copy link

@lienekechee lienekechee Feb 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this variable is better named something like pizzaPrices, since you still have to calculate the total prices later.

// create object containing base pizza price

Copy link

@lienekechee lienekechee Feb 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be super nice to use a constructor function here!

function Topping(type, 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
});

Copy link

@lienekechee lienekechee Feb 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's try our best to avoid duplicate code; normally if you have to repeat the same kind of thing over and over again, its more appropriate to write a function, this is what they are for. Some things to think about when setting up your program:

  1. What are the collections of data that I need to store? Since your toppings and your prices don't change, we can declare them immediately in an array, and have a separate array for prices. Maybe even the type strings can correspond to the class name of the button. Do you see how that might be helpful?
  2. There are default settings for this pizza page. Perhaps setting up all your variables in one place then writing a setupDefaultView() function that sets up initial toppings and prices, or something similar, could be a little clearer.

// 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);
});

});