homework/HW7 DOM/script.js

// 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);
}