> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/12-unit-converter.md).

# 12 - Unit Converter

### **Description**

Create a React application that allows users to convert between different units of measurement (temperature, length, weight, etc.).

### **Algorithm**

1. Define a data structure to store conversion factors for each unit type (e.g., temperature, length, weight).
2. Initialize state variables to store the input value, input unit, and output unit.
3. Render a form to input the value and select the input and output units.
4. Define a function to perform the conversion based on the selected units and conversion factors.
5. Render the converted value.

### Classes

`UnitConverter`: A React component that manages the conversion state and renders the conversion form and result.

### Code

```javascript
import React, { useState } from 'react';

function UnitConverter() {
  const [inputValue, setInputValue] = useState('');
  const [inputUnit, setInputUnit] = useState('');
  const [outputUnit, setOutputUnit] = useState('');
  const [convertedValue, setConvertedValue] = useState('');

  const conversionFactors = {
    temperature: {
      celsius: {
        fahrenheit: (value) => value * 9/5 + 32,
        kelvin: (value) => value + 273.15,
      },
      fahrenheit: {
        celsius: (value) => (value - 32) * 5/9,
        kelvin: (value) => (value - 32) * 5/9 + 273.15,
      },
      kelvin: {
        celsius: (value) => value - 273.15,
        fahrenheit: (value) => (value - 273.15) * 9/5 + 32,
      },
    },
    length: {
      meter: {
        foot: (value) => value * 3.2808,
        inch: (value) => value * 39.3701,
      },
      foot: {
        meter: (value) => value / 3.2808,
        inch: (value) => value * 12,
      },
      inch: {
        meter: (value) => value / 39.3701,
        foot: (value) => value / 12,
      },
    },
    weight: {
      kilogram: {
        pound: (value) => value * 2.2046,
        ounce: (value) => value * 35.2739,
      },
      pound: {
        kilogram: (value) => value / 2.2046,
        ounce: (value) => value * 16,
      ounce: {
        kilogram: (value) => value / 35.2739,
        pound: (value) => value / 16,
      },
  };

  const handleConvert = () => {
    const inputUnitConversionFactor = conversionFactors[inputUnit][outputUnit];
    const convertedValue = inputUnitConversionFactor(inputValue);
    setConvertedValue(convertedValue);
  };

  return (
    <div>
      <form>
        <input
          type="number"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <select value={inputUnit} onChange={(e) => setInputUnit(e.target.value)}>
          <option value="celsius">Celsius</option>
          <option value="fahrenheit">Fahrenheit</option>
          <option value="kelvin">Kelvin</option>
        </select>
        <select value={outputUnit} onChange={(e) => setOutputUnit(e.target.value)}>
          <option value="celsius">Celsius</option>
          <option value="fahrenheit">Fahrenheit</option>
          <option value="kelvin">Kelvin</option>
        </select>
        <button onClick={handleConvert}>Convert</button>
      </form>
      <p>{convertedValue}</p>
    </div>
  );
}

export default UnitConverter;

```

### **Explanation**

The code defines a `UnitConverter` component that utilizes the `useState` hook to initialize state variables for the input value, input unit, output unit, and converted value. The component renders a form to input the value and select the input and output units. The `handleConvert` function performs the conversion based on the selected units and conversion factors. The component renders the converted value.

### Possible Future Enhancements

* Add more unit types (e.g., time, speed).
* Implement a dynamic conversion factor system.
* Allow users to add custom conversion factors.
* Integrate with a scientific calculator app.
* Display conversion history.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/12-unit-converter.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.