-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Working version of recipe conversion calculator
- Loading branch information
Showing
17 changed files
with
487 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| label:has(select) { | ||
| position: relative; | ||
| max-width: 25em; | ||
| text-align: left; | ||
| padding: 0px; | ||
| &::after { | ||
| content: "\276F"; //arrow: "❯" (Heavy Right-Pointing Angle Quotation Mark Ornament) | ||
| position: absolute; | ||
| right: 0.4em; | ||
| bottom: 0.03em; | ||
| font-size: 1.5em; | ||
| transform: rotate(90deg); //point down | ||
| pointer-events: none; | ||
| } | ||
| span { | ||
| } | ||
| select { | ||
| appearance: none; | ||
| background-color: mintcream; | ||
| border: 1px solid silver; | ||
| padding: 0.3em 2em 0.3em 0.3em; | ||
| margin: 0px; | ||
| &:invalid { | ||
| color: red; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| section.calculator { | ||
| min-height: 600px; //prevent jitter when calculations refresh | ||
| >form { | ||
| position: relative; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| gap: 10px 30px; | ||
| text-align: left; | ||
| background-color: lightblue; | ||
| border: 10px solid white; | ||
| border-radius: 30px; | ||
| padding: 20px 20px 40px 20px; | ||
| margin-bottom: 10px; | ||
| >label { | ||
| >span { | ||
| margin-bottom: 3px; | ||
| } | ||
| >input[name=quantity] { | ||
| max-width: 6em; | ||
| margin: 0px; | ||
| } | ||
| >select { | ||
| margin: 0px; | ||
| &[name=units] { | ||
| } | ||
| &[name=ingredient] { | ||
| } | ||
| option { | ||
| } | ||
| } | ||
| } | ||
| p { | ||
| position: absolute; | ||
| bottom: 5px; | ||
| font-size: 0.8rem; | ||
| margin: 0px; | ||
| } | ||
| } | ||
| >figure { | ||
| >figcaption { | ||
| font-style: normal; | ||
| margin-bottom: 15px; | ||
| } | ||
| >p { | ||
| font-size: 2rem; | ||
| color: royalblue; | ||
| margin-bottom: 15px; | ||
| } | ||
| >div { | ||
| >output { | ||
| display: block; | ||
| text-align: left; | ||
| font-style: normal; | ||
| b { | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| section.oven-temperature { | ||
| >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: 5em; | ||
| .MobileMode({ width: 3.5em; }); | ||
| 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; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| {% assign articleTitle = 'Recipe Converter Calculator' %} | ||
| {% assign heroImage = 'banana-bread-by-nist.jpg' %} | ||
| {% assign heroCaption = 'Convert ingredients to grams' %} | ||
| {% render 'src/templates/doc-begin.html', articleTitle: articleTitle, heroImage: heroImage, heroCaption: heroCaption %} | ||
|
|
||
| <main class=center-line> | ||
|
|
||
| <section class=calculator data-on-load=app.calculator.init> | ||
| <h2>{{articleTitle}}</h2> | ||
| <form> | ||
| <label> | ||
| <span>Quantity:</span> | ||
| <input name=quantity value=1 maxlength=8 required | ||
| 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> | ||
| </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> | ||
| </label> | ||
| <p>Quantity can include fractions, such as: <i>3 1/2</i></p> | ||
| </form> | ||
| <figure id=calculator-result class=dna-template> | ||
| <figcaption> | ||
| <b data-format-number=#.###>~~imperial.quantity~~</b> | ||
| <b>~~imperial.units~~</b> <b>~~imperial.name~~</b> | ||
| </figcaption> | ||
| <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> | ||
| </output> | ||
| </div> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section class=oven-temperature> | ||
| <h2>Oven Temperature Conversion</h2> | ||
| <div> | ||
| <form><input value=350 data-on-input=app.calculator.updateTemperature>°F</form> | ||
| <i data-icon=arrow-alt-circle-right></i> | ||
| <figure><output id=celsius class=dna->180</output>°C</figure> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>NIST Metric Kitchen</h2> | ||
| <figure> | ||
| <img src={{heroImage}} data-author=nist.gov data-license=public-domain alt=bread> | ||
| <figcaption>Metric Banana Bread</figcaption> | ||
| </figure> | ||
| <p> | ||
| Get helpful cooking and baking tips from the NIST* Metric Kitchen at:<br> | ||
| <a href=https://www.nist.gov/pml/owm/metric-si/metric-kitchen class=external-site> | ||
| nist.gov/pml/owm/metric-si/metric-kitchen | ||
| </a> | ||
| </p> | ||
| <p> | ||
| NIST has metric recipes for banana bread, mac and cheese, apple crisps, and more at:<br> | ||
| <a href=https://doi.org/10.6028/NIST.SP.1290 class=external-site> | ||
| doi.org/10.6028/NIST.SP.1290 | ||
| </a> | ||
| </p> | ||
| <small><b>*NIST:</b> National Institute of Standards and Technology</small> | ||
| </section> | ||
|
|
||
| <section> | ||
| <i data-brand=github></i> | ||
| <h2>Open Source</h2> | ||
| <p> | ||
| The <i>Recipe Converter Calculator</i> is an open source community project. | ||
| You can help out by submitting corrections and additions. | ||
| </p> | ||
| <p> | ||
| Data for the calculator is on GitHub at:<br> | ||
| <a href=https://github.com/center-key/think-metric/blob/main/src/website/calculator/ingredients-db.js> | ||
| ingredients-db.js | ||
| </a> | ||
| </p> | ||
| </section> | ||
|
|
||
| </main> | ||
|
|
||
| {% render 'src/templates/doc-end.html' %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // Think Metric | ||
|
|
||
| globalThis.ingredientsDB = [ | ||
| { name: 'Almonds', form: 'Sliced', gramsPerCup: 110 }, | ||
| { name: 'Almonds', form: 'Raw', gramsPerCup: 130 }, | ||
| { name: 'Almonds', form: 'Roasted', gramsPerCup: 120 }, | ||
| { name: 'Butter', form: null, gramsPerCup: 227 }, | ||
| { name: 'Honey', form: null, gramsPerCup: 340 }, | ||
| ]; |
Oops, something went wrong.