Евгения Акиншина 3 роки тому
батько
коміт
6607ceeb48
4 змінених файлів з 162 додано та 0 видалено
  1. 3 0
      js07/.vscode/settings.json
  2. 32 0
      js07/css/style.css
  3. 31 0
      js07/index.html
  4. 96 0
      js07/js/main.js

+ 3 - 0
js07/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

+ 32 - 0
js07/css/style.css

@@ -0,0 +1,32 @@
+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;
+}

+ 31 - 0
js07/index.html

@@ -0,0 +1,31 @@
+<!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>HW7</title>
+</head>
+<body>
+    <div class="calculator1">
+        <h3>Калькулятор +/-</h3>
+        <p>Число 1: <input type="number" id="n1"></p>
+        <p>Число 2: <input type="number" id="n2"></p>
+        <button onclick="plus()">Сложить</button>
+        <button onclick="minus()">Вычесть</button>
+        <p>Рeзультат:</p>
+        <div id="out"></div>
+        <hr>
+    </div>
+    <div class="calculator2">
+        <h3>Полезный калькулятор</h3>
+        <p>Ваш вес в кг: <input type="number" id="wt" min="1"></p>
+        <button id="btn">Посчитать</button>
+        <p>Необходимое количество грамм белка в день:</p>
+        <div id="end"></div>
+        <hr>
+    </div>
+    <script src='js/main.js'></script>
+</body>
+</html>

+ 96 - 0
js07/js/main.js

@@ -0,0 +1,96 @@
+// Таблица умножения
+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');
+        let val = i * j;
+    if (val === 0) {
+        val = i || j;
+    }
+    if (caption) {
+        table.appendChild(caption);
+    }    
+    col.innerHTML = val;
+    row.appendChild(col);
+    }
+    table.appendChild(row);
+}
+
+document.body.appendChild(table);
+
+// Подсветить ячейку
+// Подсветить строку и столбец
+let tdAll = document.querySelectorAll('td');
+let trAll = document.querySelectorAll('tr');
+
+tdAll.forEach(function(td) {
+    td.addEventListener('mouseover', function(event) {
+        let target = event.target;
+        target.style.backgroundColor = '#FFF8DC';
+        target.parentElement.style.backgroundColor = '#00BFFF';
+        let index = target.cellIndex;
+        trAll.forEach (tr =>tr.children[index].style.backgroundColor = '#FFDAB9');
+    })
+
+    td.addEventListener('mouseout', function(event) {
+        let target = event.target;
+        target.style.backgroundColor = '';
+        target.parentElement.style.backgroundColor = '';
+        let index = target.cellIndex;
+        trAll.forEach (tr =>tr.children[index].style.backgroundColor = '');
+    }) 
+})
+
+// Подсветить текст
+caption.addEventListener("mouseover", function(event) {
+    event.target.style.background = "#00BFFF";
+    event.target.style.color = "#FFF";
+})
+
+caption.addEventListener("mouseout", function(event) {
+    event.target.style.background = "";
+    event.target.style.color = "";
+})
+//добавила для красоты
+
+// Calc +/-
+function plus() { //функция сложения
+    let num1, num2, result;
+    num1 = document.getElementById('n1').value;
+    num1 = parseInt(num1); //parseInt изменяет неккоректно введенное значение в валидное значение - число
+    num2 = document.getElementById('n2').value;
+    num2 = parseInt(num2);
+    result = num1 + num2;
+    document.getElementById('out').innerHTML = result;
+}
+
+function minus() { //функция вычетания
+    let num1, num2, result;
+    num1 = document.getElementById('n1').value;
+    num1 = parseInt(num1);
+    num2 = document.getElementById('n2').value;
+    num2 = parseInt(num2);
+    result = num1 - num2;
+    document.getElementById('out').innerHTML = result;
+}
+
+// My Calc
+let btn = document.querySelector('#btn');
+let answer = document.querySelector('#wt');
+let result = document.querySelector('#end');
+
+btn.onclick = function() {
+    result = answer.value * 1.5;
+    document.getElementById('end').innerHTML = result;
+}
+
+// My Calc Live
+function calc() {
+    result.value = +answer.value * 1.5;
+    document.getElementById('end').innerHTML = result.value;
+}
+
+answer.oninput = calc