thinkswell · PBJI · Oct 16, 2023 · Oct 15, 2023 · Oct 15, 2023 · Oct 16, 2023
diff --git a/UnitConverter/vinay-s36/READme.md b/UnitConverter/vinay-s36/READme.md
@@ -0,0 +1,17 @@
+### Summary
+A unit converter is a handy utility that simplifies the process of converting values from one unit of measurement to another. It provides a user-friendly interface for individuals or professionals to make quick and accurate conversions, saving time and preventing errors.
+
+### Live Project Link- https://vinay-s36.github.io/Unit-Converter/
+
+### Screenshots
+![Screenshot 2023-10-15 172755](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/4870214f-9a9f-4349-989c-0ab82ef654f4)
+
+![Screenshot 2023-10-15 172730](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/fed41360-f38f-4aff-a5cf-45c7eebee360)
+
+![Screenshot 2023-10-15 172746](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/cc2bbf13-c6a9-41e7-860f-78f4f3744c44)
+
+![Screenshot 2023-10-15 172721](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/35156f8c-ded3-4504-b40d-2865c4e740d2)
+
+### Let me know if there are any issues 😁
+
+### Happy Coding All
diff --git a/UnitConverter/vinay-s36/icon.png b/UnitConverter/vinay-s36/icon.png
diff --git a/UnitConverter/vinay-s36/index.html b/UnitConverter/vinay-s36/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Unit Converter</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <link rel="icon" type="image/x-icon" href="icon.png" />
+  </head>
+  <body>
+    <header>
+      <h1>Unit Converter</h1>
+    </header>
+    <div class="container">
+      <form id="conversionForm">
+        <input type="number" id="valueInput" placeholder="Enter value" /><br />
+        <span>From:</span>
+        <select id="fromUnit">
+          <option>Select</option>
+          <option value="meters">Meters</option>
+          <option value="kilometers">Kilometers</option>
+          <option value="centimeters">Centimeters</option>
+          <option value="millimeters">Millimeters</option>
+          <option value="feet">Feet</option>
+          <option value="celsius">Celsius</option>
+          <option value="fahrenheit">Fahrenheit</option>
+          <option value="kelvin">Kelvin</option></select
+        ><br />
+        <span>To:</span>
+        <select id="toUnit">
+          <option>Select</option>
+          <option value="meters">Meters</option>
+          <option value="kilometers">Kilometers</option>
+          <option value="centimeters">Centimeters</option>
+          <option value="millimeters">Millimeters</option>
+          <option value="feet">Feet</option>
+          <option value="celsius">Celsius</option>
+          <option value="fahrenheit">Fahrenheit</option>
+          <option value="kelvin">Kelvin</option></select
+        ><br />
+        <button type="button" id="convertButton">Convert</button>
+      </form>
+      <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/UnitConverter/vinay-s36/script.js b/UnitConverter/vinay-s36/script.js
@@ -0,0 +1,70 @@
+function convertUnits() {
+    const input = parseFloat(document.getElementById("valueInput").value);
+    const fromUnit = document.getElementById("fromUnit").value;
+    const toUnit = document.getElementById("toUnit").value;
+    console.log(fromUnit)
+    let result = 0;
+    let key=0;
+    // Conversion factors
+    const conversionFactors = {
+        meters: {
+            feet: 3.28084,
+            kilometers: 0.001,
+            millimeters: 1000,
+            centimeters: 100,
+        },
+        feet: {
+            meters: 0.3048,
+            kilometers: 0.0003048,
+            millimeters: 304.8,
+            centimeters: 30.48,
+        },
+        kilometers: {
+            meters: 1000,
+            feet: 3280.84,
+            millimeters: 1000000,
+            centimeters: 100000,
+        },
+        millimeters: {
+            meters: 0.001,
+            feet: 0.00328084,
+            kilometers: 0.000001,
+            centimeters: 0.1,
+        },
+        centimeters: {
+            meters: 0.01,
+            feet: 0.0328084,
+            kilometers: 0.00001,
+            millimeters: 10,
+        },
+        celsius: {
+            fahrenheit: (input * 9) / 5 + 32,
+            kelvin: input + 273.15,
+        },
+        fahrenheit: {
+            celsius: ((input - 32) * 5) / 9,
+            kelvin: (((input - 32) * 5) / 9) + 273.15,
+        },
+        kelvin: {
+            celsius: input - 273.15,
+            fahrenheit: ((input - 273.15) * 9) / 5 + 32,
+        },
+    };
+
+    if (fromUnit === toUnit) {
+        result = input;
+    } else if (conversionFactors[fromUnit] && conversionFactors[fromUnit][toUnit]) {
+        result = input * conversionFactors[fromUnit][toUnit];
+    } else if (conversionFactors[toUnit] && conversionFactors[toUnit][fromUnit]) {
+        result = input / conversionFactors[toUnit][fromUnit];
+    }else{
+        key=-1
+    }
+
+    if(key==-1){
+        document.getElementById("result").innerHTML='Invalid inputs';
+    }else{
+        document.getElementById("result").innerHTML = `${input} ${fromUnit} = ${result.toFixed(2)} ${toUnit}`;
+    }
+}
+document.getElementById("convertButton").addEventListener("click", convertUnits);
diff --git a/UnitConverter/vinay-s36/style.css b/UnitConverter/vinay-s36/style.css
@@ -0,0 +1,63 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 20px;
+}
+
+h1{
+    margin: 0;
+}
+
+.container{
+    max-width: 400px;
+    height:max-content;
+    margin: 8% auto;
+    padding: 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+input,
+select,
+button {
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 10px;
+    font-size: larger;
+}
+
+button {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #555;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: larger;
+    text-align: center;
+}
+
+span{
+    font-size: larger;
+}