×
const dispType = document.getElementById('dispType');
const input = document.getElementById('input');
const miBtn = document.getElementById('mi-btn');
const kmBtn = document.getElementById('km-btn');
const enterBtn = document.getElementById('enterBtn');
const clearBtn = document.getElementById('clear-btn');
const result = document.getElementById('result');
const formula = document.getElementById('formula')
const resultTempTxt = document.getElementById('result-temp-txt');

let state = 'miles';

miBtn.addEventListener('click', () => {
    state = 'miles';
    dispType.textContent = 'Mi - Km'
    miBtn.classList.add('active');
    kmBtn.classList.remove('active');
});

kmBtn.addEventListener('click', () => {
    dispType.textContent = 'Km - Mi'
    state = 'kilometers';
    kmBtn.classList.add('active');
    miBtn.classList.remove('active');
})

enterBtn.addEventListener('click', () => {
    if(input.value === '') {
        formula.textContent = "Please enter a numeric value";
        setTimeout(() => {
            formula.textContent = "Enter a value to convert";
        }, 1500);
    }else if(state === 'miles') {
        let mi = input.value
        toKm = mi * 1.609;
        resultTempTxt.innerHTML = `${toKm.toFixed(2)}KM`;
        formula.textContent = `Formula: ${mi} x 1.609`;
    }else if (state === 'kilometers') {
        let km = input.value
        toMi = km / 1.609;
        resultTempTxt.innerHTML = `${toMi.toFixed(2)}MI`;
        formula.textContent = `Formula: ${km} / 1.609`;
    }
});

clearBtn.addEventListener('click', () => {
    state = 'miles';
    input.value = '';
    dispType.textContent = 'Mi - Km';
    resultTempTxt.textContent = `0`;
    formula.textContent = `Enter a value to convert`;
});