Add functionality to the show hidden checkbox.

views/dashboardPage/css/strands/recipeBook.css

@@ -3,6 +3,10 @@
     align-items: center;
 }
 
+    #recipeBookStrand .buttonBox{
+        margin: 0;
+    }
+
     #showHiddenRecipes{
         display: flex;
         align-items: center;

views/dashboardPage/ejs/strands/recipeBook.ejs

@@ -4,7 +4,7 @@
 
         <div class="buttonBox">
             <label id="showHiddenRecipes" class="button">
-                <input type="checkbox">
+                <input id="hiddenRecipesCheckbox" type="checkbox">
                 SHOW HIDDEN
             </label>
 

views/dashboardPage/js/strands/recipeBook.js

@@ -19,6 +19,8 @@ let recipeBook = {
                     button.onclick = ()=>{controller.openSidebar("addRecipe")};
                     break;
             }
+
+            document.getElementById("hiddenRecipesCheckbox").onclick = ()=>{this.populateRecipes()};
                             
             document.getElementById("recipeSearch").oninput = ()=>{this.search()};
 
@@ -31,6 +33,7 @@ let recipeBook = {
     populateRecipes: function(){
         let recipeList = document.getElementById("recipeList");
         let template = document.getElementById("recipe").content.children[0];
+        let hiddenCheck = document.getElementById("hiddenRecipesCheckbox");
 
         this.recipeDivList = [];
         while(recipeList.children.length > 0){
@@ -38,7 +41,7 @@ let recipeBook = {
         }
 
         for(let i = 0; i < merchant.recipes.length; i++){
-            if(merchant.recipes[i].hidden === true) continue;
+            if(merchant.recipes[i].hidden === true && hiddenCheck.checked === false) continue;
             let recipeDiv = template.cloneNode(true);
             recipeDiv.onclick = ()=>{
                 controller.openSidebar("recipeDetails", merchant.recipes[i]);