170 Forkify: Recipe View (Part 2)

Ch-sriram · Ch-sriram · commit c651fe6756a6 · 2020-02-25T10:33:55.000+05:30
- Added 7.7.11.2 named as "Using 3rd Part API fractional to convert the Quantities into a Fraction &amp; Highlighting the Selected Recipes using classList property"
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .vscode
 JS-DOM/challenge
 Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/node_modules
-.gitignore
+.gitignore
+Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/package-lock.json
diff --git a/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/package.json b/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.8.3",
-    "axios": "^0.19.2"
+    "axios": "^0.19.2",
+    "fractional": "^1.0.0"
   }
 }
diff --git a/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/index.html b/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/index.html
@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
     <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
-    <title>forkify // Search over 1,000,000 recipes</title>
+    <title>forkify - Search a 100,000 recipes</title>
 </head>
 
 <body>
diff --git a/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/index.js b/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/index.js
@@ -1,7 +1,16 @@
 /********************************************************************************************************************
  * What we'll learn:
  * ----------------
- * 1. Using loop to generate HTML markup.
+ * 1. Using external third-party API called fractional.
+ * 
+ * We want to convert the recipe quantity (i.e., count) from decimal values (i.e., 4.5, 2.25, etc) into fractional
+ * values (i.e., 4 1/2, 2 1/4, etc). In order to do that, we use a 3rd party API called fractional.
+ * We install it using npm and save it as a code dependency because we will import the API in our code.
+ * Now, we implement the formatCount() method inside the recipeView module, where we will use the fractional API.
+ * Another important aspect is to keep the selected recipe from the .results__list highlighted.
+ * For that, we will implement another function in searchView module which will be called here, onto which the ID of
+ * the selected item is passed onto to the method. The method is called highlightSelected(). It is called inside
+ * the controlRecipe() method in this file.
  * 
  */
 
@@ -102,6 +111,10 @@ const controlRecipe = async () => {
         recipeView.clearRecipe();
         renderLoader(elements.recipe);
         
+        // Highlight the selected recipe
+        if (state.search)
+            searchView.highlightSelected(id);
+
         // Create new recipe object
         state.recipe = new Recipe(id);
         // window.r = state.recipe;    // TEST CODE
diff --git a/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/recipeView.js b/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/recipeView.js
@@ -1,15 +1,42 @@
 import { elements } from './base';
+import { Fraction } from 'fractional';
 
 export const clearRecipe = () => {
     elements.recipe.innerHTML = '';
 };
 
+// look into documentation of fraction.js @https://github.com/ekg/fraction.js/
+const formatCount = count => {
+    if (count) {
+        // count = 2.5 --> 2 1/2
+        // count = 0.5 --> 1/2
+        const [int, dec] = count.toString().split('.').map(el => parseInt(el, 10));
+
+        // count = 2 --> 2  // there's no dec
+        if (!dec) return count;
+
+        // count = 0.5 --> 1/2
+        if (int === 0) {
+            const fr = new Fraction(count);
+            return `${fr.numerator}/${fr.denominator}`;
+        } else {
+            // count = 2.5 --> 2 1/2
+            // if we create a fraction for 2.5, we will get 5/2, which we don't want. Therefore,
+            // we will create a fraction only for 0.5 and append it to 2. For that, we would
+            // take the difference between the count and the int and pass it to the Fraction's constructor.
+            const fr = new Fraction(count - int);
+            return `${int} ${fr.numerator}/${fr.denominator}`;
+        }
+    }
+    return 1;
+};
+
 const createIngredient = ingredient => `
     <li class="recipe__item">
         <svg class="recipe__icon">
             <use href="img/icons.svg#icon-check"></use>
         </svg>
-        <div class="recipe__count">${ingredient.count}</div>
+        <div class="recipe__count">${formatCount(ingredient.count)}</div>
         <div class="recipe__ingredient">
             <span class="recipe__unit">${ingredient.unit}</span>
             ${ingredient.ingredient}
diff --git a/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/searchView.js b/Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/views/searchView.js
@@ -24,6 +24,19 @@ export const clearResults = () => {
 };
 
 
+export const highlightSelected = id => {
+    // Before highlighting the selected recipe from the .results__list class, we have to remove the 
+    // .results__link--active class from all the recipes in the .results__list class' elements.
+    const recipeArr = Array.from(document.querySelectorAll(`.results__link--active`));
+    recipeArr.forEach(el => {
+        el.classList.remove('results__link--active');
+    });
+
+    // highlight the selected recipe from .results__list class
+    document.querySelector(`a[href="#${id}"]`).classList.add('results__link--active');
+};
+
+
 // function to limit the recipe name in the .results__list class
 const limitRecipeTitle = (title, limit = 17) => {   // 17 is the sweet spot for limiting the no. of letters
     let newTitle = [];

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`},`
`22`	`22`	`"dependencies": {`
`23`	`23`	`"@babel/polyfill": "^7.8.3",`
`24`		`- "axios": "^0.19.2"`
	`24`	`+ "axios": "^0.19.2",`
	`25`	`+ "fractional": "^1.0.0"`
`25`	`26`	`}`
`26`	`27`	`}`