Fixed advanced search input value and remove logs

assets/js/favourites.js

@@ -40,12 +40,10 @@ const constructAndAppendFavouritesCards = (favouritesRecipes) => {
       const recipeId = target.attr("id");
 
       const getFilteredFavourites = (each) => {
-        console.log(recipeId, each.id);
         return each.id != recipeId;
       };
 
       const newFavourites = favouritesRecipes.filter(getFilteredFavourites);
-      console.log(newFavourites);
 
       localStorage.setItem("favourites", JSON.stringify(newFavourites));
 

assets/js/generic-script.js

@@ -36,6 +36,32 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 });
 
+// get the inputs from the search
+const getSearchInputs = () => {
+  const searchInput = $("#search-input").val();
+  const checkBoxInput = $("input[type=checkbox]:checked");
+
+  const options = {
+    query: searchInput,
+    diet: [],
+    intolerances: [],
+    cuisines: [],
+  };
+  const callback = function () {
+    if ($(this).data("option") === "diet") {
+      options.diet.push($(this).attr("id"));
+    }
+    if ($(this).data("option") === "intolerances") {
+      options.intolerances.push($(this).attr("id"));
+    }
+    if ($(this).data("option") === "cuisines") {
+      options.cuisines.push($(this).attr("id"));
+    }
+  };
+  checkBoxInput.each(callback);
+  return options;
+};
+
 // render advance search modal
 const renderModal = () => {
   $(".modal").attr("class", "modal is-active");
@@ -47,9 +73,7 @@ const closeModal = () => {
 };
 
 // construct search options
-
 const constructAndAppendModal = (searchOptions, searchInput) => {
-  console.log(searchOptions, searchInput);
   const constructDietOption = (eachDiet) => {
     return `<input type="checkbox" data-option="diet" id=${eachDiet}>
     <label for="${eachDiet}" class="mr-2">${eachDiet}</label>`;
@@ -78,6 +102,8 @@ const constructAndAppendModal = (searchOptions, searchInput) => {
     .map(constructCuisinesOption)
     .join(" ");
 
+  //get from local storage
+  const advancedOptions = getFromLocalStorage("options", {});
   // Modal conntainer
   const searchOptionsContainer = `<div class="modal">
   <div class="modal-background"></div>
@@ -90,7 +116,7 @@ const constructAndAppendModal = (searchOptions, searchInput) => {
       <section class="modal-card-body">
       <div class="field">
       <div class="control mb-2">
-      <input class="input" id="search-input" type="text" value="${searchInput}" placeholder="Search" />
+      <input class="input" type="text" id="search-input" value=${advancedOptions.query} placeholder="Search" />
       </div>
       <h3>Choose your diet...</h3>
       <div class="diet-options mb-2">
@@ -116,33 +142,6 @@ const constructAndAppendModal = (searchOptions, searchInput) => {
   renderModal();
 };
 
-// get the inputs from the search
-
-const getSearchInputs = () => {
-  const searchInput = $("#search-input").val();
-  const checkBoxInput = $("input[type=checkbox]:checked");
-
-  const options = {
-    query: searchInput,
-    diet: [],
-    intolerances: [],
-    cuisines: [],
-  };
-  const callback = function () {
-    if ($(this).data("option") === "diet") {
-      options.diet.push($(this).attr("id"));
-    }
-    if ($(this).data("option") === "intolerances") {
-      options.intolerances.push($(this).attr("id"));
-    }
-    if ($(this).data("option") === "cuisines") {
-      options.cuisines.push($(this).attr("id"));
-    }
-  };
-  checkBoxInput.each(callback);
-  return options;
-};
-
 // brand hover
 const hoverIn = () => {
   $("#logo").attr("src", "../assets/images/logo-hover.PNG");

assets/js/menu.js

@@ -103,8 +103,6 @@ const onSubmit = function (event) {
   // get search term
   const searchTerm = $("#search-term").val();
 
-  console.log(searchTerm);
-
   // get data from API for search term
 
   const recipeCardsData = constructRecipeObject(complexSearchApiData);
@@ -115,7 +113,7 @@ const handleSearch = (event) => {
   event.preventDefault();
 
   const searchInputs = getSearchInputs();
-  console.log(searchInputs);
+
   localStorage.setItem("options", JSON.stringify(searchInputs));
 
   //change page location
@@ -126,7 +124,6 @@ const handleViewRecipeDetails = (event) => {
   const target = $(event.target);
   if (target.is("h3")) {
     const recipeId = target.attr("id");
-    console.log(recipeId);
 
     // add recipe id value to local storage
     localStorage.setItem("recipeId", JSON.stringify(recipeId));
@@ -179,7 +176,6 @@ $(document).ready(onReady);
 
 const callback = (event) => {
   const target = event.target;
-  console.log(target);
 };
 
 const handleAdvanceSearch = (event) => {

assets/js/recipe.js

@@ -76,7 +76,6 @@ const renderImageRecipeCard = (data) => {
   $("#image-recipe-container").append(imageRecipeCard);
 
   const addToFavourites = (event) => {
-    console.log("hello");
     // Get the snackbar DIV
     var toast = $("#toast");
 
@@ -186,13 +185,11 @@ const renderServingQuantities = function (userServings) {
 const ingredientsCalculator = (servingData, ingredientsData, userServings) => {
   const servings = servingData.serves;
   const ingredientsCalculatorItem = (each) => {
-    // console.log(each);
     // get value from each ingredient
     const value = each.quantity;
     // divide value by number of servings with the recipe
     const baseServing = value / servings;
     const selectedServings = Math.floor(baseServing * userServings);
-    // console.log(each.ingredientName, selectedServings);
 
     const ingredientItem = `<div>
       <span>${selectedServings}</span>
@@ -348,7 +345,6 @@ const onLoad = async () => {
       const target = event.target;
       if ($(target).hasClass("servings-value")) {
         const servingTabValue = $(target).data("value");
-        console.log(servingTabValue);
 
         ingredientsCalculator(
           recipeInformationData,