|
@@ -0,0 +1,130 @@
|
|
|
|
|
+//1task
|
|
|
|
|
+const table = document.createElement('table');
|
|
|
|
|
+
|
|
|
|
|
+for (let i = 0; i <= 9; i++){
|
|
|
|
|
+ let tr = document.createElement('tr');
|
|
|
|
|
+ for (let j = 0; j <= 9; j++){
|
|
|
|
|
+ let td = document.createElement('td');
|
|
|
|
|
+ td.style.border = "1px solid gray"
|
|
|
|
|
+ td.style.padding = "7px"
|
|
|
|
|
+ let val = i * j;
|
|
|
|
|
+ if (val === 0) {
|
|
|
|
|
+ val = i || j;
|
|
|
|
|
+ }
|
|
|
|
|
+ td.innerHTML = val;
|
|
|
|
|
+ tr.append(td);
|
|
|
|
|
+ }
|
|
|
|
|
+ table.append(tr);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+document.body.append(table);
|
|
|
|
|
+
|
|
|
|
|
+let tdSelect = document.querySelectorAll('td');
|
|
|
|
|
+let trSelect = document.querySelectorAll('tr');
|
|
|
|
|
+
|
|
|
|
|
+ tdSelect.forEach(function(td){
|
|
|
|
|
+ td.addEventListener('mouseover', function(event) {
|
|
|
|
|
+ let target = event.target;
|
|
|
|
|
+ target.style.backgroundColor = 'lightblue';
|
|
|
|
|
+ target.parentElement.style.backgroundColor = 'lightblue';
|
|
|
|
|
+ let index = target.cellIndex;
|
|
|
|
|
+ trSelect.forEach (tr => tr.children[index].style.backgroundColor = 'lightblue');
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ td.addEventListener('mouseout', function(event) {
|
|
|
|
|
+ let target = event.target;
|
|
|
|
|
+ target.style.backgroundColor = '';
|
|
|
|
|
+ target.parentElement.style.backgroundColor = '';
|
|
|
|
|
+ let index = target.cellIndex;
|
|
|
|
|
+ trSelect.forEach (tr => tr.children[index].style.backgroundColor = '');
|
|
|
|
|
+ })
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+//2task
|
|
|
|
|
+// const body = document.body
|
|
|
|
|
+// const form = document.createElement("form")
|
|
|
|
|
+// body.append(form)
|
|
|
|
|
+// form.style.marginTop = "30px"
|
|
|
|
|
+
|
|
|
|
|
+// let inputOil = document.createElement('input')
|
|
|
|
|
+// let inputDistance = document.createElement('input')
|
|
|
|
|
+// let inputButton = document.createElement('input')
|
|
|
|
|
+// let result = document.createElement('div')
|
|
|
|
|
+// let span = document.createElement('span')
|
|
|
|
|
+// let p = document.createElement('p')
|
|
|
|
|
+// inputOil.id = "inputOil"
|
|
|
|
|
+// inputDistance.id = "inputDistance"
|
|
|
|
|
+// inputButton.id = "calc"
|
|
|
|
|
+// form.append(inputOil)
|
|
|
|
|
+// form.append(inputDistance)
|
|
|
|
|
+// form.append(inputButton)
|
|
|
|
|
+// form.append(result)
|
|
|
|
|
+// result.append(p)
|
|
|
|
|
+// result.append(span)
|
|
|
|
|
+
|
|
|
|
|
+// inputOil.type = "number"
|
|
|
|
|
+// inputDistance.type = "number"
|
|
|
|
|
+// inputButton.type = "button"
|
|
|
|
|
+
|
|
|
|
|
+// inputOil.placeholder = "Введите количество израсходованного топлива"
|
|
|
|
|
+// inputDistance.placeholder = "Введите дистанцию , которую вы проехали"
|
|
|
|
|
+// calc.value = "Расчитать расход"
|
|
|
|
|
+// p.innerText = "Расход составляет:"
|
|
|
|
|
+
|
|
|
|
|
+// inputOil.style.width = "310px"
|
|
|
|
|
+// inputOil.style.marginRight = "10px"
|
|
|
|
|
+// inputDistance.style.width = "300px"
|
|
|
|
|
+// inputDistance.style.marginRight = "20px"
|
|
|
|
|
+// result.style.marginTop = "30px"
|
|
|
|
|
+
|
|
|
|
|
+// calc.onclick = function () {
|
|
|
|
|
+// let resultFinish = (inputOil.value/inputDistance.value) * 100 + "л. бензина на 100км";
|
|
|
|
|
+// span.style.color = "red";
|
|
|
|
|
+// span.innerHTML = resultFinish
|
|
|
|
|
+// }
|
|
|
|
|
+
|
|
|
|
|
+//3task
|
|
|
|
|
+
|
|
|
|
|
+const body = document.body
|
|
|
|
|
+const form = document.createElement("form")
|
|
|
|
|
+body.append(form)
|
|
|
|
|
+form.style.marginTop = "30px"
|
|
|
|
|
+
|
|
|
|
|
+let inputOil = document.createElement('input')
|
|
|
|
|
+let inputDistance = document.createElement('input')
|
|
|
|
|
+let result = document.createElement('input')
|
|
|
|
|
+inputOil.id = "inputOil"
|
|
|
|
|
+inputDistance.id = "inputDistance"
|
|
|
|
|
+result.id = "calc"
|
|
|
|
|
+form.append(inputOil)
|
|
|
|
|
+form.append(inputDistance)
|
|
|
|
|
+form.append(result)
|
|
|
|
|
+
|
|
|
|
|
+inputOil.type = "number"
|
|
|
|
|
+inputDistance.type = "number"
|
|
|
|
|
+result.type = "number"
|
|
|
|
|
+
|
|
|
|
|
+inputOil.placeholder = "Введите количество израсходованного топлива"
|
|
|
|
|
+inputDistance.placeholder = "Введите дистанцию , которую вы проехали"
|
|
|
|
|
+
|
|
|
|
|
+inputOil.style.width = "310px"
|
|
|
|
|
+inputOil.style.marginRight = "10px"
|
|
|
|
|
+inputDistance.style.width = "300px"
|
|
|
|
|
+inputDistance.style.marginRight = "20px"
|
|
|
|
|
+result.style.marginTop = "30px"
|
|
|
|
|
+
|
|
|
|
|
+calc.onclick = function () {
|
|
|
|
|
+ let resultFinish = (inputOil.value/inputDistance.value) * 100 + "л. бензина на 100км";
|
|
|
|
|
+ span.style.color = "red";
|
|
|
|
|
+ span.innerHTML = resultFinish
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function calc() {
|
|
|
|
|
+ result.value = (inputOil.value) / (inputDistance.value) * 100
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+inputOil.oninput = calc
|
|
|
|
|
+inputDistance.oninput = calc
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
Vadym Hlushko