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