Code-Along 2 - Temperature Converter

Temperature Conversion Formulas

// 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;
}
                

Building the Converter Component

// Temperature Converter Component
import React, { useState } from 'react';

function TemperatureConverter() {
    const [temperature, setTemperature] = useState('');
    const [fromUnit, setFromUnit] = useState('celsius');
    const [toUnit, setToUnit] = useState('fahrenheit');
    const [result, setResult] = useState('');

    const handleTemperatureChange = (e) => {
        setTemperature(e.target.value);
    };

    const handleFromUnitChange = (e) => {
        setFromUnit(e.target.value);
    };

    const handleToUnitChange = (e) => {
        setToUnit(e.target.value);
    };

    const handleConvert = () => {
        const convertedResult = convert();
        setResult(convertedResult);
    };

    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;
            default:
                celsius = 0;
        }

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

    return (
        <div className="converter-container">
            <h2>Temperature Converter</h2>
            
            <div className="input-group">
                <label htmlFor="temperature">Temperature:</label>
                <input 
                    type="number" 
                    id="temperature" 
                    value={temperature} 
                    onChange={handleTemperatureChange} 
                    placeholder="Enter temperature"
                />
            </div>
            
            <div className="input-group">
                <label htmlFor="fromUnit">From:</label>
                <select id="fromUnit" value={fromUnit} onChange={handleFromUnitChange}>
                    <option value="celsius">Celsius (°C)</option>
                    <option value="fahrenheit">Fahrenheit (°F)</option>
                    <option value="kelvin">Kelvin (K)</option>
                </select>
            </div>
            
            <div className="input-group">
                <label htmlFor="toUnit">To:</label>
                <select id="toUnit" value={toUnit} onChange={handleToUnitChange}>
                    <option value="celsius">Celsius (°C)</option>
                    <option value="fahrenheit">Fahrenheit (°F)</option>
                    <option value="kelvin">Kelvin (K)</option>
                </select>
            </div>
            
            <button onClick={handleConvert} className="convert-button">Convert</button>
            
            {result && (
                <div className="result">
                    <h3>Result:</h3>
                    <p>
                        {temperature} {fromUnit === 'celsius' ? '°C' : fromUnit === 'fahrenheit' ? '°F' : 'K'} = 
                        {' '}{result} {toUnit === 'celsius' ? '°C' : toUnit === 'fahrenheit' ? '°F' : 'K'}
                    </p>
                </div>
            )}
        </div>
    );
}

export default TemperatureConverter;
                

Adding Styling and Validation

Let's enhance our temperature converter with some styling and validation to ensure a better user experience.

// CSS Styles for the Temperature Converter
.converter-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--section-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.input-group input, 
.input-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--container-bg);
    color: var(--text-color);
}

.convert-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}

.convert-button:hover {
    background-color: var(--secondary-color);
}

.result {
    margin-top: 20px;
    padding: 10px;
    background-color: rgba(255, 87, 34, 0.1);
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
}

.error {
    color: var(--danger-color);
    font-size: 0.9rem;
    margin-top: 5px;
}
                

Adding Input Validation

Let's improve our converter by adding validation to ensure that users enter valid numerical values.

// Enhanced handleTemperatureChange function with validation
const handleTemperatureChange = (e) => {
    const value = e.target.value;
    setTemperature(value);
    
    // Clear error when input changes
    if (error) setError('');
};

// Add state for error message
const [error, setError] = useState('');

// Enhanced handleConvert function with validation
const handleConvert = () => {
    // Validate the input before converting
    if (!temperature) {
        setError('Please enter a temperature value');
        return;
    }
    
    const num = parseFloat(temperature);
    if (isNaN(num)) {
        setError('Please enter a valid number');
        return;
    }
    
    // Additional validation for specific units
    if (fromUnit === 'kelvin' && num < 0) {
        setError('Kelvin cannot be negative');
        return;
    }
    
    // If validation passes, clear any errors and convert
    setError('');
    const convertedResult = convert();
    setResult(convertedResult);
};
                

Project: Build a Temperature Converter App

Now that we've learned the basics, let's apply what we've learned by building a complete temperature converter application.

Additional Resources