Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Temperature Converter
easy25 min
Create two linked temperature fields. Users can edit either scale, and the other value should follow immediately while preserving the text being typed.
Requirements
Start with two empty controlled text inputs labeled Celsius and Fahrenheit.
Editing Celsius immediately updates Fahrenheit using F = C × 9/5 + 32; editing Fahrenheit updates Celsius using C = (F − 32) × 5/9.
Keep the user’s typed value in its source input. Round only the computed value to at most two decimal places, without trailing zeroes.
Clearing either input clears both values and any error. Whitespace-only input also clears the computed field.
For non-finite or nonnumeric input, keep the typed text, clear the other field and show exactly “Enter a valid temperature.” Clear the error when the next valid value is entered.
Keep the supplied IDs so browser checks can find the controls. Use your selected framework to update the view; do not query or mutate rendered DOM manually.
Examples
Example 1
Input: Type 25 into Celsius
Output: Fahrenheit becomes 77
Example 2
Input: Type 100 into Fahrenheit
Output: Celsius becomes 37.78
Convert finite temperatures in either direction and round computed output to at most two decimal places.
What the tests check
Celsius freezing point
Celsius boiling point
Fahrenheit conversion
Negative values convert both ways
Rounds computed values only
Clearing either input clears both
Invalid text preserves input and clears output
Recovers from invalid input
Changing the opposite field replaces the prior result
