Home Explore Help
Sign In
Varvar
/
Homework
Watch 1
Star 0
Fork 0
Files Issues 32 Pull Requests 0 Wiki
Browse Source

HW YB2NKR8B2LL done

Varvara Huza 3 years ago
parent
11745add8e
commit
336c80c243
2 changed files with 186 additions and 0 deletions
Unified View Show Diff Stats
  1. 43 0
      Homework_8/index.html
  2. 143 0
      Homework_8/main.js

+ 43 - 0
Homework_8/index.html
View File 

@@ -0,0 +1,43 @@
 
+<!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>
 
+    <style>
 
+        body {
 
+            padding: 10px;
 
+        }
 
+
 
+        div {
 
+            max-width: 1200px;
 
+            margin: 0 auto 25px;
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center; 
+        }
 
+
 
+        .buttonMessage {
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div class="multipleTable"></div>
 
+
 
+    <div class="calculator">
 
+
 
+        <label for="ageInput">
 
+            Доброго времени суток! У вас есть уникальная возможность воспользоваться этим очень хитрым калькулятором. Не смотрите на то, что у него лишь одно поле для ввода и совсем небольшой код, ведь количество не значит качество!
 
+            Чтобы посчитать своё нормальное артериальное давление, введите возраст:
 
+            <input type="number" id="ageInput">
 
+        </label>
 
+        <button id="calc">Посчитать</button>
 
+
 
+    </div>
 
+
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 143 - 0
Homework_8/main.js
View File 

@@ -0,0 +1,143 @@
 
+//Таблица умножения 
+let multiplyTable = []
 
+for (let i = 0; i <=10; i++) {
 
+    multiplyTable[i] = []
 
+    for (let j = 0; j <=10; j++) {
 
+        multiplyTable[i][j] = i * j
 
+    }
 
+}
 
+
 
+let tableContainer = document.querySelector('.multipleTable')
 
+
 
+let table = document.createElement('table')
 
+table.border = "1"
 
+for (let i = 0; i < multiplyTable.length; i++) {
 
+    let row = document.createElement('tr')
 
+
 
+    if (i == 0) {
 
+        let cell = document.createElement ('td')
 
+        cell.innerHTML = '&#9959;'
 
+        row.appendChild(cell)
 
+    } else {
 
+        let cell = document.createElement('td')
 
+        cell.innerText = i
 
+        row.appendChild(cell)
 
+    }
 
+
 
+    for (let j = 1; j < multiplyTable[i].length; j++) {
 
+        if (i == 0) {
 
+            let cell = document.createElement('td')
 
+            cell.innerText = multiplyTable[1][j]
 
+            row.appendChild(cell)
 
+        } else {
 
+            let cell = document.createElement('td')
 
+            cell.innerText = multiplyTable[i][j]
 
+            row.appendChild(cell)
 
+        }
 
+    }
 
+    
+    table.appendChild(row)
 
+}
 
+
 
+tableContainer.appendChild(table)
 
+
 
+//Подсветить ячейку
 
+let cells = document.querySelectorAll('td');
 
+let colors = ['#FEE0FF', '#FED6BC', '#FFFADD', '#DEF7FE', '#E7ECFF', '#C3FBD8', '#FDEED9', '#F6FFF8', '#B5F2EA', '#C6D8FF']
 
+
 
+for (let cell of cells) {
 
+    cell.onmouseover = function () {
 
+        cell.style.transitionDuration = '0s'
 
+        let colorIndex = Math.floor(Math.random() * colors.length)
 
+        cell.style.backgroundColor = colors[colorIndex]
 
+    }
 
+}
 
+
 
+for (let cell of cells) {
 
+    cell.onmouseout = function () {
 
+        cell.style.transitionDuration = '1s'
 
+        cell.style.backgroundColor = ''
 
+    }
 
+}
 
+
 
+//Подсветить строку и столбец
 
+// let cells = document.querySelectorAll('td');
 
+// let rows = document.querySelectorAll('tr');
 
+
 
+// for (let cell of cells) {
 
+//     cell.onmouseover = function () {
 
+//         for (let rowCell of this.parentElement.children) {
 
+//             rowCell.style.backgroundColor = '#ccc'
 
+//             rowCell.style.color = '#fff'
 
+//         }
 
+
 
+//         for (let row of rows) {
 
+//             let columnCell = row.children[this.cellIndex];
 
+//             columnCell.style.backgroundColor = '#ccc'
 
+//             columnCell.style.color = '#fff'
 
+//         }
 
+
 
+//         cell.style.backgroundColor = '#000'
 
+//         cell.style.color = '#fff'
 
+//     }
 
+// }
 
+
 
+// for (let cell of cells) {
 
+//     cell.onmouseout = function () {
 
+//         cell.style.backgroundColor = ''
 
+//         cell.style.color = ''
 
+
 
+//         for (let rowCell of this.parentElement.children) {
 
+//             rowCell.style.backgroundColor = ''
 
+//             rowCell.style.color = ''
 
+//         }
 
+
 
+//         for (let row of rows) {
 
+//             let columnCell = row.children[this.cellIndex];
 
+//             columnCell.style.backgroundColor = ''
 
+//             columnCell.style.color = ''
 
+//         }
 
+
 
+//     }
 
+// }
 
+
 
+//Calc
 
+// let calculatorContainer = document.querySelector('.calculator')
 
+// let result = document.createElement('div');
 
+
 
+// calc.onclick = function () {
 
+//     let age = ageInput.value;
 
+//     let normalPressureMax = Math.round(102 + 0.6 * age)
 
+//     let normalPressureMin = Math.round(63 + 0.5 * age)
 
+//     result.innerText = `Ваше нормальное артериальное давление: ${normalPressureMax} на ${normalPressureMin}`
 
+//     calculatorContainer.appendChild(result);
 
+//     ageInput.value = '';
 
+// }
 
+
 
+//Calc Live
 
+let calculatorContainer = document.querySelector('.calculator')
 
+let result = document.createElement('div');
 
+calculatorContainer.appendChild(result);
 
+
 
+let calculate = function() {
 
+    let age = ageInput.value;
 
+    let normalPressureMax = Math.round(102 + 0.6 * age)
 
+    let normalPressureMin = Math.round(63 + 0.5 * age)
 
+    result.innerText = `Ваше нормальное артериальное давление: ${normalPressureMax} на ${normalPressureMin}`
 
+
 
+    if (!ageInput.value) {
 
+        result.innerText = ''
 
+    }
 
+}
 
+ageInput.oninput = calculate;
 
+
 
+let message = document.createElement('div')
 
+message.classList.add('buttonMessage')
 
+message.innerText = 'Отожми обратно!!!'
 
+calculatorContainer.appendChild(message)
 
+
 
+calc.onclick = function () {
 
+    message.style.display = ''
 
+    message.classList.toggle('buttonMessage')
 
+}
 
+