Code-Along 2 - Temperature Converter

// Temperature Conversion Functions
function celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}

function fahrenheitToCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5/9;
}

function celsiusToKelvin(celsius) {
    return celsius + 273.15;
}

function kelvinToCelsius(kelvin) {
    return kelvin - 273.15;
}
                

// Temperature Converter Component
function TemperatureConverter() {
    const [temperature, setTemperature] = useState('');
    const [fromUnit, setFromUnit] = useState('celsius');
    const [toUnit, setToUnit] = useState('fahrenheit');

    const convert = () => {
        const num = parseFloat(temperature);
        if (isNaN(num)) return '';

        let celsius;
        switch (fromUnit) {
            case 'celsius':
                celsius = num;
                break;
            case 'fahrenheit':
                celsius = fahrenheitToCelsius(num);
                break;
            case 'kelvin':
                celsius = kelvinToCelsius(num);
                break;
        }

        switch (toUnit) {
            case 'celsius':
                return celsius.toFixed(2);
            case 'fahrenheit':
                return celsiusToFahrenheit(celsius).toFixed(2);
            case 'kelvin':
                return celsiusToKelvin(celsius).toFixed(2);
        }
    };

    return (
        <div>
            <label htmlFor="temperature">Temperature:</label>
            <input
                id="temperature"
                type="number"
                value={temperature}
                onChange={(e) => setTemperature(e.target.value)}
                placeholder="Enter temperature"
            />
            <label htmlFor="fromUnit">From:</label>
            <select 
                id="fromUnit" 
                value={fromUnit} 
                onChange={(e) => setFromUnit(e.target.value)}
                title="Select source unit"
            >
                <option value="celsius">Celsius</option>
                <option value="fahrenheit">Fahrenheit</option>
                <option value="kelvin">Kelvin</option>
            </select>
            <span>to</span>
            <label htmlFor="toUnit">To:</label>
            <select 
                id="toUnit" 
                value={toUnit} 
                onChange={(e) => setToUnit(e.target.value)}
                title="Select target unit"
            >
                <option value="celsius">Celsius</option>
                <option value="fahrenheit">Fahrenheit</option>
                <option value="kelvin">Kelvin</option>
            </select>
            <div>Result: {convert()}°{toUnit.charAt(0).toUpperCase() + toUnit.slice(1)}</div>
        </div>
    );
}