VadymShakhmatenko
/
homework


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!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>
    <main class="main">
        <div class="wrapper">
            <input type="number" id ='firstNum'> *
            <input type="number" id = 'secondNum'>
            <button id = 'calc'>Посчитать</button>
            Результат<input type="text" value=" " id = "result">
        </div>
    </main>
        
<script>

    //Таблица умножения
        const table = document.createElement("table")
        for (let i = 1;i<= 9;i++){
                var row = document.createElement('tr');
                row.style.padding = '0px'
            for (let j = 1; j <= 9;j++){
                var cell = document.createElement('td')
                cell.appendChild(document.createTextNode(i*j))
                cell.style.border = '1px solid black'
                cell.style.padding = '10px'
                cell.style.margin = '0px'
                row.appendChild(cell);
            }
            table.appendChild(row);
        }
        document.body.appendChild(table)

    //Подсветить ячейку ++ Подсветить строку и столбец,
    const light = (event, color) => {
          const target = event.target;
          if (target.tagName === 'TD') {
            target.style.background = color;
            target.parentElement.style.background = color;
            const index = event.srcElement.cellIndex;
            const rows = document.querySelectorAll('tr');
            rows.forEach((row) => row.children[index].style.background = color);
          }
        }
          table.onmouseover = (event) => light(event, 'silver');
          table.onmouseout = (event) => light(event, '');  

    //Calc
        const numberOne = document.getElementById('firstNum')
        const numberSecond = document.getElementById('secondNum')

    calc.onclick = (result) =>  document.getElementById('result')
    
    //Calc Live
    calc = () => result.value = ((+numberOne.value) * (+numberSecond.value)) 
    
        numberOne.oninput = calc
        numberSecond.oninput = calc
        
</script>
    
</body>
</html>