Unit Converter - Code Explanation

HTML STRUCTURE

<div class="category-buttons">
    <button class="category-btn active" onclick="switchCategory('length')">Length</button>
    <button class="category-btn" onclick="switchCategory('weight')">Weight</button>
    <button class="category-btn" onclick="switchCategory('temperature')">Temperature</button>
    <button class="category-btn" onclick="switchCategory('volume')">Volume</button>
</div>

<div class="converter-box">
    <input type="number" id="inputValue" placeholder="Enter value" oninput="convert()">
    <select id="fromUnit" onchange="convert()"></select>
    <select id="toUnit" onchange="convert()"></select>
    <div class="result-value" id="result">0</div>
</div>

JAVASCRIPT CODE

const conversions = {
    length: { 
        units: ['Meter', 'Kilometer', 'Mile', 'Yard', 'Foot', 'Inch'], 
        factors: [1, 0.001, 0.000621371, 1.09361, 3.28084, 39.3701] 
    },
    weight: { 
        units: ['Kilogram', 'Gram', 'Pound', 'Ounce', 'Ton'], 
        factors: [1, 1000, 2.20462, 35.274, 0.001] 
    }
};

function switchCategory(category) {
    currentCategory = category;
    document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    populateUnits();
    convert();
}

function populateUnits() {
    const conversion = conversions[currentCategory];
    const fromUnit = document.getElementById('fromUnit');
    const toUnit = document.getElementById('toUnit');
    
    fromUnit.innerHTML = '';
    toUnit.innerHTML = '';
    
    conversion.units.forEach((unit, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = unit;
        fromUnit.appendChild(option);
    });
}

function convert() {
    const value = parseFloat(document.getElementById('inputValue').value) || 0;
    const fromIndex = parseInt(document.getElementById('fromUnit').value);
    const toIndex = parseInt(document.getElementById('toUnit').value);
    const conversion = conversions[currentCategory];
    
    const baseValue = value / conversion.factors[fromIndex];
    const result = baseValue * conversion.factors[toIndex];
    
    document.getElementById('result').textContent = result.toFixed(2);
}

KEY FEATURES

✓ Multiple Unit Categories
✓ Conversion Factors Array
✓ Real-time Conversion
✓ Category Switching
✓ Dynamic Select Options
✓ Decimal Precision (2 digits)
✓ Support for Temperature Conversion

KEY LEARNING POINTS

• Object of Objects Data Structure
• Conversion Formula: (value / fromFactor) * toFactor
• Dynamic Option Creation
• Event Delegation
• parseFloat() & parseInt()
• Array forEach Method
• querySelector & querySelectorAll

← Back to Project