In this article, we will create a length converter application using React JS. This application enables effortless conversion of lengths between diverse units such as centimeters, inches, feet, 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:
Approach:
In this approach, we will use the React hooks, particularly useState, for efficient state management of the application as it allows for the initialization of state variables, such as inputValue, fromUnit, toUnit, and result, with their respective default values. By employing useState, developers can seamlessly handle and update. The app also contains the object named “conversionFactors” that has conversion factors for different length units. This object enables the convenient and accurate conversion of lengths.
Finally, the convert function performs calculations to determine the converted length based on the chosen input and output units. It then updates the result state variable with the newly converted 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
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;
|
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 h 1 {
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.3 s;
} .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: