Temperature Converter

Easy
26
67.2% Acceptance

Welcome to the Celsius to Fahrenheit (and vice versa) converter lab! In this coding challenge, you will be building a simple temperature converter to practice your skills in React.

Objective

1. Convert Celsius to Fahrenheit.
2. Convert Fahrenheit to Celsius.

Instructions

1. Setup: This lab provides a complete environment for you. No extra setup is required on your end. Start coding directly!

2. Input Fields: Implement two input fields:

• A Celsius input with the `id` of `celsius`.
• A Fahrenheit input with the `id` of `fahrenheit`.

Both fields should be of the `number` type.

3. Default Value: The Celsius input (`#celsius`) should be initialized with a value of `0` when the application starts.

4. Synchronization: The most critical aspect of this lab is to keep the Celsius and Fahrenheit inputs synchronized. When a user enters a value in one input, the other should automatically adjust to reflect the converted temperature.

Conversion Formulae

• To convert from Celsius to Fahrenheit:
Fahrenheit = (Celsius × 9/5) + 32

• To convert from Fahrenheit to Celsius:
Celsius = (Fahrenheit - 32) × 5/9

Challenges Information

Challenge 1: Create Celsius Input

Objective:

• Implement an input field to capture temperatures in Celsius.

Requirements:

• The input field should have an `id` attribute labeled `celsius`.
• It must be of type `number` so only numerical values can be entered.

Challenge 2: Create Fahrenheit Input

Objective:

• Design an input field to capture temperatures in Fahrenheit.

Requirements:

• The input field must have an `id` attribute named `fahrenheit`.
• It should be of the type `number`.

Challenge 3: Initialize Celsius Value

Objective:

• Set a starting value for the Celsius input field when the application is loaded.

Requirements:

• When the application is initiated, the `#celsius` input field should automatically have the value `0`.

Challenge 4: Synchronize Celsius and Fahrenheit Fields

Objective:

• Keep the Celsius and Fahrenheit input fields in sync. If one field is updated, the other should adjust to reflect the right converted temperature.

Requirements:

• When a value is entered into the `#celsius` field, the `#fahrenheit` field should reflect its Fahrenheit equivalent. Use the formula: `Fahrenheit = (Celsius * 9/5) + 32`.
• Similarly, when a value is inputted into the `#fahrenheit` field, the `#celsius` field should adjust to its Celsius equivalent. Use the formula: `Celsius = (Fahrenheit - 32) * 5/9`.