Wrong branch

views/dashboardPage/components/addIngredient.ejs → views/dashboardPage/components/addIngredients.ejs

@@ -1,4 +1,4 @@
-<div id="addIngredient">
+<div id="addIngredients">
     <button class="sidebarIconButton" onclick="closeSidebar()">
         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="5" y1="12" x2="19" y2="12"></line>

views/dashboardPage/components/components.css

@@ -203,7 +203,7 @@
     margin: 25px;
 }
 
-#addIngredient{
+#addIngredients{
     flex-direction: column;
     width: 100%;
 }

views/dashboardPage/dashboard.ejs

@@ -57,7 +57,7 @@
                 <div id="ingredientHead">
                     <h1 class="strandTitle">Ingredient Inventory</h1>
 
-                    <button class="button" onclick="ingredientsStrandObj.displayAddIngredient()">
+                    <button class="button" onclick="ingredientsStrandObj.displayAddIngredients()">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                         add
                     </button>
@@ -87,7 +87,7 @@
         </div>
 
         <div id="sidebarDiv" class="sidebarHide">
-            <% include ./components/addIngredient %>
+            <% include ./components/addIngredients %>
 
             <% include ./components/ingredientDetails %>
 

views/dashboardPage/ingredients.js

@@ -70,8 +70,8 @@ window.ingredientsStrandObj = {
         }
     },
 
-    displayAddIngredient: function(){
-        let sidebar = document.querySelector("#addIngredient");
+    displayAddIngredients: function(){
+        let sidebar = document.querySelector("#addIngredients");
         openSidebar(sidebar);
     },