feat: added other meu

css/style.css

@@ -23,12 +23,35 @@ button{
     border-color:rgba(255,255,255,0);
 }
 
+#app{
+    width: 1400px;
+}
+
+#menu{
+    height: 660px;
+    width: 800px;
+}
+
+#order{
+    width: 220px;
+}
+
+#drink-builder-options{
+    background-color: lightgoldenrodyellow;
+    width: 105px;
+}
+
 .drink-menu{
+    margin: 0px auto;
     height: 660px;
 }
 
-#app{
+.five-buttons button{
-    width: 960px;
+    margin: 0px 2% 20px;
+}
+
+.six-buttons button{
+    margin: 5px 1%;
 }
 
 .button-yellow{

index.html

@@ -36,12 +36,16 @@
 
                 <div id="order" class="three columns">
                     <h5>Order</h5>
-                    <span id="order-list"></span>
+                    <div class="order-container">
-                    <button class="button-primary" data-name="DELETE" data-value="">Delete</button>
+                        <span id="order-list"></span>
+                        <div class="order-buttons">
+                            <button class="button-primary" data-name="DELETE" data-value="">Delete</button>
+                        </div>
+                    </div>
                 </div>
 
                 <div id="menu" class="seven columns" data-view="drink-builder">
-                    <div id="options-menu" class="drink-menu">
+                    <div id="options-menu" class="drink-menu five-buttons">
                         <h5>Drink Options</h5>
                         <button class="button-blue" data-name="ICED" data-value="">ICED</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
@@ -84,7 +88,7 @@
                         <button class="button-yellow" data-name="SIZE" data-value="TRENTA">TRENTA</button>
                     </div>
                     
-                    <div id="brewed-menu" class="drink-menu" style="display: none;">
+                    <div id="brewed-menu" class="drink-menu five-buttons" style="display: none;">
                         <h5>Brewed</h5>
                         <button class="empty-button" data-name="" data-value="">.</button>
                         <button class="empty-button" data-name="" data-value="">.</button>
@@ -125,7 +129,7 @@
 
                     </div>
                     
-                    <div id="espresso-menu" class="drink-menu" style="display: none;">
+                    <div id="espresso-menu" class="drink-menu five-buttons" style="display: none;">
                         <h5>Espresso</h5>
                         <button class="button-purple" data-name="RECIPE" data-value="AMERICANO">AMERICANO</button>
                         <button class="button-purple" data-name="RECIPE" data-value="ESPRESSO">ESPRESSO</button>
@@ -170,7 +174,7 @@
                         <button class="button-default" data-name="" data-value="">SEASONAL LATTE</button>
                     </div>
                     
-                    <div id="blended-menu" class="drink-menu" style="display: none;">
+                    <div id="blended-menu" class="drink-menu five-buttons" style="display: none;">
                         <h5>Blended</h5>
                         <button class="button-blue" data-name="" data-value="">LIGHT</button>
                         <button class="button-brown" data-name="RECIPE" data-value="COFFEEFRAPP">COFFEE FRAPP</button>
@@ -216,7 +220,7 @@
                         <button class="button-default" data-name="" data-value="">SEASONAL BLENDED</button>
                     </div>
                     
-                    <div id="tea-menu" class="drink-menu" style="display: none;">
+                    <div id="tea-menu" class="drink-menu five-buttons" style="display: none;">
                         <h5>Tea</h5>
                         <button class="button-yellow" data-name="RECIPE" data-value="CHAITEALATTE">CHAI TEA LATTE</button>
                         <button class="button-yellow" data-name="RECIPE" data-value="OPARAHCHAITEALATTE">OPARAH CHAI LATTE</button>
@@ -256,7 +260,7 @@
                         <button class="button-blue" data-name="RECIPE" data-value="ICEDTEAREFILL">ICED TEA REFILL</button>
                     </div>
                     
-                    <div id="syrup-menu" class="drink-menu" style="display: none;">
+                    <div id="syrup-menu" class="drink-menu five-buttons" style="display: none;">
                         <h5>Syrups</h5>
                         <button class="button-brown" data-name="SYRUP" data-value="Caramel">CARAMEL</button>
                         <button class="button-brown" data-name="SYRUP" data-value="Cinnamon Dolce">CINN DOLCE</button>
@@ -289,12 +293,52 @@
                         <button class="button-default" data-name="" data-value="">MORE SEASONAL SYRUP</button>
                     </div>
 
-                    <div id="other-menu" class="drink-menu" style="display: none;">
+                    <div id="custom-menu" class="drink-menu six-buttons" style="display: none;">
-                        <h5>Syrups</h5>
+                        <h5>Other</h5>
                         <button class="button-blue" data-name="OTHER" data-value="Ice">ICE</button>
+                        <button class="button-blue" data-name="OTHER" data-value="Water">WATER</button>
+                        <button class="button-blue" data-name="OTHER" data-value="Whipped Cream">WHOPPED CREAM</button>
+                        <button class="button-grey" data-name="OTHER" data-value="Vanilla Sweet Cream">VANILLA SWEET CREAM</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Stevia">STEVIA</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Honey">HONEY</button>
+                        
+                        <button class="button-brown" data-name="OTHER" data-value="Agave">AGAVE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Sugar">SUGAR</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Splenda">SPLENDA</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Sweet'N Low'">SWEET'N LOW</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Equal">EQUAL</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Raw Sugar">RAW SUGAR</button>
+                        
+                        <button class="button-purple" data-name="OTHER" data-value="Protien">PROTIEN POWDER</button>
+                        <button class="button-purple" data-name="OTHER" data-value="Bannana">ADD BANNANA</button>
+                        <button class="button-purple" data-name="OTHER" data-value="Strawbery Puree">STRAWBERRY PUREE</button>
+                        <button class="button-purple" data-name="OTHER" data-value="Chips">FRAPP CHIPS</button>
+                        <button class="button-purple" data-name="OTHER" data-value="Vanilla Bean">VANILLA BEAN</button>
+                        <button class="button-purple" data-name="OTHER" data-value="Matcha">MATCHA</button>
+                        
+                        <button class="button-grey" data-name="OTHER" data-value="Mocha Drizzle">MOCHA DRIZZLE</button>
+                        <button class="button-grey" data-name="OTHER" data-value="Caramel Drizzle">CARAMEL DRIZZLE</button>
+                        <button class="button-grey" data-name="OTHER" data-value="No Topping">NO TOPPING</button>
+                        <button class="button-grey" data-name="OTHER" data-value="Coconut Flakes">COCONUT FLAKES</button>
+                        <button class="button-grey" data-name="OTHER" data-value="Nonfat Greek Yogurt">NONFAT GREEK YOGURT</button>
+                        <button class="button-grey" data-name="OTHER" data-value="Add Blueberry">ADD BLUEBERRY</button>
+                        
+                        <button class="button-brown" data-name="OTHER" data-value="Black Tea">BLACK TEA BASE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Green Tea">GREEN TEA BASE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Passion Tea">PASSION TEA BASE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Berry Hibiscus">BERRY HIBISCUS BASE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Cool Lime">COOL LIME BASE</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Strawberry Acai">STRAWBERRY ACAI BASE</button>
+                        
+                        <button class="button-default" data-name="OTHER" data-value="Foam">FOAM</button>
+                        <button class="button-default" data-name="OTHER" data-value="w/ room">WITH ROOM</button>
+                        <button class="empty-button" data-name="" data-value="">.</button>
+                        <button class="empty-button" data-name="" data-value="">.</button>
+                        <button class="button-brown" data-name="OTHER" data-value="Apple Juice">APPLE JUICE</button>
+                        <button class="button-yellow" data-name="OTHER" data-value="Lemonade">LEMONADE</button>
                     </div>
 
-                    <div class="drink-maker-tabs">
+                    <div class="drink-maker-tabs five-buttons">
                         <button class="button-default" data-name="CONTROL" data-value="BREWED">BREWED</button>
                         <button class="button-default" data-name="CONTROL" data-value="ESPRESSO">ESPRESSO</button>
                         <button class="button-default" data-name="CONTROL" data-value="BLENDED">BLENDED</button>

js/app.js

@@ -38,6 +38,9 @@ document.addEventListener('DOMContentLoaded', function(){
                     case "SYRUP":
                         Object.assign(currentDrink.recipe, addSyrup(currentDrink.recipe, dataValue, currentDrink.size));
                         break;
+                    case "OTHER":
+                        Object.assign(currentDrink.recipe, addOther(currentDrink.recipe, dataValue, currentDrink.size));
+                        break;
                     case "CONTROL":
                         changeMenu(dataValue);
                         break
@@ -57,6 +60,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 brewedMenu.style.display = "none";
                 blendedMenu.style.display = "none";
                 teaMenu.style.display = "none";
+                customMenu.style.display = "none";
                 break;
             case "ESPRESSO":
                 drinkOptionsMenu.style.display = "none";
@@ -65,6 +69,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 syrupMenu.style.display = "none";
                 blendedMenu.style.display = "none";
                 teaMenu.style.display = "none";
+                customMenu.style.display = "none";
                 break;
             case "SYRUP":
                 drinkOptionsMenu.style.display = "none";
@@ -73,6 +78,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 syrupMenu.style.display = "block";
                 blendedMenu.style.display = "none";
                 teaMenu.style.display = "none";
+                customMenu.style.display = "none";
                 break;
             case "BREWED":
                 drinkOptionsMenu.style.display = "none";
@@ -81,6 +87,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 brewedMenu.style.display = "block";
                 blendedMenu.style.display = "none";
                 teaMenu.style.display = "none";
+                customMenu.style.display = "none";
                 break;
             case "BLENDED":
                 drinkOptionsMenu.style.display = "none";
@@ -89,6 +96,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 blendedMenu.style.display = "block";
                 brewedMenu.style.display = "none";
                 teaMenu.style.display = "none";
+                customMenu.style.display = "none";
                 break;
             case "TEA":
                 drinkOptionsMenu.style.display = "none";
@@ -97,6 +105,16 @@ document.addEventListener('DOMContentLoaded', function(){
                 blendedMenu.style.display = "none";
                 brewedMenu.style.display = "none";
                 teaMenu.style.display = "block";
+                customMenu.style.display = "none";
+                break;
+            case "CUSTOM":
+                drinkOptionsMenu.style.display = "none";
+                recipeMenu.style.display = "none";
+                syrupMenu.style.display = "none";
+                blendedMenu.style.display = "none";
+                brewedMenu.style.display = "none";
+                teaMenu.style.display = "none";
+                customMenu.style.display = "block";
                 break;
             
         }
@@ -107,6 +125,7 @@ document.addEventListener('DOMContentLoaded', function(){
     let brewedMenu = document.getElementById("brewed-menu");
     let blendedMenu = document.getElementById("blended-menu");
     let teaMenu = document.getElementById("tea-menu");
+    let customMenu = document.getElementById("custom-menu");
 
 
 });

js/createDrink.js

@@ -11,7 +11,9 @@ function createDrink(){
             shotType: shotTypes.NORMAL,
             syrups: [],
             addedSyrups: [],
-            milk: milkTypes.NONE
+            other: [],
+            addedOthers: [],
+            milk: milkTypes.NONE,
         },
     }
 }
@@ -325,6 +327,7 @@ function addSyrup(recipe, syrup, size, qunatity){
 function addOther(recipe, other, size, quantity){
     let o = {};
     o.name = other;
+    
     if(quantity){
         o.count = quantity;
     }

js/order.js

@@ -35,6 +35,7 @@ function orderDisplay(drink){
         name: "default Drink <br>",
         iced: "",
         syrups: "",
+        other: "",
         size: "",
         shotDeclaration: ""
     }
@@ -123,5 +124,17 @@ function orderDisplay(drink){
         }, this);
     }
 
-    return o.size + o.name + o.shotDeclaration + o.iced + o.syrups + o.caffeine;
+    if(drink.recipe.addedOthers.length > 0){
+        drink.recipe.addedOthers.forEach(function(e) {
+            o.other += e.name + "<br>"
+        }, this);
+    }
+
+    return  o.size + 
+            o.name + 
+            o.iced + 
+            o.shotDeclaration + 
+            o.caffeine + 
+            o.syrups + 
+            o.other;
 }

js/standardRecipies.js

@@ -664,6 +664,7 @@ function blendedStrawberryLemonade(drink){
             }
         ]
     }
+    return recipe;
 }
 
 //Teas
@@ -757,7 +758,7 @@ function mangoBlackTea(drink){
         ],
         other: [
             {
-                name: "Black Tea"
+                name: "PAssion Tea"
             },
             {
                 name: "Water"
@@ -779,7 +780,7 @@ function mangoBlackTeaLemonade(drink){
         ],
         other: [
             {
-                name: "Black Tea"
+                name: "Passion Tea"
             },
             {
                 name: "Lemonade"