|
@@ -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
|