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

Type in either box.

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
});
Editing the Fahrenheit field sets the binding; its reverse walks the operations back into celsius, which re-derives everything. See Reversibility.