homeworks/08/script.js

function multiplicationTable() {
    let table = document.createElement('table');
    table.style.fontFamily = 'sans-serif';
    let arrNum = [];
    for (let i = 1; i <= 10; i++) {
        arrNum[i] = [];
        for (let j = 1; j <= 10; j++) {
            arrNum[i][j-1] = i * j;
        }
    }
    for (let row = 1; row <= arrNum.length-1; row++) {
        let tr = document.createElement('tr');
        for (let col = 0; col < arrNum.length-1; col++) {
            let td = document.createElement('td');
            td.innerText = arrNum[row][col];
            td.onmouseout = function(event){
                this.style.backgroundColor = '';
                Array.from(this.parentElement.children).forEach(item => item.style.backgroundColor = '');
                colTable(this.cellIndex, '');
            }
            td.onmouseover = function(event){
                Array.from(this.parentElement.children).forEach(item => item.style.backgroundColor = '#aaa');
                colTable(this.cellIndex, '#aaa');
                this.style.backgroundColor = '#6d75cb';
            }
            tr.append(td);
        }
        for (let cell of tr.cells) {
            cell.style.border = '2px solid #000';
            cell.style.padding = '10px';
            cell.style.textAlign = 'center';
            cell.classList.add('td');
        }
        table.append(tr);
    }
    document.body.append(table);
    function colTable(index, str){
        for (let row of document.querySelector('table').rows) {
            row.cells[index].style.backgroundColor = str;
        }
    }
} // Таблица умножения
multiplicationTable();

function calculator() {
    const urlDefault = 'https://open.er-api.com/v6/latest/USD';

    // создание HTML елементов
    const currencyMain = document.createElement('select');
    currencyMain.id = 'currencyMain';
    currencyMain.style.cssText = 'width: 100%;padding: 10px 20px;font-size: 16px;text-align: center;';
    const currencySecond = document.createElement('select');
    currencySecond.id = 'currencySecond';
    currencySecond.style.cssText = 'width: 100%;padding: 10px 20px;font-size: 16px;text-align: center;';

    const countMain = document.createElement('input');
    countMain.id = 'countMain';
    countMain.type = 'number';
    countMain.value = '100';
    countMain.style.cssText = 'width: 100%;padding: 10px 20px;font-size: 16px;text-align: center;';
    const countSecond = document.createElement('input');
    countSecond.id = 'countSecond';
    countSecond.type = 'text';
    countSecond.style.cssText = 'width: 100%;padding: 10px 20px;font-size: 16px;text-align: center;';

    const form = document.createElement('form');
    form.action = '#';
    form.style.cssText = 'margin: 0 auto;display: flex;max-width: 800px;justify-content: center;flex-direction: column;';

    const formRow1 = document.createElement('div');
    formRow1.className = 'form__row';
    formRow1.style.cssText = 'display: flex;flex-direction: row;align-items: center;justify-content: space-between;';
    const formRow2 = document.createElement('div');
    formRow2.className = 'form__row';
    formRow2.style.cssText = 'display: flex;flex-direction: row;align-items: center;justify-content: space-between;';

    formRow1.append(countMain);
    formRow1.append(currencyMain);
    formRow2.append(countSecond);
    formRow2.append(currencySecond);

    form.append(formRow1);
    form.append(formRow2);

    document.body.append(form);

    // наполнение значениями
    let arrMain = new Map();

    function requestOption (url, currencyMain, currencySecond){
        fetch(url)
            .then(response => response.json())
            .then(data => {
                for (const prod in data.rates) {
                    let listOption = document.createElement('option');
                    listOption.textContent = prod;
                    currencyMain.appendChild(listOption);
                    currencySecond.appendChild(listOption.cloneNode(true));
                }
                currencySecond.options[Math.round(Math.random()* currencySecond.options.length)].selected = true;
            })
            .catch(er => console.error(er))
    } //отрисовка всех доступных option
    function requestValues (url, arr){
        fetch(url)
            .then(response => response.json())
            .then(data => {
                for (const prod in data.rates) {
                    arr.set(prod, data.rates[prod]);
                }
            })
            .catch(er => console.error(er))
    } // получение актуально курса по определённой валюте
    function calculate (countMain, countSecond, currencyMain, currencySecond, arrMain){
        if (currencyMain === currencySecond){
            countSecond.value = 'Выберите разные валюты';
        }
        else if(countMain <= 0){
            countSecond.value = 'Введите число больше 0';
        }
        else {
            countSecond.value = +arrMain.get(currencySecond) * +countMain;
        }
    } // конвертация валют
    function eventListener(arrMain){
        arrMain.clear();
        requestValues(`https://open.er-api.com/v6/latest/${currencyMain.value}`, arrMain);
        setTimeout(() => {
            calculate(countMain.value, countSecond, currencyMain.value, currencySecond.value, arrMain);
        },1000);
    } // функция вызова по событию

    requestOption(urlDefault, currencyMain, currencySecond);
    currencyMain.addEventListener('change', () => eventListener(arrMain));
    currencySecond.addEventListener('change', () => eventListener(arrMain));
    countMain.addEventListener('change', () => eventListener(arrMain));
} // Калькулятор
calculator();

// Для коректной работы калькулятора нужно выполнить:
// Изменить значение в поле ввода + нажать enter
// Выбрать разные валюты (USA => UAH)
// Ввести количество валюты больше 0