Create a Length Converter App using React JS

In this article, we will create a length converter application using React JS. This application enables effortle­ss conversion of lengths betwe­en diverse units such as ce­ntimeters, inches, fe­et, meters, and more­. It provides a simple and user-friendly interface for entering a value, selecting the input and output units, and instantly seeing the converted length.

Preview of Final Output: Let us have a look at how the final output will look like.

Prerequisites:

• React
• CSS
• Functional Components in React
• React Hooks

Approach:

In this approach, we will use the React hooks, particularly useState­, for efficient state manage­ment of the application as it allows for the initialization of state variables, such as inputValue­, fromUnit, toUnit, and result, with their respe­ctive default values. By e­mploying useState, deve­lopers can seamlessly handle­ and update. The app also contains the obje­ct named “conversionFactors” that has conversion factors for diffe­rent length units. This object e­nables the convenie­nt and accurate conversion of lengths.

Finally, the conve­rt function performs calculations to determine­ the converted le­ngth based on the chosen input and output units. It the­n updates the result state­ variable with the newly conve­rted value.

Steps to Create the project:

Step 1: Create a react application by using this command

npx create-react-app LengthConverter

Step 2: After creating your project folder, i.e. LengthConverter, use the following command to navigate to it:

cd  LengthConverter

Project Structure:

The updated dependencies in package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Write the below code in App.js file and App.css in the src directory

• App.js: This component of our app contains all the logic
• App.css: This file contains the styling of our project

Javascript

import React, { useState } from "react";
import "./App.css";
function App() {
    const [inputValue, setInputValue] = useState(0);
    const [fromUnit, setFromUnit] = useState("cm");
    const [toUnit, setToUnit] = useState("inch");
    const [result, setResult] = useState(0);

    const conversionFactors = {
        cm: {
            inch: 1 / 2.54,
            feet: 1 / 30.48,
            meter: 1 / 100,
            yard: 1 / 91.44,
            mile: 1 / 160934.4,
            kilometer: 1 / 100000,
            micrometer: 1e4,
            nanometer: 1e7,
            millimeter: 10,
            nauticalMile: 1 / 1852,
            exameter: 1e-17,
            petameter: 1e-14,
            terameter: 1e-11,
        },
        inch: {
            cm: 2.54,
            feet: 1 / 12,
            meter: 0.0254,
            yard: 1 / 36,
            mile: 1 / 63360,
            kilometer: 0.0000254,
            micrometer: 25400,
            nanometer: 25400000,
            millimeter: 25.4,
            nauticalMile: 1 / 72913.4,
            exameter: 1e-16,
            petameter: 1e-13,
            terameter: 1e-10,
        },
        feet: {
            cm: 30.48,
            inch: 12,
            meter: 0.3048,
            yard: 1 / 3,
            mile: 1 / 5280,
            kilometer: 0.0003048,
            micrometer: 304800,
            nanometer: 304800000,
            millimeter: 304.8,
            nauticalMile: 1 / 6076.12,
            exameter: 1e-15,
            petameter: 1e-12,
            terameter: 1e-9,
        },
        meter: {
            cm: 100,
            inch: 39.3701,
            feet: 3.28084,
            yard: 1.09361,
            mile: 1 / 1609.34,
            kilometer: 0.001,
            micrometer: 1e6,
            nanometer: 1e9,
            millimeter: 1000,
            nauticalMile: 1 / 1852,
            exameter: 1e-18,
            petameter: 1e-15,
            terameter: 1e-12,
        },
        yard: {
            cm: 91.44,
            inch: 36,
            feet: 3,
            meter: 0.9144,
            mile: 1 / 1760,
            kilometer: 0.0009144,
            micrometer: 914400,
            nanometer: 914400000,
            millimeter: 914.4,
            nauticalMile: 1 / 2025.37,
            exameter: 1e-17,
            petameter: 1e-14,
            terameter: 1e-11,
        },
        mile: {
            cm: 160934.4,
            inch: 63360,
            feet: 5280,
            meter: 1609.34,
            yard: 1760,
            kilometer: 1.60934,
            micrometer: 1.60934e9,
            nanometer: 1.60934e12,
            millimeter: 1.60934e6,
            nauticalMile: 1 / 1.15078,
            exameter: 1e-15,
            petameter: 1e-12,
            terameter: 1e-9,
        },
        kilometer: {
            cm: 1e5,
            inch: 39370.1,
            feet: 3280.84,
            meter: 1000,
            yard: 1093.61,
            mile: 0.621371,
            micrometer: 1e9,
            nanometer: 1e12,
            millimeter: 1e6,
            nauticalMile: 0.539957,
            exameter: 1e-16,
            petameter: 1e-13,
            terameter: 1e-10,
        },
        micrometer: {
            cm: 1e-4,
            inch: 3.937e-5,
            feet: 3.2808e-6,
            meter: 1e-6,
            yard: 1.0936e-6,
            mile: 6.2137e-10,
            kilometer: 1e-9,
            nanometer: 1000,
            millimeter: 0.001,
            nauticalMile: 5.3996e-10,
            exameter: 1e-23,
            petameter: 1e-20,
            terameter: 1e-17,
        },
        nanometer: {
            cm: 1e-7,
            inch: 3.937e-8,
            feet: 3.2808e-9,
            meter: 1e-9,
            yard: 1.0936e-9,
            mile: 6.2137e-13,
            kilometer: 1e-12,
            micrometer: 1e-6,
            millimeter: 1e-6,
            nauticalMile: 5.3996e-13,
            exameter: 1e-26,
            petameter: 1e-23,
            terameter: 1e-20,
        },
        millimeter: {
            cm: 0.1,
            inch: 0.03937,
            feet: 0.003281,
            meter: 0.001,
            yard: 0.0010936,
            mile: 6.2137e-7,
            kilometer: 1e-6,
            micrometer: 1000,
            nanometer: 1e6,
            nauticalMile: 5.3996e-7,
            exameter: 1e-20,
            petameter: 1e-17,
            terameter: 1e-14,
        },
        nauticalMile: {
            cm: 185200,
            inch: 72913.4,
            feet: 6076.12,
            meter: 1852,
            yard: 2025.37,
            mile: 1.15078,
            kilometer: 1.852,
            micrometer: 1.852e8,
            nanometer: 1.852e11,
            millimeter: 1.852e5,
            exameter: 5.3996e-17,
            petameter: 5.3996e-14,
            terameter: 5.3996e-11,
        },
        exameter: {
            cm: 1e17,
            inch: 3.937e16,
            feet: 3.2808e16,
            meter: 1e16,
            yard: 1.0936e16,
            mile: 6.2137e12,
            kilometer: 1e15,
            micrometer: 1e23,
            nanometer: 1e26,
            millimeter: 1e20,
            nauticalMile: 5.3996e17,
            petameter: 1e3,
            terameter: 1e6,
        },
        petameter: {
            cm: 1e14,
            inch: 3.937e13,
            feet: 3.2808e13,
            meter: 1e13,
            yard: 1.0936e13,
            mile: 6.2137e9,
            kilometer: 1e12,
            micrometer: 1e20,
            nanometer: 1e23,
            millimeter: 1e17,
            nauticalMile: 5.3996e14,
            exameter: 1e-3,
            terameter: 1e3,
        },
        terameter: {
            cm: 1e11,
            inch: 3.937e10,
            feet: 3.2808e10,
            meter: 1e10,
            yard: 1.0936e10,
            mile: 6.2137e6,
            kilometer: 1e9,
            micrometer: 1e17,
            nanometer: 1e20,
            millimeter: 1e14,
            nauticalMile: 5.3996e11,
            exameter: 1e-6,
            petameter: 1e-3,
        },
    };

    const convert = () => {
        const convertedResult =
            inputValue * conversionFactors[fromUnit][toUnit];
        setResult(convertedResult.toFixed(4));
    };

    return (
        <div className="container">
            <h1>Length Converter</h1>
            <input
                type="number"
                value={inputValue}
                onChange={(e) => setInputValue(parseFloat(e.target.value))}
                placeholder="Enter value"
                className="input-field"
            />
            <select
                className="unit-selectors"
                value={fromUnit}
                onChange={(e) => setFromUnit(e.target.value)}
            >
                {Object.keys(conversionFactors).map((unit) => (
                    <option key={unit} value={unit}>
                        {unit}
                    </option>
                ))}
            </select>
            <select
                className="unit-selectors"
                value={toUnit}
                onChange={(e) => setToUnit(e.target.value)}
            >
                {Object.keys(conversionFactors[fromUnit]).map((unit) => (
                    <option key={unit} value={unit}>
                        {unit}
                    </option>
                ))}
            </select>
            <p id="result">{result}</p>
            <button onClick={convert} className="convert-button">
                Convert
            </button>
        </div>
    );
}

export default App;

CSS

body {
  background: #eee;
}
.container {
  max-width: 600px;
  margin: 30px auto;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.container h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #0074cc;
}

.input-field {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.unit-selectors {
  flex: 1;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  margin: 10px;
}

#result {
  font-size: 20px;
  margin-top: 20px;
  color: crimson;
}

.convert-button {
  background-color: #0074cc;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.convert-button:hover {
  background-color: #0056a4;
}

To run the Application:

Run the following command in the terminal and visit the given URL to see the output: http://localhost:3000/

npm start

Output: