Facebook Pixel

Temperature Convertor

React.js
medium
30 mins

Build a temperature convertor using React that allows users to convert values between Celsius, Fahrenheit, and Kelvin.

Requirements

  1. An input field to enter a numeric temperature.
  2. Two Dropdowns to Choose From:
  • The "From" unit (Celsius, Fahrenheit, Kelvin).
  • The "To" unit (Celsius, Fahrenheit, Kelvin).
  1. A Convert button that triggers the conversion when clicked.

Important Notes

  1. The Convert button should remain disabled if:
  • The temperature field is empty
  • Either unit (From or To) is not selected
  1. When button is clicked, the conversion should:
  • Get the input value and selected units (fromUnit and toUnit).
  • Convert the value to Celsius as an intermediate step
  • Convert from Celsius to the target unit
  • Display the result as: {input} {fromUnit} is {convertedValue} {toUnit}. ex. 45 Celsius is 113.00 Fahrenheit
  1. Display the final converted value rounded to 2 decimal places.

Testing Instructions

Please use the following data-testid attributes in your React component:

  • temperature-input β†’ for the temperature <input />
  • from-unit β†’ for the "From Unit" <select />
  • to-unit β†’ for the "To Unit" <select />
  • convert-button β†’ for the "Convert" <button />

Reference UI

temperatureConvertor

Preview what you need to build

Companies:

paytm
slack
spotify

Solve Similar questions πŸ”₯