Home Explore Help
Sign In
vladislavaSim
/
homeworks
Watch 1
Star 0
Fork 0
Files Issues 14 Pull Requests 0 Wiki
Browse Source

HW 7 done

vladislavaSim 2 years ago
parent
2c05162369
commit
609e5bd0b6
2 changed files with 68 additions and 0 deletions
Unified View Show Diff Stats
  1. 20 0
      HW7/index.html
  2. 48 0
      HW7/main.js

+ 20 - 0
HW7/index.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>HW7</title>
 
+    <style>
 
+        table td {
 
+            padding: 5px;
 
+            border: 1px solid grey;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <input type="number" id="n1">
 
+    <input type="number" id="n2">
 
+    <button id="calcBtn">sum</button>
 
+    <div id="result"></div>
 
+<script src="main.js"></script>
 
+</body>
 
+</html>

+ 48 - 0
HW7/main.js
View File 

@@ -0,0 +1,48 @@
 
+let $table = document.createElement('table');
 
+
 
+for(let i = 1; i < 10; i++) {
 
+    let $tr = document.createElement('tr')
 
+    for(let j = 1; j < 10; j++) {
 
+        let $td = document.createElement('td')
 
+        $td.innerText = String(j * i)
 
+        $td.onmouseover = (e) => {
 
+           Array.from($table.children).map(item => {
 
+            Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = 'red')
 
+        })
 
+            $td.style.backgroundColor = 'green'
 
+        }
 
+        $td.onmouseout = (e) => {
 
+            Array.from($table.children).map(item => {
 
+                Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = 'white')
 
+            })
 
+        }
 
+        $tr.appendChild($td)
 
+    }
 
+    $table.appendChild($tr)
 
+}
 
+document.body.appendChild($table)
 
+
 
+const $n1 = document.querySelector('#n1')
 
+const $n2 = document.querySelector('#n2')
 
+const $calcBtn = document.querySelector('#calcBtn')
 
+const $result = document.querySelector('#result')
 
+
 
+const calcSum = () => {
 
+    return $result.innerText = String(+$n1.value + +$n2.value)
 
+}
 
+
 
+$calcBtn.addEventListener( 'click',  () => {
 
+    calcSum()
 
+})
 
+$n1.onchange = calcSum()
 
+$n2.onchange = calcSum()
 
+$calcBtn.onclick = calcSum()
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+