|
|
@@ -0,0 +1,208 @@
|
|
|
+function runMultiplicationTable(){
|
|
|
+ const $table = document.createElement('table');
|
|
|
+ document.body.appendChild($table);
|
|
|
+
|
|
|
+ for (let k = 0; k < 11; k++) {
|
|
|
+ const $tr = document.createElement('tr');
|
|
|
+ $tr.className = 'tr';
|
|
|
+ $table.appendChild($tr);
|
|
|
+
|
|
|
+ for (let j = 0; j < 11; j++) {
|
|
|
+ const $td = document.createElement('td');
|
|
|
+ $td.className = 'td';
|
|
|
+
|
|
|
+ if(k === 0){
|
|
|
+ $td.innerText = `${(k+1)*j}`;
|
|
|
+ }else if(j === 0){
|
|
|
+ $td.innerText = `${(j+1)*k}`;
|
|
|
+ }else{
|
|
|
+ $td.innerText = `${k*j}`
|
|
|
+ }
|
|
|
+ $tr.appendChild($td);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function runHighlightCell(){
|
|
|
+ const $table = document.createElement('table');
|
|
|
+document.body.appendChild($table);
|
|
|
+
|
|
|
+for (let k = 0; k < 11; k++) {
|
|
|
+ const $tr = document.createElement('tr');
|
|
|
+ $tr.className = 'tr';
|
|
|
+ $table.appendChild($tr);
|
|
|
+
|
|
|
+ for (let j = 0; j < 11; j++) {
|
|
|
+ const $td = document.createElement('td');
|
|
|
+ $td.className = 'td';
|
|
|
+
|
|
|
+ if(k === 0){
|
|
|
+ $td.innerText = `${(k+1)*j}`;
|
|
|
+ }else if(j === 0){
|
|
|
+ $td.innerText = `${(j+1)*k}`;
|
|
|
+ }else{
|
|
|
+ $td.innerText = `${k*j}`
|
|
|
+ }
|
|
|
+ $tr.appendChild($td);
|
|
|
+
|
|
|
+ $td.onmouseover = function(event){
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = 'violet';
|
|
|
+ }
|
|
|
+
|
|
|
+ $td.onmouseout = function(event){
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+function runHighlightRowAndColumn(){
|
|
|
+ const $table = document.createElement('table');
|
|
|
+document.body.appendChild($table);
|
|
|
+
|
|
|
+for (let k = 0; k < 11; k++) {
|
|
|
+ const $tr = document.createElement('tr');
|
|
|
+ $tr.className = 'tr';
|
|
|
+ $table.appendChild($tr);
|
|
|
+
|
|
|
+ for (let j = 0; j < 11; j++) {
|
|
|
+ const $td = document.createElement('td');
|
|
|
+ $td.className = 'td';
|
|
|
+
|
|
|
+ if(k === 0){
|
|
|
+ $td.innerText = `${(k+1)*j}`;
|
|
|
+ }else if(j === 0){
|
|
|
+ $td.innerText = `${(j+1)*k}`;
|
|
|
+ }else{
|
|
|
+ $td.innerText = `${k*j}`
|
|
|
+ }
|
|
|
+ $tr.appendChild($td);
|
|
|
+
|
|
|
+ $td.onmouseover = function(event){
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = 'yellow';
|
|
|
+
|
|
|
+
|
|
|
+ document.querySelectorAll('.selected').forEach(
|
|
|
+ item => item.classList.remove('selected')
|
|
|
+ )
|
|
|
+
|
|
|
+ target.closest('tr').classList.add('selected');
|
|
|
+
|
|
|
+ target.closest('table').querySelectorAll('tr').forEach(
|
|
|
+ row => row.cells[target.cellIndex].classList.add('selected')
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ $td.onmouseout = function(event){
|
|
|
+ let target = event.target;
|
|
|
+ target.style.background = '';
|
|
|
+ document.querySelectorAll('.selected').forEach(
|
|
|
+ item => item.classList.remove('selected'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+function runCalc(){
|
|
|
+ const $wrapper = document.createElement('div');
|
|
|
+ $wrapper.className = 'wrapper';
|
|
|
+ document.body.appendChild($wrapper);
|
|
|
+
|
|
|
+ const $h1 = document.createElement('h1');
|
|
|
+ $wrapper.appendChild($h1);
|
|
|
+ $h1.textContent = 'Калькулятор';
|
|
|
+
|
|
|
+ const $input = document.createElement('input');
|
|
|
+ $input.type = 'number';
|
|
|
+ $input.id = 'input';
|
|
|
+ $input.placeholder = 'Введите число';
|
|
|
+ $wrapper.appendChild($input);
|
|
|
+
|
|
|
+ const $input1 = document.createElement('input');
|
|
|
+ $input1.type = 'number';
|
|
|
+ $input1.id = 'input1';
|
|
|
+ $input1.placeholder = 'Введите число';
|
|
|
+ $wrapper.appendChild($input1);
|
|
|
+
|
|
|
+ const $button = document.createElement('button');
|
|
|
+ $button.id = 'calc';
|
|
|
+ $button.textContent = 'Посчитать';
|
|
|
+ $wrapper.appendChild($button);
|
|
|
+
|
|
|
+ $button.onclick = () => {
|
|
|
+ alert(`Результат сложения: ${+$input.value}+${+$input1.value}=${+$input.value+(+$input1.value)}`)
|
|
|
+
|
|
|
+ const $out = document.createElement('out');
|
|
|
+ $wrapper.appendChild($out);
|
|
|
+ $out.textContent = `Результат сложения: ${+$input.value}+${+$input1.value}=${+$input.value+(+$input1.value)}`;
|
|
|
+
|
|
|
+ $input.value = '';
|
|
|
+ $input1.value = '';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function runCalcLive(){
|
|
|
+ const $wrapper = document.createElement('div');
|
|
|
+ $wrapper.className = 'wrapper';
|
|
|
+ document.body.appendChild($wrapper);
|
|
|
+
|
|
|
+ const $h1 = document.createElement('h1');
|
|
|
+ $wrapper.appendChild($h1);
|
|
|
+ $h1.textContent = 'Калькулятор';
|
|
|
+
|
|
|
+ const $input = document.createElement('input');
|
|
|
+ $input.type = 'number';
|
|
|
+ $input.id = 'input';
|
|
|
+ $input.placeholder = 'Введите число';
|
|
|
+ $wrapper.appendChild($input);
|
|
|
+
|
|
|
+ const $input1 = document.createElement('input');
|
|
|
+ $input1.type = 'number';
|
|
|
+ $input1.id = 'input1';
|
|
|
+ $input1.placeholder = 'Введите число';
|
|
|
+ $wrapper.appendChild($input1);
|
|
|
+
|
|
|
+ const $button = document.createElement('button');
|
|
|
+ $button.id = 'calc';
|
|
|
+ $button.textContent = 'Посчитать';
|
|
|
+ $wrapper.appendChild($button);
|
|
|
+ function calc(){
|
|
|
+ const $out = document.createElement('out');
|
|
|
+ $wrapper.appendChild($out);
|
|
|
+ $out.textContent = `Результат сложения: ${+$input.value}+${+$input1.value}=${+$input.value+(+$input1.value)}`;
|
|
|
+ }
|
|
|
+ $input.oninput = calc;
|
|
|
+ $input1.oninput = calc;
|
|
|
+}
|
|
|
+
|
|
|
+const tasksArray = [
|
|
|
+ ['Таблица умножения', runMultiplicationTable],
|
|
|
+ ['Подсветить ячейку', runHighlightCell],
|
|
|
+ ['Подсветить строку и столбец,', runHighlightRowAndColumn],
|
|
|
+ ['Calc', runCalc],
|
|
|
+ ['Calc Live', runCalcLive],
|
|
|
+];
|
|
|
+
|
|
|
+const $list = document.querySelector('.list');
|
|
|
+tasksArray.forEach(task => {
|
|
|
+ const [name, callback] = task;
|
|
|
+
|
|
|
+ const $div = document.createElement('div');
|
|
|
+ $div.className = 'div';
|
|
|
+
|
|
|
+ let $button = document.createElement('button');
|
|
|
+ $button.textContent = 'Запустить';
|
|
|
+ $button.className = 'button';
|
|
|
+ $button.onclick = callback;
|
|
|
+ $div.appendChild($button);
|
|
|
+
|
|
|
+ const $li = document.createElement('li');
|
|
|
+ $li.className = 'li';
|
|
|
+ $li.textContent = name;
|
|
|
+ $div.appendChild($li);
|
|
|
+ $list.appendChild($div);
|
|
|
+});
|
