Homework/Homework_8/main.js

//Таблица умножения 
let multiplyTable = []
for (let i = 0; i <=10; i++) {
    multiplyTable[i] = []
    for (let j = 0; j <=10; j++) {
        multiplyTable[i][j] = i * j
    }
}

let tableContainer = document.querySelector('.multipleTable')

let table = document.createElement('table')
table.border = "1"
for (let i = 0; i < multiplyTable.length; i++) {
    let row = document.createElement('tr')

    if (i == 0) {
        let cell = document.createElement ('td')
        cell.innerHTML = '&#9959;'
        row.appendChild(cell)
    } else {
        let cell = document.createElement('td')
        cell.innerText = i
        row.appendChild(cell)
    }

    for (let j = 1; j < multiplyTable[i].length; j++) {
        if (i == 0) {
            let cell = document.createElement('td')
            cell.innerText = multiplyTable[1][j]
            row.appendChild(cell)
        } else {
            let cell = document.createElement('td')
            cell.innerText = multiplyTable[i][j]
            row.appendChild(cell)
        }
    }
    
    table.appendChild(row)
}

tableContainer.appendChild(table)

//Подсветить ячейку
let cells = document.querySelectorAll('td');
let colors = ['#FEE0FF', '#FED6BC', '#FFFADD', '#DEF7FE', '#E7ECFF', '#C3FBD8', '#FDEED9', '#F6FFF8', '#B5F2EA', '#C6D8FF']

for (let cell of cells) {
    cell.onmouseover = function () {
        cell.style.transitionDuration = '0s'
        let colorIndex = Math.floor(Math.random() * colors.length)
        cell.style.backgroundColor = colors[colorIndex]
    }
}

for (let cell of cells) {
    cell.onmouseout = function () {
        cell.style.transitionDuration = '1s'
        cell.style.backgroundColor = ''
    }
}

//Подсветить строку и столбец
// let cells = document.querySelectorAll('td');
// let rows = document.querySelectorAll('tr');

// for (let cell of cells) {
//     cell.onmouseover = function () {
//         for (let rowCell of this.parentElement.children) {
//             rowCell.style.backgroundColor = '#ccc'
//             rowCell.style.color = '#fff'
//         }

//         for (let row of rows) {
//             let columnCell = row.children[this.cellIndex];
//             columnCell.style.backgroundColor = '#ccc'
//             columnCell.style.color = '#fff'
//         }

//         cell.style.backgroundColor = '#000'
//         cell.style.color = '#fff'
//     }
// }

// for (let cell of cells) {
//     cell.onmouseout = function () {
//         cell.style.backgroundColor = ''
//         cell.style.color = ''

//         for (let rowCell of this.parentElement.children) {
//             rowCell.style.backgroundColor = ''
//             rowCell.style.color = ''
//         }

//         for (let row of rows) {
//             let columnCell = row.children[this.cellIndex];
//             columnCell.style.backgroundColor = ''
//             columnCell.style.color = ''
//         }

//     }
// }

//Calc
// let calculatorContainer = document.querySelector('.calculator')
// let result = document.createElement('div');

// calc.onclick = function () {
//     let age = ageInput.value;
//     let normalPressureMax = Math.round(102 + 0.6 * age)
//     let normalPressureMin = Math.round(63 + 0.5 * age)
//     result.innerText = `Ваше нормальное артериальное давление: ${normalPressureMax} на ${normalPressureMin}`
//     calculatorContainer.appendChild(result);
//     ageInput.value = '';
// }

//Calc Live
let calculatorContainer = document.querySelector('.calculator')
let result = document.createElement('div');
calculatorContainer.appendChild(result);

let calculate = function() {
    let age = ageInput.value;
    let normalPressureMax = Math.round(102 + 0.6 * age)
    let normalPressureMin = Math.round(63 + 0.5 * age)
    result.innerText = `Ваше нормальное артериальное давление: ${normalPressureMax} на ${normalPressureMin}`

    if (!ageInput.value) {
        result.innerText = ''
    }
}
ageInput.oninput = calculate;

let message = document.createElement('div')
message.classList.add('buttonMessage')
message.innerText = 'Отожми обратно!!!'
calculatorContainer.appendChild(message)

calc.onclick = function () {
    message.style.display = ''
    message.classList.toggle('buttonMessage')
}