diff --git a/_layouts/recipe.html b/_layouts/recipe.html
index 15822c5d9..e7586fee4 100644
--- a/_layouts/recipe.html
+++ b/_layouts/recipe.html
@@ -45,6 +45,15 @@
Components
{% if page.ingredients %}
Ingredients
+
+
+
{% for ingredient in page.ingredients %}
@@ -149,4 +158,5 @@ Steps
});
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/css/bass.css b/css/bass.css
index 8daace1a7..fe21649b3 100644
--- a/css/bass.css
+++ b/css/bass.css
@@ -1254,4 +1254,13 @@ input[type=range] {
.border-darken-2 { border-color: rgba(0,0,0,.125) }
.border-darken-3 { border-color: rgba(0,0,0,.25) }
.border-darken-4 { border-color: rgba(0,0,0,.5) }
-.muted { opacity: .5 }
\ No newline at end of file
+.muted { opacity: .5 }
+
+.select-scale {
+ display: inline;
+}
+
+.select-scale:before {
+ content: 'Scale';
+ color: black;
+}
\ No newline at end of file
diff --git a/js/scale_recipes.js b/js/scale_recipes.js
new file mode 100644
index 000000000..22e49ba7b
--- /dev/null
+++ b/js/scale_recipes.js
@@ -0,0 +1,148 @@
+'use strict';
+const scaleFactor = 1;
+
+preprocessIngredients();
+scaleRecipe(scaleFactor);
+
+// --- Functions needed ---
+
+function toNumber(inString){
+ let result;
+ if (inString.includes('/')){
+ let z = inString.split('/');
+ result = z[0]/z[1];
+ }
+ else {
+ result = +inString
+ }
+ return result
+}
+
+function quantityToNumber(inString){
+ let valueArray = inString.split(/\s/g);
+ valueArray = valueArray.map(item => toNumber(item));
+ let theTotal = valueArray.reduce((a, b) => a + b);
+ return theTotal
+}
+
+function numberToPretty(inNum){
+ let wholeNumber;
+ if (inNum < 1){
+ wholeNumber = "";
+ }
+ else {
+ wholeNumber = Math.trunc(inNum).toString();
+ }
+ let fraction = inNum % 1;
+ let fracRep;
+ if (Math.abs(fraction) < 0.00001){
+ fracRep = ''
+ } else if (Math.abs(fraction - 1/2) < 0.00001){
+ fracRep = " ½";
+ } else if (Math.abs(fraction - 1 / 4) < 0.00001) {
+ fracRep = " ¼";
+ } else if (Math.abs(fraction - 3 / 4) < 0.00001) {
+ fracRep = " ¾";
+ } else if (Math.abs(fraction - 1 / 3) < 0.00001) {
+ fracRep = " ⅓";
+ } else if (Math.abs(fraction - 2 / 3) < 0.00001) {
+ fracRep = " ⅔";
+ } else if (Math.abs(fraction - 1 / 8) < 0.00001) {
+ fracRep = " ⅛";
+ } else if (Math.abs(fraction - 3 / 8) < 0.00001) {
+ fracRep = " ⅜";
+ } else if (Math.abs(fraction - 5 / 8) < 0.00001) {
+ fracRep = " ⅝";
+ } else if (Math.abs(fraction - 7 / 8) < 0.00001) {
+ fracRep = " ⅞";
+ } else if (Math.abs(fraction - 1 / 6) < 0.00001) {
+ fracRep = " ⅙";
+ } else if (Math.abs(fraction - 5 / 6) < 0.00001) {
+ fracRep = " ⅚";
+ } else if (Math.abs(fraction - 1 / 9) < 0.00001) {
+ fracRep = " 1⁄9";
+ } else if (Math.abs(fraction - 2 / 9) < 0.00001) {
+ fracRep = " 2⁄9";
+ } else if (Math.abs(fraction - 4 / 9) < 0.00001) {
+ fracRep = " 4⁄9";
+ } else if (Math.abs(fraction - 5 / 9) < 0.00001) {
+ fracRep = " 5⁄9";
+ } else if (Math.abs(fraction - 7 / 9) < 0.00001) {
+ fracRep = " 7⁄9";
+ } else if (Math.abs(fraction - 8 / 9) < 0.00001) {
+ fracRep = " 8⁄9";
+ } else {
+ fracRep = toString(fraction);
+ }
+ // Now, if it matches a nice fraction code in html give it that, otherwise leave as decimal
+ // let final = (wholeNumber + fracRep).trim() // concatenate
+ let final = wholeNumber + fracRep
+ return final;
+}
+
+function extractQuantity(ingredient){
+ let reMatch = ingredient.match(/^\d[/\d\s\.]*\s/i);
+ let quantity;
+ if (reMatch === null) {
+ quantity = "";
+ }
+ else {
+ quantity = reMatch[0];
+ }
+ return quantity
+}
+
+function scaleIngredient(bareIngredient, quantity, scale = 1){
+ let matchLength;
+ if (quantity == ""){
+ matchLength = 0
+ quantity = '1'
+ }
+ else {
+ matchLength = quantity.length
+ }
+ let newQuantity = numberToPretty(scale*quantityToNumber(quantity));
+ let result = newQuantity + ' ' + bareIngredient;
+ return result
+}
+
+function preprocessIngredients(){
+ let ingredients = document.querySelectorAll('li[itemprop=recipeIngredient]')
+ let quantityArray = [];
+ let ingredientBaseArray = [];
+ let ingredientQuantity;
+ let ingredientBase;
+ for (let i = 0; i < ingredients.length; i++) {
+ let ingredient = ingredients[i].firstElementChild;
+ // Now, run the code to modify the ingredient
+ ingredientQuantity = extractQuantity(ingredient.innerHTML);
+ quantityArray.push(ingredientQuantity);
+ ingredientBase = ingredient.innerHTML.substring(ingredientQuantity.length);
+ ingredientBaseArray.push(ingredientBase)
+ }
+ // Now I need to write this array to a file in the document tree
+ let div = document.createElement('div');
+ div.id = 'ingredient-quantities';
+ div.dataset.quantities = quantityArray.join(';')
+ document.body.appendChild(div)
+ // Now for the base ingredients
+ let div2 = document.createElement('div');
+ div2.id = 'ingredient-bases';
+ div2.dataset.ingredients = ingredientBaseArray.join(';')
+ document.body.appendChild(div2)
+}
+
+function scaleRecipe(scale = 1){
+ let ingredients = document.querySelectorAll('li[itemprop=recipeIngredient]')
+ let quantities = document.getElementById('ingredient-quantities').dataset.quantities.split(';');
+ let bases = document.getElementById('ingredient-bases').dataset.ingredients.split(';');
+ for (let i = 0; i < ingredients.length; i++) {
+ let ingredient = ingredients[i].firstElementChild;
+ // Now, run the code to modify the ingredient
+ ingredient.innerHTML = scaleIngredient(bases[i], quantities[i], scale);
+ }
+}
+
+function liveScaleRecipe(event){
+ scaleRecipe(this.options[this.selectedIndex].value)
+}