diff --git a/docs/tutorial/components-and-reactivity.md b/docs/tutorial/components-and-reactivity.md index ec85cd73..a82e2f85 100644 --- a/docs/tutorial/components-and-reactivity.md +++ b/docs/tutorial/components-and-reactivity.md @@ -57,12 +57,36 @@ Because this is such a common pattern, Marko provides a [shorthand](../reference
It's ${degF}°F
``` -## Adding Computed Values + +
It's ${degF}°F
+``` Now we can use [the `` tag](../reference/core-tag.md#const) to convert to celsius! ```marko + + +
It's ${degF}°F
+``` + +## Adding Computed Values + +The `input` tag contains a _string_, so let's convert it to a number using [the `` tag](../reference/core-tag.md#const). + +```marko + + + + +
It's ${degF}°F
+``` + +Now we can use another `` to convert to celsius! + +```marko + + @@ -78,7 +102,8 @@ Since `degC` is a [tag variable](../reference/language.md#tag-variables), its ch Now that we have a reactive variable, let's see what else we can do! Maybe some notes about the temperature, using [conditional tags](../reference/core-tag.md#if--else)? ```marko - + + @@ -102,7 +127,8 @@ Now that we have a reactive variable, let's see what else we can do! Maybe some Or what about a temperature gauge, with some fancy CSS? ```marko - + + @@ -143,7 +169,8 @@ Actually, this is getting a little bit too complex to all put in one place. Mayb ```marko /* index.marko */ - + +