Use an input tag to change text for a cookbook

,
#1

Hi all, I’m a novice so please forgive me if I cannot describe things sufficiently.

I have a tiddlywiki which acts as my cookbook. For many recipes, I make half or double batches on any given day. Currently that means I have to do the math in my head or rewrite the recipe to include the modified amounts.

Many recipe sites have an html select tag with options such as ‘double batch’. I would like to recreate this by using an input tag (or a tiddlywiki equivalent).
The ingredient amounts should all be multiplied by the number in the input field. With the default number set to 1.

pseudo code would be something like:

<input type="number" name="batch-multiplier">

! Ingredients
* (100 * batch-multiplier) grams Flour
* (60 * batch-multiplier) grams Water

etc

Seems like a simple enough thing to do. So I was looking around on the tiddlywiki wiki about procedures, functions, macros, and variables, but I couldn’t wrap my head around any of that. Nor how to implement it in my own wiki.
I would prefer to use Tiddlywiki’s Wikitext or a macro rather than javascript because my cookbook is exposed to the internet.

I would very much appreciate any help in making this.
Thank you in advance

1 Like
#2

Try something like this:

<$edit-text type="number" field="batch-multiplier"/>
<$let n={{{ [{!!batch-multiplier}!is[blank]else[1]] }}}>

! Ingredients
* <$text text={{{ [[100]multiply<n>] }}}/> grams Flour
* <$text text={{{ [[60]multiply<n>] }}}/> grams Water

Notes:

  • The $edit-text widget takes your input and stores it in the batch-multiplier field of the current tiddler
  • The $let widget retrieves the stored batch-multiplier field value and sets a variable named “n”. If the stored value is blank (or missing), the variable value defaults to 1.
  • The recipe uses “filtered transclusions” (the tripled curly brackets) to multiply the base ingredient amounts by the <n> variable.
  • By default, filtered transclusions are displayed as linked text. The $text widget is used to show the calculated values as plain text.

enjoy,
-e

1 Like
#3

This works perfectly! Thank you so much for the explanations of each part too. You put it very clearly and simply