acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/UnitConverter/README.md 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.
diff --git a/Domains/Frontend/MiniProjects/UnitConverter/index.html b/Domains/Frontend/MiniProjects/UnitConverter/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unit Converter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="converter-container">
+        <h1>Unit Converter</h1>
+        <div class="input-group">
+            <input type="number" id="input-value" value="1">
+            <select id="from-unit">
+                <option value="cm">Centimeters (cm)</option>
+                <option value="in">Inches (in)</option>
+                <option value="kg">Kilograms (kg)</option>
+                <option value="lb">Pounds (lb)</option>
+                <option value="c">Celsius (°C)</option>
+                <option value="f">Fahrenheit (°F)</option>
+            </select>
+        </div>
+        <div class="equals-sign">=</div>
+        <div class="input-group">
+            <input type="number" id="output-value" readonly>
+            <select id="to-unit">
+                <option value="cm">Centimeters (cm)</option>
+                <option value="in">Inches (in)</option>
+                <option value="kg">Kilograms (kg)</option>
+                <option value="lb">Pounds (lb)</option>
+                <option value="c">Celsius (°C)</option>
+                <option value="f">Fahrenheit (°F)</option>
+            </select>
+        </div>
+        <p id="error-msg" class="error"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/UnitConverter/script.js 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();
diff --git a/Domains/Frontend/MiniProjects/UnitConverter/style.css 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;
+}