add order now

src/components/BuildControls/BuildControls.css

@@ -8,3 +8,43 @@
     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

src/components/BuildControls/BuildControls.tsx

@@ -3,13 +3,14 @@ import BuildControl from './BuildControl/BuildControl';
 import './BuildControls.css';
 
 interface Props {
-    ingredients: Ingredients
     price: number
+    purchasable: boolean
+    ingredients: Ingredients
     lessHandler: (ingKey: IngredientNames) => void
     moreHandler: (ingKey: IngredientNames) => void
 }
 
-const BuildControls = ({ingredients, price, lessHandler, moreHandler}: Props) => {
+const BuildControls = ({ingredients, purchasable, price, lessHandler, moreHandler}: Props) => {
     const ingKeys = Object.keys(ingredients)
 
     return (
@@ -27,6 +28,8 @@ const BuildControls = ({ingredients, price, lessHandler, moreHandler}: Props) =>
                     />
                 ))
             }
+
+            <button className="OrderButton" disabled={!purchasable}>ORDER NOW</button>
         </div>
     );
 }

src/containers/BurgerBuilder/BurgerBuilder.tsx

@@ -5,12 +5,21 @@ import { useState } from 'react';
 
 const BurgerBuilder = () => {
     const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
+    const [purchasable, setPurchasable] = useState<boolean>(false);
     const [ingredients, setIngredients] = useState<Ingredients>({
         salad: 0,
         cheese: 0,
         chicken: 0,
         meat: 0
-    })
+    });
+
+    const updatePurschasable = (ingredients: Ingredients) => {
+        const sum = Object.keys(ingredients)
+                            .map(ingKey => ingredients[ingKey as IngredientNames])
+                            .reduce((sum, el) => sum + el, 0)
+
+        setPurchasable(sum > 0)
+    }
 
     const moreHandler = (ingKey: IngredientNames) => {
         const oldCount = ingredients[ingKey];
@@ -22,6 +31,8 @@ const BurgerBuilder = () => {
         const priceAddition = IngredientPrices[ingKey];
         const newPrice = totalPrice + priceAddition;
         setTotalPrice(newPrice);
+
+        updatePurschasable(updatedIngredients);
     }
 
     const lessHandler = (ingKey: IngredientNames) => {
@@ -38,6 +49,8 @@ const BurgerBuilder = () => {
         const priceAddition = IngredientPrices[ingKey];
         const newPrice = totalPrice - priceAddition;
         setTotalPrice(newPrice);
+
+        updatePurschasable(updatedIngredients);
     }
 
     return (
@@ -48,6 +61,7 @@ const BurgerBuilder = () => {
                 lessHandler={lessHandler}
                 moreHandler={moreHandler}
                 price={totalPrice}
+                purchasable={purchasable}
             />
         </>
     )