Skip to content

Commit

Permalink
Add full description to list of ingredients
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilafian
dpilafian committed May 27, 2024
1 parent 3c35e4c commit ecdc446
Show file tree
Hide file tree
Showing 5 changed files with 824 additions and 34 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/run-spec-on-push.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Build and Run Specifications
name: Build and Test

on: [push]

Expand Down
32 changes: 20 additions & 12 deletions src/website/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,18 @@ const app = {
const unitsOption = elemMap.units.options[elemMap.units.selectedIndex]; //ex: <option value=teaspoon data-type=volume data-per-cup=48>Teaspoons</option>
const unitsLabel = unitsOption.textContent.replace(/\(.*/, '').trim().toLowerCase(); //ex: 'cups'
const isVolume = unitsOption.dataset.type === 'volume'; //check if 'volume' or 'weight'
const unitsPerCup = Number(unitsOption.dataset.perCup);
const gramsPerUnit = Number(unitsOption.dataset.grams);
const name = elemMap.ingredient.value; //ex: 'Almonds'
const ingredients = globalThis.ingredientsDB.filter(ingredient => ingredient.name === name); //ex: [{ name: 'Almonds', ...
const unitsPerCup = Number(unitsOption.dataset.perCup); //ex: <option value=teaspoon data-type=volume data-per-cup=48>
const gramsPerUnit = Number(unitsOption.dataset.grams); //ex: <option value=lb data-type=weight data-grams=453.592>
const key = elemMap.ingredient.value; //ex: 'Almonds'
const ingredients = globalThis.ingredientsDB.filter(ingredient => ingredient.key === key); //ex: [{ key: 'Almonds', ...
const byVolume = (ingredient) => qty * ingredient.gramsPerCup / unitsPerCup;
const toGrams = (ingredient) => isVolume ? byVolume(ingredient) : qty * gramsPerUnit;
const toMetric = (ingredient) => ({ ingredient: ingredient, grams: toGrams(ingredient)});
const calcResults = () => ({ quantity: qty, unitsLabel, name, metric: ingredients.map(toMetric) });
if (qtyValid && elemMap.ingredient.selectedIndex > 0)
const calcResults = () => ({ quantity: qty, unitsLabel, name: key, metric: ingredients.map(toMetric) });

console.log({ calculatorForm, elemMap, qty, qtyValid, unitsOption, unitsLabel, isVolume, unitsPerCup, gramsPerUnit, name: key, ingredients });

if (qtyValid)
dna.clone('calculator-result', calcResults(), { empty: true });
},
updateTemperature(elem) {
Expand All @@ -67,15 +70,20 @@ const app = {
output.textContent = isNaN(tempF) ? 'N/A' : dna.util.round(toCelsius(), 2);
},
populateIngredientDropDown() {
const allNames = globalThis.ingredientsDB.map(ingredient => ingredient.name);
const ingredientNames = [...new Set(allNames)];
const ingredientPlaceholder = dna.clone('input-ingredient', 'Select...');
ingredientPlaceholder.selected = true;
ingredientPlaceholder.disabled = true;
dna.clone('input-ingredient', ingredientNames);
const defaultIngredient = 'Almonds';
const keys = [...new Set(globalThis.ingredientsDB.map(ingredient => ingredient.key))];
const ingredients = keys.map(key => ({
key: key,
words: globalThis.ingredientsDB.filter(item => item.key === key).map(item => item.description).join(' '),
}));
const options = dna.clone('input-ingredient', ingredients);
const defaultOption = options[keys.indexOf(defaultIngredient)];
defaultOption.selected = true;
app.calculator.convertToGrams(defaultOption);
},
init() {
app.calculator.populateIngredientDropDown();
globalThis.document.activeElement.select(); //highlight the "Quantity" field value
},
},

Expand Down
3 changes: 3 additions & 0 deletions src/website/article/rules/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ <h2>America, Fuck Yeah</h2>
understand metric.&nbsp;
Ain't nobody got time to listen to tankies, bootlickers, and jihadists cry about the
U.S.&nbsp;
If you live in a democracy, the U.S. Navy's <i>Freedom of Navigation Operations</i> might
just be the reason you still have a democracy.&nbsp;
</p>
<p>
NASA used metric for the Apollo flight calculations thus making America the one and only
Expand Down Expand Up @@ -122,6 +124,7 @@ <h2>Metric clock gibberish is prohibited</h2>
using Kelvin instead of Celsius,
changing metric to a base system other than base-10,
derisive comparisions to Myanmar and Liberia,
pontificating about the correct size of kilobytes and megabytes,
and lamenting about how Caribbean pirates stole America's official 1 kilogram weight.
</p>
<figure>🚔 🚔 🚔</figure>
Expand Down
35 changes: 19 additions & 16 deletions src/website/calculator/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,31 @@ <h2>{{articleTitle}}</h2>
<form>
<label>
<span>Quantity:</span>
<input name=quantity value=1 maxlength=8 required
<input name=quantity value=2/3 maxlength=8 required autofocus
data-on-input=app.calculator.convertToGrams placeholder=Quantity...>
</label>
<label>
<span>Units:</span>
<select name=units data-on-change=app.calculator.convertToGrams>
<option value=teaspoon data-type=volume data-per-cup=48> Teaspoons</option>
<option value=tablespoon data-type=volume data-per-cup=16> Tablespoons</option>
<option value=floz data-type=volume data-per-cup=8> Fluid Ounces (fl oz)</option>
<option value=stick data-type=volume data-per-cup=2> Sticks (4 oz)</option>
<option value=cup data-type=volume data-per-cup=1 selected>Cups</option>
<option value=block data-type=volume data-per-cup=0.5> Blocks (4 sticks)</option>
<option value=pint data-type=volume data-per-cup=0.5> Pints</option>
<option value=quart data-type=volume data-per-cup=0.25> Quarts</option>
<option value=gallon data-type=volume data-per-cup=0.0625> Gallons</option>
<option value=oz data-type=weight data-grams=28.3495> Ounces (oz weight)</option>
<option value=lb data-type=weight data-grams=453.592> Pounds (lb weight)</option>
<option data-type=volume data-per-cup=48> Teaspoons</option>
<option data-type=volume data-per-cup=16> Tablespoons</option>
<option data-type=volume data-per-cup=8> Fluid Ounces (fl oz)</option>
<option data-type=volume data-per-cup=2> Sticks (4 oz)</option>
<option data-type=volume data-per-cup=1 selected>Cups</option>
<option data-type=volume data-per-cup=0.5> Blocks (4 sticks)</option>
<option data-type=volume data-per-cup=0.5> Pints</option>
<option data-type=volume data-per-cup=0.25> Quarts</option>
<option data-type=volume data-per-cup=0.0625> Gallons</option>
<option data-type=weight data-grams=28.3495> Ounces (oz weight)</option>
<option data-type=weight data-grams=453.592> Pounds (lb weight)</option>
<option data-type=volume data-per-cup=236.588> Milliliters (ml)</option>
<option data-type=volume data-per-cup=0.236588> Liters (L)</option>
</select>
</label>
<label>
<span>Ingredient:</span>
<select name=ingredient data-on-change=app.calculator.convertToGrams autofocus>
<option id=input-ingredient class=dna-template>~~[value]~~</option>
<select name=ingredient data-on-change=app.calculator.convertToGrams>
<option id=input-ingredient class=dna-template>~~key~~</option>
</select>
</label>
<p>Quantity can include fractions, such as: <i>3 1/2</i></p>
Expand All @@ -45,8 +47,9 @@ <h2>{{articleTitle}}</h2>
<p><i data-icon=arrow-alt-circle-down></i></p>
<div>
<output data-array=~~metric~~>
<b data-precision=2 data-format-number=#>~~grams~~</b> <b>grams</b>
<b>~~ingredient.form~~</b> <b>~~ingredient.name~~</b>
<b data-precision=2 data-format-number=#>~~grams~~</b>
<b>grams</b>
<b>~~ingredient.description~~</b>
</output>
</div>
</figure>
Expand Down
Loading

0 comments on commit ecdc446

Please sign in to comment.