Merge pull request #117 from fac-17/Feature/js-fixes-vic

JS and API small fixes

Author: victormasson21

public/css/uniqueMealPlan.css

@@ -22,5 +22,5 @@
 }
 
 .form__unique-meal-plan{
-  display: none;
+  display: block;
 }

public/js/additionalChoices.js

@@ -22,19 +22,19 @@ document.querySelectorAll(".recipe__select").forEach(button => {
       let newString = oldString.replace(`+${button.id}`, "");
       document.cookie = newString;
     } else if (document.cookie.split("+").length > 5) {
-      window.alert("Please select an additional 3 recipes");
+      window.alert("Please select up to three additional recipes");
     } else {
       document.cookie = `${document.cookie}+${button.id}`;
     }
-    console.log("Cookie: ", document.cookie);
+    // console.log("Cookie: ", document.cookie);
   });
 });
 
 document
-  .querySelector(".newplan__nav_buttons__next")
+  .querySelector(".second-choices__save-button")
   .addEventListener("click", e => {
-    if (document.cookie.split("+").length !== 5) {
+    if (document.cookie.split("+").length > 6) {
       e.preventDefault();
-      window.alert("Please select an additional 3 recipes");
+      window.alert("Please select up to three additional recipes");
     }
   });

public/js/main.js

@@ -1,39 +0,0 @@
-const emailForm = document.querySelector(".unique-meal-plan__form");
-const emailButton = document.querySelector(".unique-meal-plan__form__email");
-const emailInput = document.querySelector(".email-input-field");
-const url = window.location.href;
-
-emailForm.addEventListener("submit", e => {
-  e.preventDefault();
-  let xhr = new XMLHttpRequest();
-  xhr.onreadystatechange = () => {
-    if (xhr.readyState === 4 && xhr.status === 200) {
-    }
-  };
-
-  xhr.open("POST", "/sendEmail", true);
-  xhr.setRequestHeader("Content-Type", "x-www-form-urlencoded");
-  xhr.send(JSON.stringify({ email: emailInput.value, url }));
-});
-
-const cookieHandler = id => {
-  document.cookie.includes(`recipe${id}=true`)
-    ? (document.cookie = `${id}=false`)
-    : (document.cookie = `${id}=true`);
-};
-
-document.cookie = "recipes=";
-document.querySelectorAll(".recipe__select").forEach(button => {
-  button.addEventListener("click", e => {
-    if (document.cookie.includes(button.id)) {
-      let oldString = document.cookie;
-      let newString = oldString.replace(`+${button.id}`, "");
-      document.cookie = newString;
-    } else if (document.cookie.split("+").length > 2) {
-      window.alert("Please select two recipes only");
-    } else {
-      document.cookie = `${document.cookie}+${button.id}`;
-    }
-    console.log("Cookie: ", document.cookie);
-  });
-});

public/js/uniqueMealPlan.js

@@ -0,0 +1,17 @@
+const emailForm = document.querySelector(".unique-meal-plan__form");
+const emailButton = document.querySelector(".unique-meal-plan__form__email");
+const emailInput = document.querySelector(".email-input-field");
+const url = window.location.href;
+
+emailForm.addEventListener("submit", e => {
+  e.preventDefault();
+  let xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+    }
+  };
+
+  xhr.open("POST", "/sendEmail", true);
+  xhr.setRequestHeader("Content-Type", "x-www-form-urlencoded");
+  xhr.send(JSON.stringify({ email: emailInput.value, url }));
+});

src/model/queries/apiCall.js

@@ -1,30 +1,35 @@
-// const recipeUrl = "https://api.spoonacular.com/recipes/random?number=5&apiKey=fa31546b9db54de4ac0d528cc21fb947";
-const fetch = require('node-fetch');
-const apiKey = 'ac1e1c1767144e209bd7a0c6b23e1fbd'
-//'dfc52b1bc87a4054b99d6655d10c4206'
-//'c537cbd90c1149d38dc9a8b908755414'
-// 'f7a2ad99effc4441a00ad3cad3d7e8e6'
-// 'dfc52b1bc87a4054b99d6655d10c4206'
-//a565bdef05084ea48e7946a141f910c7
-// 'ac1e1c1767144e209bd7a0c6b23e1fbd'
-//fa31546b9db54de4ac0d528cc21fb947
+const fetch = require("node-fetch");
+const apiKey = "a565bdef05084ea48e7946a141f910c7";
+// f7a2ad99effc4441a00ad3cad3d7e8e6
+// dfc52b1bc87a4054b99d6655d10c4206
+// a565bdef05084ea48e7946a141f910c7
+// fa31546b9db54de4ac0d528cc21fb947
+// dfc52b1bc87a4054b99d6655d10c4206
+// ac1e1c1767144e209bd7a0c6b23e1fbd
+// fa31546b9db54de4ac0d528cc21fb947
 // c537cbd90c1149d38dc9a8b908755414
-//589362322c514340af0a24e58d162020
+// 589362322c514340af0a24e58d162020
+
 
 const getRecipesApi = () => {
-  const recipeUrl = `https://api.spoonacular.com/recipes/random?number=5&apiKey=${apiKey}`;
+  const recipeUrl = `https://api.spoonacular.com/recipes/random?number=10&tags=savoury&apiKey=${apiKey}`;
   // console.log('(apiCall) getRecipesApi (fetch) runs and input = ', recipeUrl);
   return fetch(recipeUrl)
     .then(data => data.json())
     .then(data => {
       let fiveRecipe = {};
-      for (let i = 0; i < data.recipes.length; i++) {
-        fiveRecipe[i] = {};
-        fiveRecipe[i].id = data.recipes[i].id;
-        fiveRecipe[i].recipeName = data.recipes[i].title;
-        fiveRecipe[i].cookingTime = data.recipes[i].cookingMinutes;
-        fiveRecipe[i].healthScore = data.recipes[i].healthScore;
-        fiveRecipe[i].imageUrl = data.recipes[i].image;
+      if (data.status === 'failure') {
+        fiveRecipe[0] = {};
+        fiveRecipe[0].recipeName = 'Our API has let us down, sorry';
+      } else {
+        for (let i = 0; i < data.recipes.length; i++) {
+          fiveRecipe[i] = {};
+          fiveRecipe[i].id = data.recipes[i].id;
+          fiveRecipe[i].recipeName = data.recipes[i].title;
+          fiveRecipe[i].cookingTime = data.recipes[i].cookingMinutes;
+          fiveRecipe[i].healthScore = data.recipes[i].healthScore;
+          fiveRecipe[i].imageUrl = data.recipes[i].image;
+        }
       }
       return fiveRecipe;
     })

src/views/newplanAdditionalChoices.hbs

@@ -26,4 +26,5 @@
 {{!-- {{>counter}} --}}
 </section>
 
-<script src="js/additionalChoices.js"></script>
+
+<script src="/js/additionalChoices.js"></script>

src/views/uniqueMealPlan.hbs

@@ -34,3 +34,5 @@
     </form>
 
 </section>
+
+<script src="/js/uniqueMealPlan.js"></script>