diff --git a/UnitConverter/vinay-s36/READme.md b/UnitConverter/vinay-s36/READme.md new file mode 100644 index 000000000..f1eb98520 --- /dev/null +++ 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 new file mode 100644 index 000000000..ecd7a8c69 Binary files /dev/null and b/UnitConverter/vinay-s36/icon.png differ diff --git a/UnitConverter/vinay-s36/index.html b/UnitConverter/vinay-s36/index.html new file mode 100644 index 000000000..6f688d672 --- /dev/null +++ b/UnitConverter/vinay-s36/index.html @@ -0,0 +1,45 @@ + + + + Unit Converter + + + + +
+

Unit Converter

+
+
+
+
+ From: +
+ To: +
+ +
+
+
+ + + diff --git a/UnitConverter/vinay-s36/script.js b/UnitConverter/vinay-s36/script.js new file mode 100644 index 000000000..df89e6dd2 --- /dev/null +++ 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 new file mode 100644 index 000000000..cdb1bee77 --- /dev/null +++ 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; +} \ No newline at end of file