Temperature
Reversibility, made visible. Edit either field and the other follows. A single reversible calculation keeps them in step: it runs forward to show Fahrenheit and backward to accept an edit to it.
Live
The code
const celsius = Reactive.State(Maths.Real)(20);
// forward: fahrenheit = celsius × 9 ÷ 5 + 32, composed one step per line
const scaled = Maths.Real.Multiply(celsius, 9);
const ratio = Maths.Real.Divide(scaled, 5);
const reading = Maths.Real.Add(ratio, 32);
// reverse: still reactive code, so it composes with the same operations
const writing = Reactive.Reverse((f) => {
Reactive.Set(celsius,
Maths.Real.Divide(Maths.Real.Multiply(Maths.Real.Subtract(f, 32), 5), 9));
});
const fahrenheit = Reactive.Binding(reading, writing);
Layout.Row(() => {
Input.Number(celsius); // two-way: reads and writes celsius
Input.Number(fahrenheit); // two-way: an edit runs the reverse into celsius
});
celsius, which re-derives everything. See Reversibility.