Add button on recipes page to return to all recipes

views/recipesPage/recipes.css

@@ -54,11 +54,6 @@ h2{
     align-items: center;
 }
 
-    #addButton{
-        max-width: 150px;
-        margin-bottom: 25px;
-    }
-
     th{
         border: 2px solid #ff626b;
         background: #001b2d;

views/recipesPage/recipes.ejs

@@ -11,20 +11,18 @@
 
         <h1 id="title">Recipes</h1>
 
-        
-
         <div id="recipes">
             <button id="recipeUpdate" onclick="recipesPage.updateRecipes()">Update Recipes</button>
             <a href="/">Return to Inventory</a>
 
-            <div id="recipesContainer">
-
-            </div>
+            <div id="recipesContainer"></div>
         </div>
 
         <div id="ingredient" >
             <button id="addButton">Add Ingredient</button>
 
+            <button onclick="recipesPage.displayRecipes()">Back to Recipes</button>
+
             <table>
                 <thead>
                     <tr>

views/recipesPage/recipes.js

@@ -1,10 +1,10 @@
 let recipesPage = {
     //Display all recipes on a card
     displayRecipes: function(){
-        let body = document.querySelector("#recipesContainer");
-        let recipeUpdate = document.querySelector("#recipeUpdate");
+        document.querySelector("#recipes").style.display = "flex";
+        document.querySelector("#ingredient").style.display = "none";
 
-        recipeUpdate.style.display = "inline-block";
+        let body = document.querySelector("#recipesContainer");
 
         while(body.children.length > 0){
             body.removeChild(body.firstChild);