diff --git a/Domains/Frontend/MiniProjects/UnitConverter/README.md b/Domains/Frontend/MiniProjects/UnitConverter/README.md new file mode 100644 index 00000000..fe99bbef --- /dev/null +++ b/Domains/Frontend/MiniProjects/UnitConverter/README.md @@ -0,0 +1,13 @@ +# Unit Converter +**Contributor:** Aaditya-2407 + +## Description +A simple web app that converts between different units of measurement, such as length (cm/in), weight (kg/lb), and temperature (C/F). + +## Tech Stack +- HTML +- CSS +- JavaScript (Vanilla) + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/UnitConverter/index.html b/Domains/Frontend/MiniProjects/UnitConverter/index.html new file mode 100644 index 00000000..3fc01d6d --- /dev/null +++ b/Domains/Frontend/MiniProjects/UnitConverter/index.html @@ -0,0 +1,39 @@ + + + + + + Unit Converter + + + +
+

Unit Converter

+
+ + +
+
=
+
+ + +
+

+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/UnitConverter/script.js b/Domains/Frontend/MiniProjects/UnitConverter/script.js new file mode 100644 index 00000000..1b757f33 --- /dev/null +++ b/Domains/Frontend/MiniProjects/UnitConverter/script.js @@ -0,0 +1,79 @@ +const inputValue = document.getElementById('input-value'); +const fromUnit = document.getElementById('from-unit'); +const outputValue = document.getElementById('output-value'); +const toUnit = document.getElementById('to-unit'); +const errorMsg = document.getElementById('error-msg'); + +const conversionRates = { + // Length + 'cm-in': 0.393701, + 'in-cm': 2.54, + // Weight + 'kg-lb': 2.20462, + 'lb-kg': 0.453592, + // Compatibility groups + length: ['cm', 'in'], + weight: ['kg', 'lb'], + temp: ['c', 'f'], +}; + +function getCompatibilityGroup(unit) { + if (conversionRates.length.includes(unit)) return 'length'; + if (conversionRates.weight.includes(unit)) return 'weight'; + if (conversionRates.temp.includes(unit)) return 'temp'; + return null; +} + +function convertUnits() { + const from = fromUnit.value; + const to = toUnit.value; + const input = parseFloat(inputValue.value); + + const fromGroup = getCompatibilityGroup(from); + const toGroup = getCompatibilityGroup(to); + + if (fromGroup !== toGroup || !fromGroup) { + outputValue.value = ''; + errorMsg.textContent = 'Conversion not possible (Incompatible units).'; + return; + } + + errorMsg.textContent = ''; // Clear error + + if (isNaN(input)) { + outputValue.value = ''; + return; + } + + let result; + + // Handle special case: Temperature + if (fromGroup === 'temp') { + if (from === 'c' && to === 'f') { + result = (input * 9/5) + 32; + } else if (from === 'f' && to === 'c') { + result = (input - 32) * 5/9; + } else { + result = input; // c to c or f to f + } + } else { + // Handle length and weight + const conversionKey = `${from}-${to}`; + if (conversionRates[conversionKey]) { + result = input * conversionRates[conversionKey]; + } else if (from === to) { + result = input; // cm to cm or kg to kg + } + } + + outputValue.value = result.toFixed(2); +} + +// Add event listeners to all inputs +[inputValue, fromUnit, toUnit].forEach(input => { + input.addEventListener('input', convertUnits); + input.addEventListener('change', convertUnits); +}); + +// Initial conversion on load +convertUnits(); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/UnitConverter/style.css b/Domains/Frontend/MiniProjects/UnitConverter/style.css new file mode 100644 index 00000000..aa7bec3c --- /dev/null +++ b/Domains/Frontend/MiniProjects/UnitConverter/style.css @@ -0,0 +1,72 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f2f5; + margin: 0; +} + +.converter-container { + width: 90%; + max-width: 450px; + padding: 2.5rem; + background-color: #ffffff; + border-radius: 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #007aff; + margin-bottom: 2rem; +} + +.input-group { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +.input-group input, +.input-group select { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 1rem; + background-color: #f9f9f9; +} + +.input-group input:focus, +.input-group select:focus { + outline: none; + border-color: #007aff; + box-shadow: 0 0 0 3px rgba(0,122,255,0.1); +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type="number"] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; +} + +.equals-sign { + text-align: center; + font-size: 2rem; + font-weight: 600; + color: #007aff; + margin: 1rem 0; +} + +.error { + color: #ff3b30; + text-align: center; + height: 1.2em; +} \ No newline at end of file