Build a Temperature Converter | Interview Question

Q: Build a Temperature Converter

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and controlled inputs; designing state for two inputs that depend on each other is the new part. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1. ## 1. Why This Even Matters — A Story First Two friends keep a shared shopping budget, one in euros and one in dollars, each in their own notebook. Every time one of them changes a number, they phone the other, who converts and writes it down, and then, being thorough, phones back to confirm, and the first one converts back... After a few rounds of rounding, 10 euros has quietly become 9.99. The fix is obvious once you see it: keep

The problem

Question presented to candidate: "Build a temperature converter with two boxes, Celsius and Fahrenheit. Typing in either box should update the other one live. Think about what happens while someone is halfway through typing a number, and about ugly floating point results."

Requirements:

Two labelled inputs, °C and °F; editing one updates the other as you type.
The box being typed in keeps exactly what the user typed (for example "37." or "-").
Results rounded to at most two decimals, without trailing zeros or "-0".
Empty or half-typed input ("", "-", ".") clears the other box without an error; clearly invalid input ("abc") shows an error tied to the input.
A note when the temperature is below absolute zero (-273.15 °C).

What a strong answer should cover:

One source of truth: store which box was edited and its raw text; derive the other box. Two independent states that update each other lead to loops or rounding drift.
The formulas F = C × 9/5 + 32 and C = (F − 32) × 5/9, and floating point output such as 36.6 → 97.88000000000001.
Why a text input with inputmode="decimal" beats type="number" here (half-typed values like "-" read as an empty string).
Validation states with aria-invalid and aria-describedby, and a status message.
Keeping conversion and formatting in a pure helper module that is easy to test.

Clarifying questions expected:

"How many decimals should results show?"
"Should Kelvin be included?"
"Do we show an error while the user is mid-way through typing a negative number?"

Code / implementation expected: Yes. A component plus a small pure conversion helper, roughly 50-80 lines.

React
Forms
Logic

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know useState and controlled inputs; designing state for two inputs that depend on each other is the new part. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1.

1. Why This Even Matters — A Story First

Two friends keep a shared shopping budget, one in euros and one in dollars, each in their own notebook. Every time one of them changes a number, they phone the other, who converts and writes it down, and then, being thorough, phones back to confirm, and the first one converts back... After a few rounds of rounding, 1

The solution is hidden so you can try first

9 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import TemperatureConverter from "./src/components/TemperatureConverter";

export default function App() {
  return (
    <main className="page">
      <h1>Temperature Converter</h1>
      <p className="hint">
        Type in either box. The other one updates as you type.
      </p>
      <TemperatureConverter />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.