hw8

08/README.md

@@ -0,0 +1,10 @@
+### **DOM: ДЗ**
+* **Таблица умножения**
+    * function multiplicationTable()
+* **Calc**
+    * function calculator()
+
+Для коректной работы калькулятора нужно выполнить:
+* Изменить значение в поле ввода + нажать enter
+* Выбрать разные валюты (USA => UAH)
+* Ввести количество валюты больше 0

08/script.js

@@ -0,0 +1,143 @@
+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