Roman456
/
js07_Romanenko


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            border: 1px solid grey;
            width: 20px;
            height: 20px;
            text-align: center;
        }

        /* td:hover{
            background-color: hotpink;
        } */
    </style>
</head>

<body>

    <h2>Таблица умножения</h2>
    <input type="text" id='inputrows' placeholder="Введите количество строк">
    <input type="text" id='inputcolumns' placeholder="Введите количество столбцов">
    <button id="button">Расчитать</button>
    <div id='div'></div>

    <h2>Calc</h2>
    <input type="text" id="power" placeholder="Enter power of 1 lamp--W">
    <input type="text" id="numeric" placeholder="Enter number of lamps--part/parts">
    <input type="text" id="hours" placeholder="Enter the working lamp`s hours--hour/hours">
    <button id="calc">Calculate</button>
    <div id="data"></div>

    <script>

        // Таблица умножения && Подсветить ячейку  && Подсветить строку и столбец,
        var rows = document.getElementById('inputrows')
        var colums = document.getElementById('inputcolumns')
        var button = document.getElementById('button')
        var div = document.getElementById('div')

        button.onclick = function () {
            rows.value = +rows.value
            colums.value = +colums.value

            var table = document.createElement('table');
            div.appendChild(table);

            for (let i = 1; i <= rows.value; i++) {
                var tr = document.createElement('tr');
                table.appendChild(tr);


                for (let j = 1; j <= colums.value; j++) {
                    var td = document.createElement('td');
                    tr.appendChild(td);
                    var val = i * j;
                    td.innerText = val

                    //Подсветить ячейку
                    // td.onmouseover = function (event) {
                    //     this.style.backgroundColor = 'red'
                    // }
                    // td.onmouseout = function (event) {
                    //     this.style.backgroundColor = 'yellow'
                    // }

                    //Подсветить строку и столбец,
                    td.onmouseover = function (event) {
                        //console.log(this, event) //event -   это объект с информацией о событии,
                        //передается первым параметром в обработчик события;в обработчик события в качестве
                        //this передается элемент, на котором событие произошло;
                        this.parentElement.style.backgroundColor = 'pink'
                        var x = this.cellIndex
                        var rows = document.querySelectorAll('tr')
                        rows.forEach((item) => item.children[x].style.backgroundColor = 'pink')
                        this.style.backgroundColor = 'red'
                    }
                    td.onmouseout = function (event) {
                        this.parentElement.style.backgroundColor = ''
                        var x = this.cellIndex
                        var rows = document.querySelectorAll('tr')
                        rows.forEach((item) => item.children[x].style.backgroundColor = '')
                        this.style.backgroundColor = ''
                    }
                }
            }
        }


        //Calc && Calc Live
        var Power = document.getElementById('power')
        var Numeric = document.getElementById('numeric')
        var Hours = document.getElementById('hours')
        var Calc = document.getElementById('calc')
        var Data = document.getElementById('data')
            // do{
             //    alert('Fill the fields of input')
             //}
            //while (Power.value !=='' && Numeric.value !=='' && Hours.value !=='') {
            //if(Power.value ==true && Numeric.value == true && Hours.value == true){
            //     //if(true){
                function calc() {
                var Result = ((+Power.value) * (+Numeric.value) * (+Hours.value)) / 1000
                Data.innerHTML += `<p style="background-color: rgb(146, 228, 231); border-radius: 10px; padding: 15px">
                    Power of lamp/lamps: ${Power.value}; </br> Number of lamp/lamps: ${Numeric.value}; </br>
                    Working hours of lamp/lamps:  ${Hours.value}; </br> Result calculates in kilo-Watts: ${Result}</p>`
                //alert('Result calculates in kilo-Watts: ' + Result)
            }
                   Power.oninput = calc
                    Numeric.oninput = calc
                    Hours.oninput = calc
                    // }else{
                    //     alert('Fill the fields of input')
                    // }
    </script>
</body>

</html>