// таблица умножения
let table = document.createElement('table')
table.id = 'mulTable'
for(let i = 1; i < 10; i++) {
    let tr = document.createElement('tr')
    for(let j = 1; j < 10; j++) {
        let td = document.createElement('td')
        td.style.textAlign = 'center'
        td.style.padding = '5px'
        td.style.border = '1px solid dimgrey'
        td.innerText = `${i * j}`
        tr.appendChild(td)
    }
    table.appendChild(tr)
}

document.getElementsByTagName('body')[0].appendChild(table)

// подсветить ячейку и строку и колонку
document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
    if(e.target.closest('td')) {
        for(let i of e.currentTarget.children) {
            i.children[e.target.cellIndex].style.backgroundColor = 'black'
            i.children[e.target.cellIndex].style.color = 'white'
        }
    
        e.target.closest('td').style.backgroundColor = 'yellow'
        e.target.closest('td').style.color = 'black'
        e.target.closest('tr').style.backgroundColor = 'magenta'
    }
})

document.getElementById('mulTable').addEventListener('mouseout', (e)=> { 
    if(e.target.closest('td')) {
        for(let i of e.currentTarget.children) {
            for(let j of i.children) {
                j.style.backgroundColor = 'transparent'
                j.style.color = 'black'
            }
        }
        
        e.target.closest('td').style.backgroundColor = 'transparent'
        e.target.closest('tr').style.backgroundColor = 'transparent'
    }
})

//calc
let inp1 = document.createElement('input')
let inp2 = document.createElement('input')
let res = document.createElement('input')
res.disabled = true
inp1.type = 'number'
inp2.type = 'number'
res.type = 'number'

let title = document.createElement('h2')
title.innerText = 'calc'

let plus = document.createElement('span')
plus.innerText= ' + '

let equ = document.createElement('span')
equ.innerText = ' = '

let btn = document.createElement('button')
btn.id = 'countBtn'
btn.innerText = 'Count'

document.body.appendChild(title)
document.body.appendChild(inp1)
document.body.appendChild(plus)
document.body.appendChild(inp2)
document.body.appendChild(equ)
document.body.appendChild(res)
document.body.appendChild(btn)

btn.onclick = () => {
    inp1.value || inp2.value? res.disabled = false : res.disabled = true 
    res.value = (+inp1.value) + (+inp2.value)
}

//сalc live
document.body.insertAdjacentHTML('beforeend', `
    <h3>calc live</h3>
    <div>
        <div>
            <select id="operation">
                <option value="sell">SELL</option>
                <option value="buy">BUY</option>
            </select>
            <input type="number" id="given">
            <select id="currency">
                <option value="eur">EUR</option>
                <option value="usd">USD</option>
            </select>
        </div>
        <br>
        <label><span>You get: </span><input type="number" id="result"> HRN</label>
    </div>
`)

let given = document.getElementById('given')
let operation = document.getElementById('operation')
let currency = document.getElementById('currency')
document.getElementById('result').disabled = true
    
let ratios = {
        sell: {
            usd: 0.038,
            eur: 0.033
        },
        buy: {
            usd: 0.037,
            eur: 0.032,
        }
    }

    given.addEventListener('input', calculation)
    operation.addEventListener('change', calculation)
    currency.addEventListener('change', calculation)

    function truncateFraction (number) {
        try {
            let strNum = String(number).split('.')
            if(strNum[1].length > 2) {
                strNum[1] = strNum[1].slice(0, 2)
            }
            return Number(strNum.join('.'))
        } catch (e) {
            return number
        }
    }

    function calculation() {
        operation.value === 'buy'? document.querySelector('label').children[0].innerText = 'You give: ':
                                    document.querySelector('label').children[0].innerText = 'You get: '
        if(+given.value <= 0 || given.value === '') {
            document.getElementById('result').value = ''
            document.getElementById('result').disabled = true    
        } else {
            document.getElementById('result').disabled = false
            document.getElementById('result').value = truncateFraction(given.value / ratios[operation.value][currency.value])
        }
    }