12 - Unit Converter

Description

Create a React component that allows users to convert between different units of measurement (e.g., Celsius to Fahrenheit, meters to feet).

• Provide input fields for the original value and the desired unit type.

• Display the converted value in a clear and readable format.

• Offer a selection of conversion categories (e.g., temperature, length, weight).

• Include multiple units within each category for flexibility.

Algorithm

1. Create a React component with state to manage input values, selected units, and conversion result.

2. Implement functions to handle user input changes and trigger conversions.

3. Define conversion formulas for different unit pairs within each category.

4. Render the input fields, unit selection options, and the converted result using HTML elements and CSS styling.

Code

import React, { useState } from 'react';

const UnitConverter = () => {
  const [inputValue, setInputValue] = useState(''); // User input value
  const [fromUnit, setFromUnit] = useState('celsius'); // Unit to convert from
  const [toUnit, setToUnit] = useState('fahrenheit'); // Unit to convert to
  const [convertedValue, setConvertedValue] = useState(''); // Calculated result

  const convert = () => {
    // Implement your conversion logic here based on selected units and input value.
    // You can use switch statements, conditional expressions, or helper functions.
    // For example, converting Celsius to Fahrenheit:
    if (fromUnit === 'celsius' && toUnit === 'fahrenheit') {
      setConvertedValue((parseFloat(inputValue) * 9/5) + 32);
    }

    // Add code for other conversions within different categories and unit pairs

  };

  return (
    <div className="unit-converter">
      <h3>Convert Units</h3>
      <input
        type="number"
        placeholder="Enter Value"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <select value={fromUnit} onChange={(e) => setFromUnit(e.target.value)}>
        <option value="celsius">Celsius (°C)</option>
        <option value="fahrenheit">Fahrenheit (°F)</option>
        {/* Add more units for temperature and other categories */}
      </select>
      <span>to</span>
      <select value={toUnit} onChange={(e) => setToUnit(e.target.value)}>
        <option value="fahrenheit">Fahrenheit (°F)</option>
        <option value="celsius">Celsius (°C)</option>
        {/* Add more units for temperature and other categories */}
      </select>
      <button onClick={convert}>Convert</button>
      {convertedValue !== '' && <p>Converted Value: {convertedValue}</p>}
    </div>
  );
};

export default UnitConverter;

Explanation

• This component uses useState hooks to manage user input, selected units, and the converted value.

• The convert function handles user input and triggers the conversion logic based on the chosen units.

• You'll need to implement conversion formulas for different unit pairs within each category (e.g., temperature, length, weight).

• The component renders input fields, unit selection options, a convert button, and displays the calculated result.

Additional Notes

• Adding more unit categories and units within each category.

• Implementing conversion logic for additional functionalities like volume, area, speed, etc.

• Using mathematical library functions or third-party modules for complex calculations.

• Providing more user-friendly features like unit abbreviations, decimal precision options, and error handling.

• Implementing a history feature to track past conversions.