hw-js-06/javascript/homework.ts

"use strict";
//DOM: ДЗ
//Таблица умножения
//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:

// const table = document.createElement('table')
// for (let i = 0; i < 10; i++){
// 	const tr = document.createElement('tr')
// 	for (let j = 1; j < 11; j++){
// 		const td = document.createElement('td')
// 			td.id = String(i) + String(j)
// 			td.dataset.col = String(i)
// 		if (j === 10) {
// 			td.textContent = String(i)
// 			tr.prepend(td)
// 			continue
// 		}
// 		td.textContent = String((i === 0 ? 1 : i) * j)
// 		tr.append(td)
// 	}
// 	table.append(tr)
// }
// document.body.append(table)

//Подсветить ячейку
//над которой находится курсор мыши. Используйте события mouseover и mouseout, 
//и style.backgroundColor для подсветки.
//Читкоды:
//в обработчик события в качестве this передается элемент, на котором событие произошло;
//Внимание: :hover это читерство :-
// let tdId;

// table.onmouseover = function (e: MouseEvent): void {
// 	const {tagName,id} = e.target
// 	const oldTd = document.getElementById(tdId)
// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
// 	if (tagName === "TD") {
// 		const td = document.getElementById(id)
// 		td.style.backgroundColor = 'green'
// 		tdId = id
// 	} //event -   это объект с информацией о событии,
//                              //передается первым параметром в обработчик события.
// }

// Подсветить строку и столбец,
	//в которой находится подсвеченная ячейка. Используйте parentElement 
	//(родительский элемент элемента DOM), и список его детей: children.
	//Читкоды:
	//в обработчик события в качестве this передается элемент, на котором событие произошло;
	//у td есть свойство cellIndex, в котором лежит номер ячейки;
	//у tr, аналогично есть свойство rowIndex - номер строки;

	

// table.onmouseover = function ({target : {cellIndex,tagName, id , dataset : {col}}}): void {
// 		this.childNodes.forEach(element => {
// 			element.childNodes.forEach(td => {
// 				if (td.cellIndex === cellIndex) {
// 					td.style.backgroundColor = 'yellow'
// 				} else if (td.dataset.col === col) {
// 					td.style.backgroundColor = 'orange'
// 				} else {
// 					td.style.backgroundColor = 'grey'
// 				}
// 	   });
// 	});
// 	if (tagName === "TD") document.getElementById(id).
// 		style.backgroundColor = 'green'
// }

//Calc
//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input 
//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
//Для запуска раcчета используйте, например < button id = "calc" > и
//Также можете создать поле ввода для результата и записывать результат в value этого поля.

const inputCalc = document.querySelector('.input')
console.log(inputCalc)
let i;
inputCalc.addEventListener('change', updateValue);

function updateValue(e) {
	i +=1
  console.log(i)
}
console.log(i)
// const calcWrapper = document.getElementsByClassName('calc')[0]
// const handleCalc = (e) => {
// 	console.log(parseFloat(inputCalc.value))
// 	console.log(inputCalc)
// 	e.preventDefault()
// }
// console.log(calcWrapper)
// calcWrapper.addEventListener('submit',handleCalc)