Arseniy_Yurchenko
/
HomeWork


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <form action="">
            <input id="inputOne" type="number">
            <input id="inputTwo" type="number">
            <input id="resultInput" type="number">
            <button id="calcButton">Ok</button>
        </form>
    </div>


    <script>


        // multiplication table1

        let row, cell;
        let table = document.createElement('table');
        table.setAttribute('style', "margin: auto")

        for (let i = 0; i < 10; i++) {
            row = document.createElement('tr');
            for (let j = 0; j < 10; j++) {
                cell = document.createElement('td');

                let val = i * j;
                if (val === 0) {
                    val = i || j;
                }

                cell.setAttribute('style', "border:2px; border-style:solid; border-color:#FF0000; padding:15px; backgroundColor: 'white';")
                cell.innerText = val;

                row.appendChild(cell);
            }
            table.appendChild(row);
        }
        document.body.appendChild(table);


        const changeBg = (event, color) => {
            const target = event.target;
            if (target.tagName === 'TD') {
                target.style.background = color;
                //задаем фон родительскому элементу, т.е. строке, в которой находится ячейка
                target.parentNode.style.background = color;
                //получаем индекс ячейки в строке
                const index = event.srcElement.cellIndex;
                //задаем фон всем ячейкам с таким же индексом
                const rows = document.querySelectorAll('tr');
                rows.forEach((row) => row.childNodes[index].style.background = color);
            }
        }

        table.onmouseover = (event) => changeBg(event, 'yellow');
        table.onmouseout = (event) => changeBg(event, '');


       // mine const cellElem = document.getElementsByTagName('td')

        // for (let l = 0; l < cellElem.length; l++) {
        //     cellElem[l].addEventListener('mouseover', (event) => cellElem[l].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; padding:15px; background-color: #f00000;'))
        //     cellElem[l].addEventListener('mouseout', (event) => cellElem[l].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; padding:15px; background - color: #ffffff; '))
        // }

        // const rowElem = document.getElementsByTagName('tr')

        // for (let k = 0; k < rowElem.length; k++) {
        //     rowElem[k].addEventListener('mouseover', (event) => rowElem[k].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; background-color: #ffff00;'))
        //     rowElem[k].addEventListener('mouseout', (event) => rowElem[k].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; background-color: #ffffff;'))
        // }


        //Calculator

        // const inputOne = document.getElementById('inputOne')
        // const inputTwo = document.getElementById('inputTwo')
        // const resultInput = document.getElementById('resultInput')
        // const calcButton = document.getElementById('calcButton')

        // calcButton.onclick = function () {
        //     alert(resultInput.value = (+inputOne.value) + (+inputTwo.value))

        // }


        // Another variant const table = document.createElement('table');

        // for (let i = 0; i < 10; i++) {
        //     const row = document.createElement('tr');
        //     for (let j = 0; j < 10; j++) {
        //         const col = document.createElement('td');
        //         let val = i * j;
        //         if (val === 0) {
        //             val = i || j;
        //         }
        //         col.innerHTML = val;
        //         row.appendChild(col);
        //     }
        //     table.appendChild(row);
        // }

        // document.body.appendChild(table);

        // const changeBg = (event, color) => {
        //     const target = event.target;
        //     if (target.tagName === 'TD') {
        //         target.style.background = color;
        //         //задаем фон родительскому элементу, т.е. строке, в которой находится ячейка
        //         target.parentNode.style.background = color;
        //         //получаем индекс ячейки в строке
        //         const index = event.srcElement.cellIndex;
        //         //задаем фон всем ячейкам с таким же индексом
        //         const rows = document.querySelectorAll('tr');
        //         rows.forEach((row) => row.childNodes[index].style.background = color);
        //     }
        // }

        // table.onmouseover = (event) => changeBg(event, 'pink');
        // table.onmouseout = (event) => changeBg(event, '');


    </script>
</body>

</html>