Add milliliter calculator

center-key · May 28, 2024 · d7776a4 · d7776a4
1 parent 6ce57e4
commit d7776a4
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/src/website/app.js b/src/website/app.js
@@ -80,6 +80,22 @@ const app = {
          const toCelsius = () => Math.round((tempF - 32) * 5 / 9);
          output.textContent = isNaN(tempF) ? 'N/A' : dna.util.round(toCelsius(), 2);
          },
+      convertToMilliliters(elem) {
+         // <option data-type=volume data-per-cup=16>Tablespoons</option>
+         const mlPerCup = 236.588;
+         const form = elem.closest('form');
+         const elemMap = {
+            quantity: form.querySelector('input[name=quantity]'),
+            units:    form.querySelector('select[name=units]'),
+            };
+         const qty =         app.calculator.fractionToFloat(elemMap.quantity.value);
+         const unitsOption = elemMap.units.options[elemMap.units.selectedIndex];
+         const unitsPerCup = Number(unitsOption.dataset.perCup);
+         const toMl =        () => Math.round(mlPerCup * qty / unitsPerCup);
+         const format =      (ml) => dna.format.getNumberFormatter('#')(dna.util.round(ml, 2));
+         const output =      form.closest('section').querySelector('output');
+         output.textContent = qty ? format(toMl()) : 'N/A';
+         },
       populateIngredientDropDown() {
          const defaultIngredient = 'Almonds';
          const keys = [...new Set(globalThis.ingredientsDB.map(ingredient => ingredient.key))];

diff --git a/src/website/calculator/calculator.less b/src/website/calculator/calculator.less
@@ -144,3 +144,42 @@ section.celsius-calculator {
          }
       }
    }
+
+section.milliliters-calculator {
+   >div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0px 5px;
+      >form {
+         display: flex;
+         align-items: center;
+         background-color: lightblue;
+         border-radius: 10px;
+         padding: 10px 20px 10px 25px;
+         margin: 0px 20px 0px 0px;
+         .MobileMode({ margin-right: 5px; });
+         input {
+            width: 4em;
+            margin: 0px 0.3em 0px 0px;
+            }
+         }
+      >i.font-icon {
+         font-size: 2rem;
+         color: royalblue;
+         margin: 0px;
+         }
+      >figure {
+         font-size: 1.8rem;
+         padding: 0px;
+         margin: 0px;
+         output {
+            display: inline-block;
+            min-width: 3em;
+            .MobileMode({ min-width: 2em; });
+            text-align: right;
+            margin-right: 0.2em;
+            }
+         }
+      }
+   }
diff --git a/src/website/calculator/index.html b/src/website/calculator/index.html
@@ -64,6 +64,32 @@ <h2>Oven Temperature Conversion</h2>
       </div>
    </section>
 
+   <section class=milliliters-calculator>
+      <h2>Volume Conversion</h2>
+      <div>
+         <form>
+            <label>
+               <span>Quantity:</span>
+               <input name=quantity value=1 data-on-input=app.calculator.convertToMilliliters>
+            </label>
+            <label>
+               <span>Units:</span>
+               <select name=units data-on-change=app.calculator.convertToMilliliters>
+                  <option data-type=volume data-per-cup=48>         Teaspoons</option>
+                  <option data-type=volume data-per-cup=16 selected>Tablespoons</option>
+                  <option data-type=volume data-per-cup=8>          Fluid Ounces</option>
+                  <option data-type=volume data-per-cup=1>          Cups</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>
+               </select>
+            </label>
+         </form>
+         <i data-icon=arrow-alt-circle-right></i>
+         <figure><output>15</output> ml</figure>  <!-- Start at 1 tbsp = 15 ml -->
+      </div>
+   </section>
+
    <section>
       <h2>NIST Metric Kitchen</h2>
       <figure>