Weight succcessful

src/app/component/nav.jsx

@@ -1,5 +1,4 @@
 "use client"
-import React from "react";
 import Link from "next/link";
 
 function nav() {

src/app/globals.css

@@ -20,7 +20,7 @@ body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
       to bottom,
-      transparent,
+      transparent, 
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
@@ -35,7 +35,6 @@ body {
 }
 
 
-
 .video-background {
   position: fixed;
   right: 0;

src/app/page.jsx

@@ -1,5 +1,3 @@
-import Image from "next/image";
-import Link from "next/link";
 
 
 export default function Home() {

src/app/weight/function.js

@@ -0,0 +1,72 @@
+import units from "./unit";
+
+const test = (val,fromUnit ,toUnit)=>{
+    if(fromUnit === units.Kilogram.unit){
+        return calWeight(val, units.Kilogram, toUnit, units)
+    }
+    else if ( fromUnit === units.Gram.unit){
+        return calWeight(val, units.Gram, toUnit, units)
+    }
+    else if ( fromUnit === units.Milligram.unit ){
+        return calWeight(val, units.Milligram, toUnit, units)
+    }
+    else if ( fromUnit === units.Microgram.unit ){
+        return calWeight(val, units.Microgram, toUnit, units)
+    }
+    else if ( fromUnit === units.MetricTon.unit ){
+        return calWeight(val, units.MetricTon, toUnit, units)
+    }
+    else if ( fromUnit === units.Pound.unit ){
+        return calWeight(val, units.Pound, toUnit, units)
+    }
+    else if ( fromUnit === units.Ounce.unit ){
+        return calWeight(val, units.Ounce, toUnit, units)
+    }
+    else if ( fromUnit === units.Stone.unit ){
+        return calWeight(val, units.Stone, toUnit, units)
+    }
+    else if ( fromUnit === units.ShortTon.unit ){
+        return calWeight(val, units.ShortTon, toUnit, units)
+    }
+    else if ( fromUnit === units.LongTon.unit ){
+        return calWeight(val, units.LongTon, toUnit, units)
+    }
+}
+
+const calWeight =(val, unit, toUnit, units)=>{
+    if( toUnit === unit.unit ){
+        return val
+    }
+    else if( toUnit === units.Gram.unit){
+        return val / unit.prefix * units.Gram.prefix
+    }
+    else if( toUnit === units.Kilogram.unit){
+        return val / unit.prefix * units.Kilogram.prefix
+    }
+    else if( toUnit === units.Milligram.unit ){
+        return val / unit.prefix * units.Milligram.prefix
+    }
+    else if( toUnit === units.Microgram.unit ){
+        return val / unit.prefix * units.Microgram.prefix
+    }
+    else if( toUnit === units.MetricTon.unit ){
+        return val / unit.prefix * units.MetricTon.prefix
+    }
+    else if( toUnit === units.Pound.unit ){
+        return val / unit.prefix * units.Pound.prefix
+    }
+    else if( toUnit === units.Ounce.unit ){
+        return val / unit.prefix * units.Ounce.prefix
+    }
+    else if( toUnit === units.Stone.unit ){
+        return val / unit.prefix * units.Stone.prefix
+    }
+    else if( toUnit === units.ShortTon.unit ){
+        return val / unit.prefix * units.ShortTon.prefix
+    }
+    else if( toUnit === units.LongTon.unit ){
+        return val / unit.prefix * units.LongTon.prefix
+    }
+}
+
+export default test;

src/app/weight/page.jsx

@@ -1,85 +1,73 @@
 "use client"
-import React, { useState } from "react";
-import "./si.css"
-import conversionFactors from "./conversionFactors";
+import { useState } from "react";
+import test from "./function";
 
-function App() {
-  const [inputs, setInputs] = useState([{ id: 1, value: 0, fromUnit: "meter", toUnit: "kilometer" }]);
+export default function TestPage() {
+    const weightUnits = [
+        "Kilogram",
+        "Gram",
+        "Milligram",
+        "Microgram",
+        "Metric ton",
+        "Pound",
+        "Ounce",
+        "Stone",
+        "Short ton",
+        "Long ton"
+    ];
+    const [input, setInput] = useState(0)
+    const [fromUnit, setFromUnit] = useState("Kilogram")
+    const [toUnit, setToUnit] = useState("Kilogram")
 
-  const handleInputChange = (id, e) => {
-    const { name, value } = e.target;
-    const newInputs = inputs.map(input => input.id === id ? { ...input, [name]: value === "" ? 0 : parseFloat(value) } : input);
-    setInputs(newInputs);
-  };
-
-  const handleFromUnitChange = (id, e) => {
-    const { value } = e.target;
-    const newInputs = inputs.map(input => input.id === id ? { ...input, fromUnit: value } : input);
-    setInputs(newInputs);
-  };
-
-  const handleToUnitChange = (id, e) => {
-    const { value } = e.target;
-    const newInputs = inputs.map(input => input.id === id ? { ...input, toUnit: value } : input);
-    setInputs(newInputs);
-  };
-
-  const handleConvert = (id) => {
-    const input = inputs.find(input => input.id === id);
-    const { value, fromUnit, toUnit } = input;
-    const factor = conversionFactors[fromUnit][toUnit];
-    if (factor !== undefined) {
-      const result = value * factor;
-      const newInputs = inputs.map(input => input.id === id ? { ...input, result } : input);
-      setInputs(newInputs);
-    } else {
-      const newInputs = inputs.map(input => input.id === id ? { ...input, result: "Conversion factor not defined" } : input);
-      setInputs(newInputs);
-    }
-  };
-
-  const handleAddInput = () => {
-    if (inputs.length < 8) {
-      const newId = Math.max(...inputs.map(input => input.id)) + 1;
-      setInputs([...inputs, { id: newId, value: 0, fromUnit: "meter", toUnit: "kilometer" }]);
-    }
-  };
-
-  return (
-    <div className="App">
-      <h1>Weight Unit Converter</h1>
-      {inputs.map((input) => (
-        <div key={input.id}>
-          <input
-            type="number"
-            name="value"
-            value={input.value}
-            onChange={(e) => handleInputChange(input.id, e)}
-            placeholder="Enter value"
-          />
-          <select name="fromUnit" value={input.fromUnit} onChange={(e) => handleFromUnitChange(input.id, e)}>
-            {Object.keys(conversionFactors).map((unit) => (
-              <option key={unit} value={unit}>
-                {unit}
-              </option>
-            ))}
-          </select>
-          <select name="toUnit" value={input.toUnit} onChange={(e) => handleToUnitChange(input.id, e)}>
-            {Object.keys(conversionFactors[input.fromUnit]).map((unit) => (
-              <option key={unit} value={unit}>
-                {unit}
-              </option>
-            ))}
-          </select>
-          <button onClick={() => handleConvert(input.id)}>Convert</button>
-          <p>
-            {input.value} {input.fromUnit} is equal to {input.result} {input.toUnit}
-          </p>
+    const convertFunction = test(input, fromUnit, toUnit)
+    return (
+        <div className="">
+            <div className="ml-10">
+                <div className="flex gap-4">
+                    <div>
+                        From <br />
+                        <input
+                            type="number"
+                            onChange={(e) => setInput(e.target.value)}
+                        />
+                    </div>
+                    <div>
+                        To <br />
+                        <input type="number" value={convertFunction}/>
+                    </div>
+                </div>
+                <div>
+                    <select name="" id="" size="10" onChange={(e) => { setFromUnit(e.target.value) }}>
+                        {
+                            weightUnits.map((val, index) => {
+                                return (
+                                    <option value={val} key={index}>
+                                        {val}
+                                    </option>
+                                )
+                            })
+                        }
+                    </select>
+                    <select
+                        name=""
+                        id=""
+                        size="10"
+                        onChange={(e) => { setToUnit(e.target.value) }}
+                        className=" ml-36"
+                    >
+                        {
+                            weightUnits.map((val, index) => (
+                                <option value={val} key={index}>
+                                    {val}
+                                </option>
+                            ))
+                        }
+                    </select>
+                </div>
+                <div>
+                    <span className="text-red-500 font-semibold text-2xl">result:</span> {convertFunction} {toUnit}
+                </div>
+            </div>
         </div>
-      ))}
-      {inputs.length < 8 && <button onClick={handleAddInput}>Add Input</button>}
-    </div>
-  );
-}
-
-export default App;
+    )
+}