Browse Source

HW_10 (Loops) done

Graf15 2 years ago
parent
commit
a7bb97cd1e
3 changed files with 464 additions and 0 deletions
  1. 68 0
      js/js_10_loops/index.html
  2. 373 0
      js/js_10_loops/index.js
  3. 23 0
      js/js_10_loops/style.css

+ 68 - 0
js/js_10_loops/index.html

@@ -0,0 +1,68 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        {
+            let table = document.createElement('table')
+            let tr1 = document.createElement('tr')
+            table.append(tr1)
+            tr1.innerHTML = '<th>0</th>'
+
+            function backgroundColored(event) {
+
+                let arrClasses = event.target.classList
+                for (elemClass of arrClasses) {
+                    let elements = document.querySelectorAll('.' + elemClass)
+                    for (element of elements) {
+                        element.classList.add('backgroundColorGrey')
+                    }
+                }
+            }
+
+            function backgroundDefault(event) {
+                let arrClasses = event.target.classList
+                for (elemClass of arrClasses) {
+                    let elements = document.querySelectorAll('.' + elemClass)
+                    for (element of elements) {
+                        element.classList.remove('backgroundColorGrey')
+                    }
+                }
+            }
+
+
+            for (n = 1; n < 10; n++) {
+
+                let tr = document.createElement('tr')
+                table.append(tr)
+                let td1 = document.createElement('td')
+                tr.append(td1)
+                td1.innerText = n
+
+                for (i = 1; i < 10; i++) {
+
+                    let td = document.createElement('td')
+                    tr.append(td)
+                    td.innerText = n * i
+                    td.classList.add('row' + n, 'col' + i)
+                    td.onmouseover = backgroundColored
+                    td.onmouseout = backgroundDefault
+
+                    if (n === 1) {
+                        let th = document.createElement('th')
+                        th.innerText = n * i
+                        tr1.append(th)
+                    }
+                }
+            }
+            document.body.append(table)
+        }
+    </script>
+</body>
+</html>

File diff suppressed because it is too large
+ 373 - 0
js/js_10_loops/index.js


+ 23 - 0
js/js_10_loops/style.css

@@ -0,0 +1,23 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    background-color: darkgrey;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+th, td {
+  width: 20px;
+  text-align: center;
+}
+
+.backgroundColorGrey {
+  background-color: grey;
+}