Temperature Converter in ReactJS

In this project article, we will be creating a Temperature Convert Project application using the ReactJS library. In this application, we have used the Functional components and various hooks to manage the overall state of the application. Also, we have used different icons to increase the attractiveness of the application. In this application, the user must need the Scale value and select the desired scale.

For Example: The user can enter the value 35 (Celsius) and Convert it into Fahrenheit = 95.00 Fahrenheit. We have implemented this complete logic using the JSX in ReactJS.

Preview Image:

Prerequisites:

• ReactJS
• CSS
• JSX
• Function Components in React

Approach:

For developing this Temperature Converter application, we have initially taken the input field where the user can enter the value which will be converted to the desired scale. Along with this, we have validated the field, where the input can be accepted only in the numerical value. Then we have to take the two drop-down boxes where the user can select the conversion units. We have also validated this like, the same units should not be allowed for the conversion.

Example: (Celcius to Celcius is not allowed) We have styled the application using the CSS classes and properties. We have also used the icon to improve the UI can attractiveness of the application.

Project Structure:

Steps to create the application:

Step 1: Set up the React project using the below command in VSCode IDE.

npx create-react-app temp-converter

Step 2: Navigate to the newly created project folder by executing the below command.

cd temp-converter

Step 3: After navigating we need to install the icon package as we are using the icon to make our application more attractive. To install the package use the below command:

npm install --save font-awesome

The updated dependencies in package.json will look like this:

{
  "name": "temp-converter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "font-awesome": "^4.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.46.1",
    "react-scripts": "5.0.1",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4"
  },

Step 4: Now, in the src directory create a file as TempConverter.jsx, which will consist of the code for performing the conversion of user input into different scales

Example: Insert the below code in the App.js and TempConverter.jsx file mentioned in the above directory structure.

Javascript

//App.js

import React from 'react';
import './App.css';
import TempConvert
    from './Component/TempConvert';

function App() {
    return (
        <div className="App">
            <div className="converter-card">
                <h1 className="app-title">
                    GeeksforGeeks
                </h1>
                <h3 className="converter-title">
                    Temperature Converter
                </h3>
                <TempConvert />
            </div>
        </div>
    );
}

export default App;

Javascript

import React, { useState } from "react";

function TempConvert() {
    const [temp, setTemp] = useState("");
    const [scale, setScale] = useState("celsius");
    const [toScale, setToScale] = useState("fahrenheit");
    const [error, setError] = useState("");

    const celToFah = (inputCel) => {
        return (inputCel * 9) / 5 + 32;
    };

    const FahToCel = (inputFah) => {
        return ((inputFah - 32) * 5) / 9;
    };

    const celToKel = (inputCel) => {
        return inputCel + 273.15;
    };

    const kelToCel = (inputKel) => {
        return inputKel - 273.15;
    };

    const convertTemp = (val, fromScale, toScale) => {
        if (fromScale === toScale) {
            return val;
        } else if (fromScale === "celsius"
            && toScale === "fahrenheit") {
            return celToFah(val);
        } else if (fromScale === "fahrenheit"
            && toScale === "celsius") {
            return FahToCel(val);
        } else if (fromScale === "celsius"
            && toScale === "kelvin") {
            return celToKel(val);
        } else if (fromScale === "kelvin"
            && toScale === "celsius") {
            return kelToCel(val);
        } else if (fromScale === "kelvin"
            && toScale === "fahrenheit") {
            // Convert Kelvin to Celsius first,
            // then Celsius to Fahrenheit
            const celsiusValue = kelToCel(val);
            return celToFah(celsiusValue);
        } else if (fromScale === "fahrenheit"
            && toScale === "kelvin") {
            // Convert Fahrenheit to Celsius
            // first, then Celsius to Kelvin
            const celsiusValue = FahToCel(val);
            return celToKel(celsiusValue);
        }
        return val;
    };

    const tempChangeFunction = (event) => {
        const input = event.target.value;
        setTemp(input);
        if (!/^-?\d*\.?\d*$/.test(input)) {
            setError(`Hey Geek! Enter a
                valid numeric temperature.`);
        } else {
            setError("");
        }
    };

    const scaleChangeFunction = (event) => {
        const selectedScale = event.target.value;
        setScale(selectedScale);
        if (selectedScale === toScale) {
            setError(`Hey Geek! Conversion between
                the same scale is not allowed.`);
        } else {
            setError("");
        }
    };

    const toScaleChangeFunction = (event) => {
        const selectedToScale = event.target.value;
        setToScale(selectedToScale);
        if (selectedToScale === scale) {
            setError(`Hey Geek! Conversion between
                the same scale is not allowed.`);
        } else {
            setError("");
        }
    };

    const result = convertTemp(Number(temp), scale, toScale);

    return (
        <div className="converter">
            <div className="input-group">
                <input
                    type="text"
                    className="form-control"
                    placeholder={`Enter ${scale}`}
                    value={temp}
                    // Use onChange instead of onInput
                    onChange={tempChangeFunction}
                />
                <select
                    className="form-select"
                    value={scale}
                    onChange={scaleChangeFunction}
                >
                    <option value="celsius">Celsius</option>
                    <option value="fahrenheit">Fahrenheit</option>
                    <option value="kelvin">Kelvin</option>
                </select>
                <span className="arrow">➡</span>
                <select
                    className="form-select"
                    value={toScale}
                    onChange={toScaleChangeFunction}
                >
                    <option value="celsius">Celsius</option>
                    <option value="fahrenheit">Fahrenheit</option>
                    <option value="kelvin">Kelvin</option>
                </select>
            </div>
            {error ? (
                <p className="error-text">
                    <i className="fa fa-exclamation-circle" />
                    {error}
                </p>
            ) : (
                <p className="result-text">
                    {result !== null ? (
                        <>
                            <i className="fa fa-thermometer-half" />
                            {temp}{" "}
                            {scale === "celsius"
                                ? "Celsius"
                                : scale === "fahrenheit"
                                    ? "Fahrenheit"
                                    : "Kelvin"}
                            = {result.toFixed(2)}{" "}
                            {toScale === "celsius"
                                ? "Celsius"
                                : toScale === "fahrenheit"
                                    ? "Fahrenheit"
                                    : "Kelvin"}
                            .
                        </>
                    ):(
                        "Hey Geek! Select different units to convert."
                    )}
                </p>
            )}
        </div>
    );
}

export default TempConvert;

CSS

/* App.css */
body {
    background-color: #9ca9d6;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.converter-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    text-align: center;
    width: 400px;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
    position: relative;
}

.converter-card:hover {
    transform: scale(1.03);
}

.app-title {
    font-size: 28px;
    color: #4caf50;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 80%;
    margin: 0 auto;
    padding: 10px 0;
}

.converter-title {
    font-size: 24px;
    color: #e91e63;
    margin-bottom: 30px;
}

.converter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.input-group {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-control {
    width: 85%;
    margin-bottom: 10px;
    padding: 12px;
    border: none;
    border-bottom: 2px solid #e91e63;
    background-color: rgba(255, 255, 255, 0.9);
    color: #e91e63;
    font-weight: bold;
    border-radius: 5px;
    transition: border-color 0.3s, color 0.3s, background-color 0.3s;
    text-align: center;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-right: 40px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.form-control:focus {
    border-color: #ff6600;
    color: #ff6600;
    outline: none;
    background-color: #fff;
}

.form-select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e91e63;
    background-color: rgba(233, 242, 197, 0.9);
    color: #e91e63;
    font-weight: bold;
    border-radius: 5px;
    transition: border-color 0.3s, color 0.3s, background-color 0.3s;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-right: 40px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-select:focus {
    border-color: #ff6600;
    color: #ff6600;
    outline: none;
    background-color: #fff;
}

.form-select::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

.result {
    position: absolute;
    bottom: -45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 15px;
    border: 2px solid #e91e63;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    color: #e91e63;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    transition: border-color 0.3s;
}

@media (max-width: 576px) {
    .converter-card {
        padding: 10px;
    }

    .app-title {
        font-size: 26px;
    }

    .converter-title {
        font-size: 22px;
    }
}

Steps to run the application:

1. Run the application by executing the following command in the terminal.

npm start
or
npm run start

2. Open a web browser like Chrome or Firefox and type the following URL in the address bar.

http://localhost:3000/

Output:

Output