Add button to return to inventory page

views/recipesPage/recipes.css

@@ -15,27 +15,37 @@ h2{
 
 #recipes{
     display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    padding: 25px;
+    flex-direction: column;
+    align-items: center;
 }
 
-    .recipe-card{
-        border: 2px solid #ff626b;
-        box-shadow: 2px 2px 2px #001b2d;
-        background: #001b2d;
-        color: #ff626b;
-        width: 20%;
-        padding: 35px;
-        margin: 25px;
-        border-radius: 10px;
-        cursor: pointer;
+    #recipeUpdate{
+        margin-bottom: 10px;
     }
 
-        .recipe-card:hover{
-            transform: translateY(-3px);
+    #recipesContainer{
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        padding: 25px;
+    }
+
+        .recipe-card{
+            border: 2px solid #ff626b;
+            box-shadow: 2px 2px 2px #001b2d;
+            background: #001b2d;
+            color: #ff626b;
+            width: 20%;
+            padding: 35px;
+            margin: 25px;
+            border-radius: 10px;
+            cursor: pointer;
         }
 
+            .recipe-card:hover{
+                transform: translateY(-3px);
+            }
+
 #ingredient{
     display: none;
     width: 50%;

views/recipesPage/recipes.ejs

@@ -11,9 +11,16 @@
 
         <h1 id="title">Recipes</h1>
 
-        <button id="recipeUpdate" onclick="recipesPage.updateRecipes()">Update Recipes</button>
+        
 
-        <div id="recipes" class="container"></div>
+        <div id="recipes">
+            <button id="recipeUpdate" onclick="recipesPage.updateRecipes()">Update Recipes</button>
+            <a href="/">Return to Inventory</a>
+
+            <div id="recipesContainer">
+
+            </div>
+        </div>
 
         <div id="ingredient" >
             <button id="addButton">Add Ingredient</button>

views/recipesPage/recipes.js

@@ -1,7 +1,7 @@
 let recipesPage = {
     //Display all recipes on a card
     displayRecipes: function(){
-        let body = document.querySelector(".container");
+        let body = document.querySelector("#recipesContainer");
         let recipeUpdate = document.querySelector("#recipeUpdate");
 
         recipeUpdate.style.display = "inline-block";
@@ -37,7 +37,6 @@ let recipesPage = {
         let ingredientDiv = document.querySelector("#ingredient");
         let tbody = document.querySelector("tbody");
         let title = document.querySelector("#title");
-        let recipeUpdate = document.querySelector("#recipeUpdate");
 
         while(tbody.children.length > 0){
             tbody.removeChild(tbody.firstChild);
@@ -50,7 +49,6 @@ let recipesPage = {
 
         recipesDiv.style.display = "none";
         ingredientDiv.style.display = "flex";
-        recipeUpdate.style.display = "none";
 
         for(let ingredient of recipe.ingredients){
             let row = document.createElement("tr");