Browse Source

HW<9> done

Евгения Акиншина 3 years ago
parent
commit
14bb321ef9
3 changed files with 135 additions and 0 deletions
  1. 37 0
      js09/css/style.css
  2. 18 0
      js09/index.html
  3. 80 0
      js09/js/main.js

+ 37 - 0
js09/css/style.css

@@ -0,0 +1,37 @@
+select {
+    background-color: rgb(231, 223, 218);
+    margin-top: 20px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+td {
+    border: 1px solid black;
+    padding: 15px;
+    text-align: center;
+}
+
+caption {
+    color: rgb(126, 116, 116);
+    font-size: 25px;
+    font-weight: bold;
+    padding: 5px;
+    border: 1px solid gray;
+    border-bottom: 0px;
+}
+
+caption:after  { 
+    content: "Таблица умножения";
+}
+
+h3 {
+    color: rgb(126, 116, 116);
+}
+
+p, #end, #out {
+    color: rgb(126, 116, 116);
+    font-weight: bold;
+    font-size: 18px;
+}

+ 18 - 0
js09/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>HW9</title>
+</head>
+<body>
+    <div>
+        <select>
+            <option>Страны</option>
+          </select>
+    </div>
+    <script src='js/main.js'></script>
+</body>
+</html>

+ 80 - 0
js09/js/main.js

@@ -0,0 +1,80 @@
+// //Города и страны
+fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json')
+    .then(res => res.json())
+    .then(json => {
+        let countrySelect = document.querySelector('select');
+        let citySelect = document.createElement('select');
+
+        for(let countryChoice in json) {
+            let countrySelectOption = document.createElement('option');
+            countrySelectOption.innerText = countryChoice;
+            countrySelect.append(countrySelectOption);
+        }
+
+        countrySelect.onchange = () => {
+            let cityChoice = json[countrySelect.value];
+            citySelect.innerHTML = '';
+
+            for (let key in cityChoice) {
+                let citySelectOption = document.createElement('option');
+                citySelectOption.innerText = cityChoice[key];
+                citySelect.append(citySelectOption);
+            }
+        }
+
+        document.body.append(countrySelect);
+        document.body.append(citySelect);
+    })
+
+// Таблица умножения
+let table = document.createElement('table');
+let caption = document.createElement('caption');
+
+for (let i = 0; i <= 9; i++) {
+    let row = document.createElement('tr');
+
+    for (let j = 0; j <= 9; j++) { 
+        let col = document.createElement('td');
+        col.onmouseover = function() {
+            row.style.background = '#00BFFF';
+            col.style.background = '#FFDAB9';
+            
+            for(let i = 0; i <= 9; i++) {
+                table.children[i].children[j].style.background = '#FFDAB9';
+            }
+        }
+
+        col.onmouseout = function() {  
+            row.style.background = '';
+            col.style.background = '';
+            for(let i = 0; i < table.children.length; i++) {
+                table.children[i].children[j].style.background = '';
+            }
+        }
+
+        caption.onmouseover = function() {
+            caption.style.background = '#00BFFF';
+            caption.style.color = '#FFF';
+        }
+
+        caption.onmouseout = function() {
+            caption.style.background = '';
+            caption.style.color = '';
+        }
+        
+        let val = i * j;
+        if (val === 0) {
+            val = i || j;
+        }
+
+        col.innerHTML = val;
+        row.appendChild(col);
+        table.appendChild(row);
+    }
+
+    if (caption) {
+        table.appendChild(caption);
+    }  
+}
+
+document.body.appendChild(table);