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

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.