diff --git a/src/components/Burger/BuildControls/BuildControls.css b/src/components/Burger/BuildControls/BuildControls.css
index 4e6815e..560a2db 100644
--- a/src/components/Burger/BuildControls/BuildControls.css
+++ b/src/components/Burger/BuildControls/BuildControls.css
@@ -7,4 +7,46 @@
box-shadow: 0 2px 1px #ccc;
margin: auto;
padding: 10px 0;
+}
+
+
+.OrderButton {
+ background-color: #DAD735;
+ outline: none;
+ cursor: pointer;
+ border: 1px solid #966909;
+ color: #966909;
+ font-family: inherit;
+ font-size: 1.2em;
+ padding: 15px 30px;
+ box-shadow: 2px 2px 2px #966909;
+}
+
+.OrderButton:hover, .OrderButton:active {
+ background-color: #A0DB41;
+ border: 1px solid #966909;
+ color: #966909;
+}
+
+.OrderButton:disabled {
+ background-color: #C7C6C6;
+ cursor: not-allowed;
+ border: 1px solid #ccc;
+ color: #888888;
+}
+
+.OrderButton:not(:disabled) {
+ animation: enable 0.3s linear;
+}
+
+@keyframes enable {
+ 0% {
+ transform: scale(1);
+ }
+ 60% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
}
\ No newline at end of file
diff --git a/src/components/Burger/BuildControls/BuildControls.js b/src/components/Burger/BuildControls/BuildControls.js
index 4a99bbe..e4e3a66 100644
--- a/src/components/Burger/BuildControls/BuildControls.js
+++ b/src/components/Burger/BuildControls/BuildControls.js
@@ -4,23 +4,25 @@ import BuildControl from './BuildControl/BuildControl';
import classes from './BuildControls.css';
const controls = [
- { name: 'Salad', type: 'salad'},
- { name: 'Cheese', type: 'cheese'},
- { name: 'Bacon', type: 'bacon'},
- { name: 'Meat', type: 'meat'},
+ { name: 'Salad', type: 'salad' },
+ { name: 'Cheese', type: 'cheese' },
+ { name: 'Bacon', type: 'bacon' },
+ { name: 'Meat', type: 'meat' },
];
const buildControls = (props) => (
Current Price: {props.price.toFixed(2)}
- {controls.map( ctrl => (
-
props.ingredientAdded(ctrl.type) }
- removed={() => props.ingredientRemoved(ctrl.type)}
- disabled={props.disabled[ctrl.type]} />
+ {controls.map(ctrl => (
+ props.ingredientAdded(ctrl.type)}
+ removed={() => props.ingredientRemoved(ctrl.type)}
+ disabled={props.disabled[ctrl.type]} />
))}
+
)
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.js b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
index 0894688..6e734c7 100644
--- a/src/components/Burger/BurgerIngredient/BurgerIngredient.js
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
@@ -39,7 +39,7 @@ class BurgerIngredient extends Component {
}
}
-BurgerIngredient.PropTypes = {
+BurgerIngredient.propTypes = {
type: PropTypes.string.isRequired
};
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index 3c13e47..f0f982a 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -21,23 +21,37 @@ class BurgerBuilder extends Component {
bacon: 0,
},
totalPrice: 0,
+ purchasable: false,
+ }
+
+ updatePurchaseState (ingredients) {
+ const sum = Object.keys(ingredients)
+ .map( igkey => {
+ return ingredients[igkey];
+ })
+ .reduce((sum, el) => {
+ return sum + el;
+ }, 0);
+
+ this.setState({purchasable: sum > 0});
}
addIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
const newCount = oldCount + 1;
- const updatedIngredient = {
+ const updatedIngredients = {
...this.state.ingredients,
};
- updatedIngredient[type] = newCount;
+ updatedIngredients[type] = newCount;
const priceAddition = INGREDIENT_PRICE[type];
const oldPrice = this.state.totalPrice;
const newPrice = oldPrice + priceAddition;
this.setState({
totalPrice: newPrice,
- ingredients: updatedIngredient,
+ ingredients: updatedIngredients,
});
+ this.updatePurchaseState(updatedIngredients);
}
removeIngredientHandler = (type) => {
@@ -46,18 +60,19 @@ class BurgerBuilder extends Component {
return;
}
const newCount = oldCount - 1;
- const updatedIngredient = {
+ const updatedIngredients = {
...this.state.ingredients,
};
- updatedIngredient[type] = newCount;
+ updatedIngredients[type] = newCount;
const priceDeduction = INGREDIENT_PRICE[type];
const oldPrice = this.state.totalPrice;
const newPrice = oldPrice - priceDeduction ;
this.setState({
totalPrice: newPrice,
- ingredients: updatedIngredient,
+ ingredients: updatedIngredients,
});
+ this.updatePurchaseState(updatedIngredients);
}
render() {
@@ -76,6 +91,7 @@ class BurgerBuilder extends Component {
ingredientAdded={this.addIngredientHandler}
ingredientRemoved={this.removeIngredientHandler}
disabled={disabledInfo}
+ purchasable={this.state.purchasable}
price={this.state.totalPrice} />
);