\n `;\n this._clear();\n this._parentElement.insertAdjacentHTML('afterbegin', markup);\n }\n}\n","// FRACTY CONVERTS DECIMAL NUMBERS TO FRACTIONS BY ASSUMING THAT TRAILING PATTERNS FROM 10^-2 CONTINUE TO REPEAT\n// The assumption is based on the most standard numbering conventions\n// e.g. 3.51 will convert to 3 51/100 while 3.511 will convert to 3 23/45\n// Throw any number up to 16 digits long at fracty and let fracy do the work.\n// If number is beyond 16 digits fracty will truncate at 15 digits to compensate for roundoff errors created in IEEE 754 Floating Point conversion.\n\nmodule.exports = function (number) { //IEEE 754 Floating Point conversion problems will cause entires above 16 digits to convert incorrectly to binary with small roundoff errors, so keeping entry below 16 digits will help fracy make the most accurate calculation. If there are 16 or more digits in the number fracty can be called on the decimal part of the number only to maximize accuracy.\n let type;\n\n if (number < 0) { //If number is less than zero it's negative.\n number = Math.abs(number);\n type = '-';\n } else {\n type = '';\n }\n\n if (number === undefined) {\n return `Your input was undefined.`\n }\n\n if (isNaN(number)) { //isNaN() instead of Number.isNaN() is used so that if fracty is called on something that is not a number but could be a string of numbers the function still passes as true.\n return `\"${number}\" is not a number.`;\n }\n\n if (number == 9999999999999999) { //There's no reason to call fracty on an integer at all, but in the unlikely case that the number is 9999999999999999 JavaScript will round to 10000000000000000 and fracty handles that. Interestingly, if fracty is called on -9999999999999999, which fracty converts to absolute value, the number logged is 10000000000000000 but the number stored is 9999999999999999, so this if statement works for both 9999999999999999 and -9999999999999999.\n return `${type}9999999999999999`;\n }\n\n if (number > 9999999999999999) { //Beyond 9999999999999999 IEEE 754 Floating Point conversion inaccuracies will occur in JavaScript.\n return `Too many digits in your integer to maintain IEEE 754 Floating Point conversion accuracy.`;\n }\n\n if (Number.isInteger(number)) { //If fracty is called on an integer, return the integer.\n return `${type}${number}`;\n }\n\n if (number < .000001) { //Non negative numbers with integers equal to zero that are followed by six or more consecutive zeros will coerce to scientific notation but, interestingly enough, numbers with integers that are not zero that are followed by six or more consecutive zeros will not coerce to scientific notation. Therefore, in the case of numbers with integers that are not zero that are followed by six or more consecutive zeros, fracty is more accurate than it is with numbers that have integers equal to zero that are followed by six or more consecutive zeros because fracty doesn't have to coerce the decimal part of the number to '0' so soon. This it the smartest way fracty can compensate for this \"bug\" in JavaScript.\n return '0';\n }\n\n const numberString = number.toString();\n const entry = numberString.split('.');\n let integer = entry[0];\n let decimal;\n\n if (decimal == '0' && integer !== '0') { //If there's no decimal just return the integer.\n return integer;\n } else if (decimal == '0' && integer == '0') { //If only zero is entered return zero.\n return '0';\n } else if (numberString.length >= 17){ //If the number entered has equal to or more than 16 digits (decimal is excluded) truncate the last digit to prevent errors in IEEE 754 Floating Point conversion.\n decimal = entry[1].slice(0,entry[1].length-1);\n } else {\n decimal = entry[1];\n }\n\n if (decimal == '99' && integer !== '0') { //Otherwise it will automatically round to 1/1.\n return `${integer} 99/100`;\n } else if (decimal == '99' && integer == '0') {\n return `99/100`;\n } else if (1 - parseFloat(`.${decimal}`) < .0011) { //If decimal is at least .99899999999 assume that the fraction will inevitably result in 1/1, so circumnavigate the issue that .999, upon IEEE 754 Floating Point conversion, accidentally becomes .9989999999999997 by replacing it with '999', which fracty will further reduce properly.\n decimal = '999';\n }\n\n if (decimal == undefined) {\n return integer;\n }\n\n const decimalRev = decimal.split('').reverse().join(''); //Reverse the string to look for patterns.\n const patternSearch = /^(\\d+)\\1{1,2}/; //This greedy regex matches the biggest pattern that starts at the beginning of the string (at the end, in the case of the reversed string). A lazy regex doesn't work because it only identifies subpatterns in cases where subpatterns exist (e.g. '88' in '388388388388'), thus pattern capture must be greedy.\n let pattern = decimalRev.match(patternSearch); //If there's a pattern, it's full sequence is in [0] of this array and the single unit is in [1] but it may still need to be reduced further.\n\n if (pattern && decimal.length > 2) { //In keeping with the most standard numbering conventions of monetary divisibility, etc., if there's a pattern beyond two decimal places, reverse back the pattern that the greedy regex deemed a single unit, and the full pattern sequence, respectively.\n let patternSequence = pattern[0].split('').reverse().join('');\n let endPattern = pattern[1].split('').reverse().join('');\n\n if (endPattern.length > 1) { //Test to see if the pattern unit is actually a single repeating digit.\n let endPatternArray = endPattern.split('');\n let testSingleUnit = 1;\n for (let i = 0; i < endPatternArray.length; i++) {\n testSingleUnit /= endPatternArray[0]/endPatternArray[i];\n }\n\n if (testSingleUnit === 1 ) {\n endPattern = endPatternArray[0];\n }\n }\n\n if (endPattern.length > 1 && endPattern.length % 2 === 0) { //If what the greedy regex deems to be the pattern unit has a length greater than 1 and an even number of digits, check to see if splitting it in half will give two equal parts. If it does, one of those equal parts will be the pattern. There's no need repeat this test as no case needing this test more than once would exist for strings of 16 digits or less.\n endPattern = parseInt(endPattern.slice(0,endPattern.length/2),10) - parseInt(endPattern.slice(endPattern.length/2,endPattern.length),10) === 0 ? endPattern.slice(0,endPattern.length/2) : endPattern;\n }\n return yesRepeat(decimal, endPattern, patternSequence, integer, type); //Begin calculating the numerator and denominator for decimals that have a pattern.\n } else {\n return noRepeat(decimal, integer, type); //Begin calculating the numerator and denominator for decimals that don't have a pattern.\n }\n}\n\n //IF THERE'S A TRAILING PATTERN FRACTY DIVIDES THE INPUT BY ONE SUBTRACTED FROM THE NEAREST BASE 10 NUMBER WITH NUMBER OF ZEROS EQUAL TO THE LENGTH OF THE REPEATED PATTERN (I.E. A SERIES OF 9'S) MULTIPLIED BY THE BASE 10 NUMBER GREATER THAN AND CLOSEST TO THE INPUT.\nfunction yesRepeat(decimal, endPattern, patternSequence, integer, type) {\n\n const rep = true; //The numerator repeats.\n const nonPatternLength = decimal.length - patternSequence.length >= 1 ? decimal.length - patternSequence.length : 1; //Does the length of the non pattern segment of the input = 0? If it does, that's incorrect since we know it must equal at least 1, otherwise it's the length of the decimal input minus the length of the full pattern.\n const decimalMultiplier2 = Math.pow(10,(nonPatternLength)); //Second multiplier to use.\n const float = parseFloat(`0.${decimal}`); //Convert the decimal input to a floating point number.\n const decimalMultiplier1 = Math.pow(10,(endPattern.length)); //Find the right multiplier to use for both numerator and denominator, which will later have 1 subtracted from it in the case of the denominator.\n const numerator = Math.round(((float * decimalMultiplier1) - float) * Math.pow(10,(nonPatternLength))); //Find the numerator to be used in calculating the fraction that contains a repeating trailing sequence.\n const denominator = (decimalMultiplier1-1) * decimalMultiplier2; //Caluculate the denominator using the equation for repeating trailing sequences.\n return reduce(numerator, denominator, integer, type, rep); //Further reduce the numerator and denominator.\n}\n\n//IF THERE'S NO TRAILING PATTERN FRACTY DIVIDES THE INPUT BY THE NEAREST BASE 10 INTEGER GREATER THAN THE NUMERATOR.\nfunction noRepeat(decimal, integer, type) {\n const rep = false; //The numerator doesn't repeat.\n const numerator = parseInt(decimal, 10); //Numerator begins as decimal input converted into an integer.\n const denominator = Math.pow(10,(decimal.length)); //Denominator begins as 10 to the power of the length of the numerator.\n return reduce(numerator, denominator, integer, type, rep); //Reduce the numerator and denominator.\n}\n\n//FRACTY REDUCES THE FRACTION.\nfunction reduce(numerator, denominator, integer, type, rep) {\n\n const primeNumberArray = [2, 3, 5]; //If the numerator isn't from a repeating decimal case, the initialized array of prime numbers will suffice to find the common denominators.\n\n if (rep === true) { //If the numerator is from a repeating decimal case, fracty generates an array of prime numbers from 2 to the square root of the numerator, loops over the array to find the common denominators, and reduces the fraction. Since reducing by prime numbers beyond i^2 isn't necessary, fracty creates and array of the prime numbers that, when squared, are still less than or equal to the numerator.\n for (let i = 3; i * i <= numerator; i+=2) {\n if (numerator % i === 0) {\n primeNumberArray.push(i);\n }\n }\n }\n\n let j = 0; //Initialize counter over the prime number array for the while loop.\n let comDenom = 1; //Initialize the common denominator.\n let num = numerator; //Initialize the numerator.\n let den = denominator; //Initialize the denominator.\n\n while (j <= primeNumberArray.length) { //While i is less than the length of the array of prime numbers, check divisibility for both numerator and denominator and if there's a common denominator, divide it by that prime number and continue until they no longer reduce and you have to check the next prime number in the array.\n if (num % primeNumberArray[j] === 0 && den % primeNumberArray[j] === 0) {\n comDenom = comDenom * primeNumberArray[j];\n num = num/primeNumberArray[j];\n den = den/primeNumberArray[j];\n } else {\n j++;\n }\n }\n\n return returnStrings(den, num, integer, type);\n}\n\n//FRACTY RETURNS THE REDUCED FRACTION AS A STRING.\nfunction returnStrings (den, num, integer, type) {\n\n if (den === 1 && num === 1) { //If '1/1'\n integer = `${type}${(parseInt(integer) + 1).toString()}`; //Add 1 to the integer and return a string without a fraction.\n return `${integer}`;\n } else if (num === 0) { //This happens when there are >=15 zeros in the decimal part of your number and the number has an integer part that is not zero and so doesn't coerce to scientific notation.\n return `${type}${integer}`;\n } else if (integer == '0') { //If the integer is '0' just return the fraction.\n return `${type}${num}/${den}`;\n } else {\n return `${type}${integer} ${num}/${den}`; //If there's an integer and a fraction return both.\n }\n\n}\n","import View from './View.js';\n\nimport icons from 'url:../../img/icons.svg';\nimport fracty from 'fracty';\n\nclass RecipeView extends View {\n _parentElement = document.querySelector('.recipe');\n _errorMessage = 'We could not find that recipe. Please try another one!';\n _message = '';\n\n addHandlerRender(handler) {\n ['hashchange', 'load'].forEach(ev => window.addEventListener(ev, handler));\n }\n\n addHandlerUpdateServings(handler) {\n this._parentElement.addEventListener('click', function (e) {\n const btn = e.target.closest('.btn--update-servings');\n if (!btn) return;\n\n const { updateTo } = btn.dataset;\n\n if (+updateTo > 0) handler(+updateTo);\n });\n }\n\n addHandlerAddBookmark(handler) {\n this._parentElement.addEventListener('click', function (e) {\n const btn = e.target.closest('.btn--bookmark');\n if (!btn) return;\n handler();\n });\n }\n\n _generateMarkup() {\n return `\n \n \n