Initial commit

index.html

@@ -135,8 +135,7 @@ <h4 class="preview__title">Pasta with Tomato Cream ...</h4>
             target="_blank"
             href="https://twitter.com/jonasschmedtman"
             >Jonas Schmedtmann</a
-          >. Use for learning or your portfolio. Don't use to teach. Don't claim
-          as your own.
+          >
         </p>
       </div>
 

src/js/helper.js

@@ -41,4 +41,37 @@ export const AJAX = async function(url, uploadData = undefined)
     {
         throw err;
     }
+};
+
+// to convert decimal values to fractional
+export const getFraction = function(amount) 
+{
+    if (parseFloat(amount) === parseInt(amount)) 
+        return amount;
+    const gcd = function (a, b) 
+    {
+        if (b < 0.0000001) 
+          return a;
+        return gcd(b, Math.floor(a % b));
+    };
+
+    const len = amount.toString().length - 2;
+    let denominator = Math.pow(10, len);
+    let numerator = amount * denominator;
+    let divisor = gcd(numerator, denominator);
+    numerator /= divisor;
+    denominator /= divisor;
+    let base = 0;
+
+    // converting to mixed fraction 
+    if (numerator > denominator) 
+    {
+        base = Math.floor(numerator / denominator);
+        numerator -= base * denominator;
+        // pulling out the base number and reducing the numerator
+    }
+    amount = Math.floor(numerator) + '/' + Math.floor(denominator);
+    if (base) 
+        amount = base + ' ' + amount;
+    return amount;
 };

src/js/views/recipeView.js

@@ -1,10 +1,7 @@
 import view from './view.js';
+import { getFraction } from '../helper.js';
 import icons from '../../img/icons.svg';
 
-// library to convert decimal values to fractional 
-import { Fraction } from 'fractional';
-console.log(Fraction);
-
 class RecipeView extends view
 {
     _parentElement = document.querySelector('.recipe');
@@ -100,7 +97,7 @@ class RecipeView extends view
                 <svg class="recipe__icon">
                     <use href="${icons}#icon-check"></use>
                 </svg>
-                <div class="recipe__quantity">${ing.quantity ? new Fraction(ing.quantity).toString() : ''}</div>
+                <div class="recipe__quantity">${ing.quantity ? getFraction(ing.quantity).toString() : ''}</div>
                 <div class="recipe__description">
                     <span class="recipe__unit">${ing.unit}</span>
                     ${ing.description}