Implementing Temperature Converter Step-by-Step

// src/components/TemperatureConverter.js
import React, { useState } from 'react';

function TemperatureConverter() {
  // State variables for input temperature, units, result, and error message
  const [tempVal, setTempVal] = useState("");           // input temperature value as string
  const [fromUnit, setFromUnit] = useState("Celsius");   // default from-unit
  const [toUnit, setToUnit] = useState("Fahrenheit");    // default to-unit
  const [result, setResult] = useState(null);            // result of conversion (null means no result yet)
  const [error, setError] = useState("");                // error message, if any

  // Handler for input field change
  const handleTempChange = (e) => {
    setTempVal(e.target.value);
  };

  // Handler for changing the "from" unit selection
  const handleFromUnitChange = (e) => {
    setFromUnit(e.target.value);
  };

  // Handler for changing the "to" unit selection
  const handleToUnitChange = (e) => {
    setToUnit(e.target.value);
  };

  // Conversion function that calculates result when called
  const convertTemperature = () => {
    // Convert input string to number
    const value = parseFloat(tempVal);

    // Validate input: check if it's a number
    if (isNaN(value)) {
      setResult(null);
      setError("Please enter a valid numeric temperature.");
      return;
    }

    // Validate that fromUnit and toUnit are different
    if (fromUnit === toUnit) {
      setResult(null);
      setError("Please select two different units to convert.");
      return;
    }

    setError(""); // clear any previous errors

    let output; // will hold the converted value

    // Perform conversion based on units
    if (fromUnit === "Celsius" && toUnit === "Fahrenheit") {
      output = (value * 9/5) + 32;
    } else if (fromUnit === "Fahrenheit" && toUnit === "Celsius") {
      output = (value - 32) * 5/9;
    } else if (fromUnit === "Celsius" && toUnit === "Kelvin") {
      output = value + 273.15;
    } else if (fromUnit === "Kelvin" && toUnit === "Celsius") {
      output = value - 273.15;
    } else if (fromUnit === "Fahrenheit" && toUnit === "Kelvin") {
      // Fahrenheit to Kelvin: first convert to Celsius, then to Kelvin
      output = (value - 32) * 5/9 + 273.15;
    } else if (fromUnit === "Kelvin" && toUnit === "Fahrenheit") {
      // Kelvin to Fahrenheit: first convert to Celsius, then to Fahrenheit
      output = (value - 273.15) * 9/5 + 32;
    }

    // Save the result (to 2 decimal places) in state
    setResult(output.toFixed(2));
  };

  return (
    <div className="converter-container">
      {/* Input field */}
      <div className="input-group">
        <input 
          type="text" 
          className="temp-input"
          placeholder="Enter temperature"
          value={tempVal}
          onChange={handleTempChange}
        />
        <select className="unit-select" value={fromUnit} onChange={handleFromUnitChange}>
          <option value="Celsius">Celsius (°C)</option>
          <option value="Fahrenheit">Fahrenheit (°F)</option>
          <option value="Kelvin">Kelvin (K)</option>
        </select>
      </div>

      {/* Dropdown for target unit */}
      <div className="input-group">
        <select className="unit-select" value={toUnit} onChange={handleToUnitChange}>
          <option value="Celsius">Celsius (°C)</option>
          <option value="Fahrenheit">Fahrenheit (°F)</option>
          <option value="Kelvin">Kelvin (K)</option>
        </select>
      </div>

      {/* Convert button */}
      <button className="convert-button" onClick={convertTemperature}>
        Convert
      </button>

      {/* Output display */}
      <div className="output">
        {error && (
          <p className="error-message">{error}</p>
        )}
        {result !== null && !error && (
          <p className="result-message">
            {tempVal} {fromUnit} = <strong>{result} {toUnit}</strong>
          </p>
        )}
      </div>
    </div>
  );
}

export default TemperatureConverter;

// src/App.js
import React from 'react';
import './App.css';
import TemperatureConverter from './components/TemperatureConverter';

function App() {
  return (
    <div className="App">
      <h1>Temperature Converter</h1>
      <TemperatureConverter />
    </div>
  );
}

export default App;

/* src/App.css */

/* Make body full-height and center content */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;            /* a light gray-blue background */
}

/* Container for the app */
.App {
  min-height: 100vh;                   /* full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* The converter form container */
.converter-container {
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Title inside App */
.App h1 {
  color: #333;
  margin-bottom: 1rem;
}

/* Input group styling */
.input-group {
  margin: 0.5rem 0;
}

/* Temperature text input */
.temp-input {
  width: 12ch;  /* width to fit about 12 characters */
  padding: 0.5rem;
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* Dropdown selects */
.unit-select {
  padding: 0.5rem;
  font-size: 1rem;
}

/* Convert button */
.convert-button {
  margin: 1rem 0;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background-color: #4caf50;   /* green background */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.convert-button:hover {
  background-color: #45a049;   /* darker green on hover */
}

/* Output message styles */
.output {
  margin-top: 1rem;
}
.error-message {
  color: #e74c3c;   /* red for errors */
  font-weight: bold;
}
.result-message {
  color: #333;
  font-size: 1.1rem;
}