Add unit to recipe ingredients when created.

views/dashboardPage/css/sidebars/newRecipe.css

@@ -85,6 +85,13 @@
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
+                        height: 32px;
+                    }
+
+                    .newRecipeChosenIngredient input, .newRecipeChosenIngredient select{
+                        height: 30px;
+                        border: none;
+                        width: 47%;
                     }
 
                     .newRecipeChosenIngredient button{
@@ -92,8 +99,4 @@
                         margin: 0 5px;
                         max-height: none;
                         min-width: none;
-                    }
-
-                    .newRecipeChosenIngredient input{
-                        width: 100%;
                     }

views/dashboardPage/ejs/sidebars/newRecipe.ejs

@@ -37,12 +37,48 @@
 
     <template id="newRecipeChosenIngredient">
         <div class="newRecipeChosenIngredient">
-            <p></p>
-
+            <div>
+                <p></p>
+                
+                <button class="sidebarButton">REMOVE</button>
+            </div>
+            
             <div>
                 <input type="number" step="0.01" min="0">
 
-                <button class="sidebarButton">REMOVE</button>
+                <select>
+                    <optgroup label="MASS/WEIGHT">
+                        <option type="mass" value="g">G</option>
+                        <option type="mass" value="kg">KG</option>
+                        <option type="mass" value="oz">OZ</option>
+                        <option type="mass" value="lb">LB</option>
+                    </optgroup>
+        
+                    <optgroup label="VOLUME">
+                        <option type="volume" value="ml">ML</option>
+                        <option type="volume" value="l">L</option>
+                        <option type="volume" value="tsp">TSP</option>
+                        <option type="volume" value="tbsp">TBSP</option>
+                        <option type="volume" value="ozfl">OZ. FL</option>
+                        <option type="volume" value="cup">CUP</option>
+                        <option type="volume" value="pt">PT</option>
+                        <option type="volume" value="qt">QT</option>
+                        <option type="volume" value="gal">GAL</option>
+                    </optgroup>
+        
+                    <optgroup label="LENGTH">
+                        <option type="length" value="mm">MM</option>
+                        <option type="length" value="cm">CM</option>
+                        <option type="length" value="m">M</option>
+                        <option type="length" value="in">IN</option>
+                        <option type="length" value="ft">FT</option>
+                    </optgroup>
+        
+                    <optgroup label="OTHER">
+                        <option type="other" value="each">EACH</option>
+                    </optgroup>
+                </select>
+            
             </div>
         </div>
     </template>

views/dashboardPage/js/sidebars/newRecipe.js

@@ -42,9 +42,9 @@ let newRecipe = {
 
     add: function(ingredient){
         let element = document.getElementById("newRecipeChosenIngredient").content.children[0].cloneNode(true);
-        element.children[0].innerText = ingredient.name;
-        element.children[1].children[0].placeholder = `QUANTITY (${ingredient.unit.toUpperCase()})`;
-        element.children[1].children[1].onclick = ()=>{
+        element.children[0].children[0].innerText = ingredient.name;
+        element.children[1].children[0].placeholder = "QUANTITY";
+        element.children[0].children[1].onclick = ()=>{
             this.unchosen.push(ingredient);
             element.parentElement.removeChild(element);
             this.populateChoices();