Temperature ConverterLoading saved progress…

Temperature Converter

Build a temperature converter with two fields — Celsius and Fahrenheit — where editing either one instantly updates the other. It's a small widget, but it teaches a sharp lesson: when two inputs are two views of the same quantity, neither can be the sole source of truth. Whichever field the user is typing in is the one driving; the other is computed from it.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Two number inputs; typing in one recomputes and fills the other via F = C × 9/5 + 32.

Examples

type 100 in Celsius     → Fahrenheit shows 212
type 32  in Fahrenheit  → Celsius shows 0
type -40 in either      → the other also shows -40
clear a field           → both clear (don't snap to 0)
C → F :  F = C * 9/5 + 32
F → C :  C = (F - 32) * 5/9

Notes

  • Both fields are editable. You can't derive one purely from the other and call it done — the user must be able to type in either. Hold both values in state and, on each change, recompute the partner.
  • Round the computed side. Conversions produce long decimals (e.g. 37.77777…); round to keep it readable, but only round the computed field, not what the user is typing.
  • Handle the empty string. While typing, a field can be ''. Number('') is 0, so guard it — a cleared field should clear its partner, not fill it with 0.
  • Out of scope. Kelvin, unit dropdowns, input validation/error messages — just C↔F.
Loading editor…
Loading preview…