// DOM constants
const input = document.getElementById("input")
const buttonEl = document.getElementById("button-el")
const hkdEl = document.getElementById("hkd-el")
const audEl = document.getElementById("aud-el")
const myrEl = document.getElementById("myr-el")

// Convert function
buttonEl.addEventListener("click", function(event) {
    event.preventDefault() //prevents the form from submitting itself
    const inputValue = input.valueAsNumber // using .value returns a string (we will then need Number() to convert to a number), whereas using .valueAsNumber reurns a number
    
    //Currency values as of 18/11/22
    const euroToHkd = (inputValue * 8.1249329).toFixed(3)
    const euroToAud = (inputValue * 1.5439439).toFixed(3)
    const euroToMyr = (inputValue * 4.7195319 ).toFixed(3)

    const hkdToEur =  (inputValue * 0.123317).toFixed(3)
    const audToEur =  (inputValue * 0.648022).toFixed(3)
    const myrToEur =  (inputValue * 0.211845).toFixed(3)
    
    hkdEl.innerHTML = `
        <span class="currency-color">${inputValue}</span> EUR = <span class="currency-color">${euroToHkd}</span> HKD <br>
        ---<br>
        <span class="currency-color">${inputValue}</span> HKD = <span class="currency-color">${hkdToEur}</span> EUR
        `
    audEl.innerHTML = `
        <span class="currency-color">${inputValue}</span> EUR = <span class="currency-color">${euroToAud}</span> AUD <br>
        ---<br>
        <span class="currency-color">${inputValue}</span> AUD = <span class="currency-color">${audToEur}</span> EUR
        `
    myrEl.innerHTML = `
        <span class="currency-color">${inputValue}</span> EUR = <span class="currency-color">${euroToMyr}</span> MYR <br>
        ---<br>
        <span class="currency-color">${inputValue}</span> MYR = <span class="currency-color">${myrToEur}</span> EUR
        `
})