Components and Reactivity
In this tutorial, we're going to build an app for converting temperature between fahrenheit and celsius.
Introducing a Tag
As with many user interfaces, our first step is to gather input from the user. We can do so with HTML's <input> tag:
<input type="number">
input type="number"
Adding State
Of course, right now we aren't keeping track of the value that this input contains. To do this, we need to introduce state. In Marko, the most common way to do this is with tag variables. Here, we will use Marko's <let> tag:
<let/degF=80/>
<input type="number" value=degF>
<div>It's ${degF}°F</div>
let/degF=80
input type="number" value=degF
div -- It's ${degF}°F
Syncing State
Now the <input> has an initial value, but we still aren't keeping track of it when it changes. One way to do this is by listening for the input event with an event handler:
<let/degF=80/>
<input
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
>
<div>It's ${degF}°F</div>
let/degF=80
input [
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
]
div -- It's ${degF}°F
Aha! Now we have a reactive variable that keeps track of our value for degrees (in fahrenheit). Let's convert it to celsius!
Note
For more control over the <input> value, we could have used Marko's controllable pattern.
Adding Computed Values
To do this, we can use a <const> tag:
<let/degF=80/>
<const/degC=(((degF - 32) * 5) / 9)/>
<input
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
>
<div>${degF}°F ↔ ${degC.toFixed(1)}°C</div>
let/degF=80
const/degC=(((degF - 32) * 5) / 9)
input [
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
]
div -- ${degF}°F ↔ ${degC.toFixed(1)}°C
Using Conditionals
Now that we have a reactive variable, let's see what else we can do! Maybe some notes about the temperature, using conditional tags?
<let/degF=80/>
<const/degC=(((degF - 32) * 5) / 9)/>
<input
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
>
<div>${degF}°F ↔ ${degC.toFixed(1)}°C</div>
<if=(degF > 90)>
It's
<strong>hot</strong>
🥵
</if>
<else if=(degF > 60)>
Lovely day! 😎
</else>
<else if=degF < 32>
Brrrrr 🥶
</else>
let/degF=80
const/degC=(((degF - 32) * 5) / 9)
input [
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
]
div -- ${degF}°F ↔ ${degC.toFixed(1)}°C
if=(degF > 90)
-- It's
strong -- hot
-- 🥵
else if=(degF > 60) -- Lovely day! 😎
else if=degF < 32 -- Brrrrr 🥶
Adding Styles and Visualization
Or what about a temperature gauge, with some fancy CSS?
<let/degF=80/>
<const/degC=(((degF - 32) * 5) / 9)/>
<input
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
>
<div>${degF}°F ↔ ${degC.toFixed(1)}°C</div>
<div class="gauge">
<div class="needle" style={ "--rotation": `${(degF * 180) / 100}deg` }/>
</div>
<style>
.gauge {
position: relative;
width: 8rem;
height: 4rem;
border-radius: 4rem 4rem 0 0;
background: conic-gradient(
from 270deg at 50% 100%,
lightblue,
blue,
green,
orange,
red 180deg
);
}
.needle {
position: absolute;
box-sizing: border-box;
width: 4rem;
height: 4px;
bottom: -2px;
background: black;
border: 1px solid white;
transform-origin: right;
transform: rotate(var(--rotation));
}
</style>
let/degF=80
const/degC=(((degF - 32) * 5) / 9)
input [
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
]
div -- ${degF}°F ↔ ${degC.toFixed(1)}°C
div.gauge
div.needle style={ "--rotation": `${(degF * 180) / 100}deg` }
style
--
.gauge {
position: relative;
width: 8rem;
height: 4rem;
border-radius: 4rem 4rem 0 0;
background: conic-gradient(
from 270deg at 50% 100%,
lightblue,
blue,
green,
orange,
red 180deg
);
}
.needle {
position: absolute;
box-sizing: border-box;
width: 4rem;
height: 4px;
bottom: -2px;
background: black;
border: 1px solid white;
transform-origin: right;
transform: rotate(var(--rotation));
}
--
Creating Reusable Components
Actually, this is getting a little bit too complex to all put in one place. Maybe we should pull that temperature gauge out into a component:
<let/degF=80/>
<const/degC=(((degF - 32) * 5) / 9)/>
<input
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
>
<div>${degF}°F ↔ ${degC.toFixed(1)}°C</div>
<gauge temperature=degF/>
let/degF=80
const/degC=(((degF - 32) * 5) / 9)
input [
type="number"
value=degF
onInput(e) {
degF = +e.target.value;
}
]
div -- ${degF}°F ↔ ${degC.toFixed(1)}°C
gauge temperature=degF
<div class="gauge">
<div
class="needle"
style={ "--rotation": `${(input.temperature * 180) / 100}deg` }
/>
</div>
<if=(input.temperature > 90)>
It's
<strong>hot</strong>
🥵
</if>
<else if=(input.temperature > 60)>
Lovely day! 😎
</else>
<else if=input.temperature < 32>
Brrrrr 🥶
</else>
<style>
.gauge {
position: relative;
width: 8rem;
height: 4rem;
border-radius: 4rem 4rem 0 0;
background: conic-gradient(
from 270deg at 50% 100%,
lightblue,
blue,
green,
orange,
red 180deg
);
}
.needle {
position: absolute;
box-sizing: border-box;
width: 4rem;
height: 4px;
bottom: -2px;
background: black;
border: 1px solid white;
transform-origin: right;
transform: rotate(var(--rotation));
}
</style>
div.gauge
div.needle style={ "--rotation": `${(input.temperature * 180) / 100}deg` }
if=(input.temperature > 90)
-- It's
strong -- hot
-- 🥵
else if=(input.temperature > 60) -- Lovely day! 😎
else if=input.temperature < 32 -- Brrrrr 🥶
style
--
.gauge {
position: relative;
width: 8rem;
height: 4rem;
border-radius: 4rem 4rem 0 0;
background: conic-gradient(
from 270deg at 50% 100%,
lightblue,
blue,
green,
orange,
red 180deg
);
}
.needle {
position: absolute;
box-sizing: border-box;
width: 4rem;
height: 4px;
bottom: -2px;
background: black;
border: 1px solid white;
transform-origin: right;
transform: rotate(var(--rotation));
}
--
What's next?
That's all we're going to build for now, but feel free to add more! Here are some ideas:
- How about a new temperature unit? Maybe Kelvin or Delisle?
- Most of the world actually uses celsius 😅, maybe users should be able pick which unit to start with
- What about wind chill? Apparently there are standard formulas if "wind velocity" is known
- Converting between temperatures is cool, but this system could be generalized. What if it converted between weights, volumes, or distances?
- Anything else! The opportunities are limitless!
Contributors
Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.
LuLaValva