let afooter = document.querySelector("#afooter");
let bfooter = document.querySelector("#bfooter");
let calculeit = document.querySelector("#calculeit");
let output = document.querySelector("#output");
calculeit.addEventListener("click", function(){ calc });
function calc() {
	output.value = ((+afooter.value) + (+bfooter.value));
};
afooter.oninput = calc;
bfooter.oninput = calc;
let table = document.createElement("table");
let src = document.querySelector("script");
let td = document.getElementsByTagName("td");
let tr = document.getElementsByTagName("tr");
document.body.insertBefore(table, src);
let namb = "";
for (let i = 0; i < 10; i++){
	namb += "<tr>"
	for (let j = 0; j < 10; j++){
		if (i == 0){namb += "<td>" + j + "</td>";}
		else {namb += "<td>" + i * (j === 0 ? 1 : j) + "</td>";}
	}
	namb += "</tr>"
}
table.innerHTML = namb
for (let i = 0; i < 100; i++) {
	td[i].addEventListener("mouseover", function(){	
		for (let x = 0; x < 10; x++){td[i].parentElement.children[x].style.backgroundColor = "#98f9d2";}
		for (let y = 0; y < 100; y++){if (td[i].cellIndex === td[y].cellIndex) 
			{td[y].style.backgroundColor = "#98f9d2"
			};
		};
	});
	td[i].addEventListener("mouseout", function(){
		for (let x = 0; x < 10; x++) {td[i].parentElement.children[x].style.backgroundColor = "#b3fcde";};
		for (let y = 0; y < 100; y++) {
			if (td[i].cellIndex === td[y].cellIndex) {td[y].style.backgroundColor = "#b3fcde";};
		};
	});
};