|
|
@@ -0,0 +1,86 @@
|
|
|
+// Task 1 Таблица умножения
|
|
|
+
|
|
|
+const wrapper = document.querySelector(".wrapper");
|
|
|
+const table = document.createElement("table");
|
|
|
+wrapper.appendChild(table);
|
|
|
+
|
|
|
+for (let i=0; i<10; i++){
|
|
|
+ const line = document.createElement("tr");
|
|
|
+ table.appendChild(line);
|
|
|
+
|
|
|
+ for(let j=0; j<10; j++){
|
|
|
+ const cell = document.createElement("td");
|
|
|
+ cell.innerText = `${i*j}`;
|
|
|
+ line.appendChild(cell);
|
|
|
+ if(i==0){
|
|
|
+ cell.innerText= `${j}`;
|
|
|
+ }else
|
|
|
+ if (j==0){
|
|
|
+ cell.innerText= `${i}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// Task 2 Подсветить ячейку
|
|
|
+// +
|
|
|
+// Task 3 Подсветить строку и столбец
|
|
|
+
|
|
|
+const tdList = document.querySelectorAll("td");
|
|
|
+
|
|
|
+tdList.forEach((el)=>{
|
|
|
+ el.addEventListener("mouseover",changeColor);
|
|
|
+ el.addEventListener("mouseout",changeColor);
|
|
|
+});
|
|
|
+
|
|
|
+function changeColor(){
|
|
|
+ // подсветить ячейку
|
|
|
+ // this.style.backgroundColor = this.style.backgroundColor ? "" : "green";
|
|
|
+
|
|
|
+ console.log(this.parentElement.rowIndex);
|
|
|
+ feelColor(this.parentElement.rowIndex, this.cellIndex)
|
|
|
+}
|
|
|
+function feelColor(trIndex, tdIndex){
|
|
|
+ const trArr = document.querySelectorAll("tr");
|
|
|
+ trArr[trIndex].style.backgroundColor = trArr[trIndex].style.backgroundColor ? "" : "pink";
|
|
|
+ for(let i=0; i<trArr.length; i++){
|
|
|
+ const tdArr = trArr[i].querySelectorAll("td");
|
|
|
+ tdArr[tdIndex].style.backgroundColor = tdArr[tdIndex].style.backgroundColor ? "" : "pink";
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// Task Calc
|
|
|
+
|
|
|
+const height = document.getElementById("input1");
|
|
|
+let sex = document.getElementsByName("sex");
|
|
|
+const calcBtn = document.getElementById("btnResult");
|
|
|
+const result = document.getElementById("result")
|
|
|
+
|
|
|
+calcBtn.addEventListener("click",checkBoxHandler);
|
|
|
+
|
|
|
+function checkBoxHandler(){
|
|
|
+ let factor = 0;
|
|
|
+
|
|
|
+ for (let i=0; i<sex.length; i++){
|
|
|
+ factor = sex[0].checked ? 90 : 110;
|
|
|
+ }
|
|
|
+ result.innerText = `Ваша норма веса ${Number(height.value)-factor} кг`
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// Task Calc Live
|
|
|
+const km = document.getElementById("km");
|
|
|
+const mile = document.getElementById("mile");
|
|
|
+km.addEventListener("input", convertKm);
|
|
|
+mile.addEventListener("input", convertMile);
|
|
|
+
|
|
|
+function convertKm(){
|
|
|
+ mile.value = (Number(km.value) / 1.609).toFixed(2);
|
|
|
+
|
|
|
+}
|
|
|
+function convertMile(){
|
|
|
+ km.value = (Number(mile.value) * 1.609).toFixed(2);
|
|
|
+}
|
