Home Explore Help
Sign In
Hryhorii
/
hw-js-07
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

unknown 3 years ago
commit
64f4009ca1
6 changed files with 247 additions and 0 deletions
Unified View Show Diff Stats
  1. 35 0
      html-css/css/style.css
  2. 1 0
      html-css/images/icon-close.svg
  3. 39 0
      html-css/images/left-arrow.svg
  4. 39 0
      html-css/images/right-arrow.svg
  5. 29 0
      html-css/index.html
  6. 104 0
      javascript/hw.js

+ 35 - 0
html-css/css/style.css
View File 

@@ -0,0 +1,35 @@
 
+html {
 
+  box-sizing: border-box;
 
+}
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: inherit;
 
+}
 
+
 
+td {
 
+  width: 20px;
 
+  background-color: grey;
 
+  text-align: center;
 
+}
 
+
 
+table {
 
+  padding: 10px;
 
+  background-color: rgb(211, 208, 208);
 
+}
 
+input {
 
+  margin-right: 10px;
 
+}
 
+
 
+.calc{
 
+  display: flex;
 
+  justify-content: center;
 
+}
 
+
 
+#result{
 
+  text-align: center;
 
+  color: aqua;
 
+  font-size: 20px;
 
+}
 
+

+ 1 - 0
html-css/images/icon-close.svg
View File 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"/><path d="M0 0h24v24H0z" fill="none"/></svg>

+ 39 - 0
html-css/images/left-arrow.svg
View File 

@@ -0,0 +1,39 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>
 
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
 
+<path  d="M239.077,245.333L466.213,18.219c4.171-4.16,4.179-10.914,0.019-15.085
 
+	c-2.006-2.011-4.731-3.139-7.571-3.134h-192c-2.831-0.005-5.548,1.115-7.552,3.115L24.443,237.781
 
+	c-4.164,4.165-4.164,10.917,0,15.083l234.667,234.667c2.001,2.007,4.718,3.135,7.552,3.136h192
 
+	c5.891,0.011,10.675-4.757,10.686-10.648c0.005-2.84-1.123-5.565-3.134-7.571L239.077,245.333z"/>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+</svg>

+ 39 - 0
html-css/images/right-arrow.svg
View File 

@@ -0,0 +1,39 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>
 
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
 
+<path  d="M466.219,237.781L231.552,3.115C229.548,1.115,226.831-0.005,224,0H32
 
+	c-5.891-0.011-10.675,4.757-10.686,10.648c-0.005,2.84,1.123,5.565,3.134,7.571l227.136,227.115L24.448,472.448
 
+	c-4.171,4.16-4.179,10.914-0.019,15.085c2.006,2.011,4.731,3.139,7.571,3.134h192c2.831,0.005,5.548-1.115,7.552-3.115
 
+	l234.667-234.667c4.171-4.16,4.179-10.914,0.019-15.085C466.231,237.794,466.225,237.788,466.219,237.781z"/>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+<g>
 
+</g>
 
+</svg>

+ 29 - 0
html-css/index.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en" lang="uk">
 
+	<head>
 
+		<meta charset="UTF-8" />
 
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+		<title>Homework</title>
 
+		<link rel="stylesheet" href="./css/style.css" />
 
+	</head>
 
+	<body>
 
+		<div class="calc">
 
+			<input
 
+				id="first"
 
+				type="number"
 
+				class="input"
 
+				placeholder="Write number into calc"
 
+			/>
 
+			<input
 
+				id="second"
 
+				type="number"
 
+				class="input"
 
+				placeholder="Write number into calc"
 
+			/>
 
+			<button type="button" id="submitCalc">Calc</button>
 
+		</div>
 
+		<p id="result"></p>
 
+	</body>
 
+	<script src="../javascript/hw.js" type="module"></script>
 
+</html>

+ 104 - 0
javascript/hw.js
View File 

@@ -0,0 +1,104 @@
 
+'use strict';
 
+//DOM: ДЗ
 
+//Таблица умножения
 
+//Сделать таблицу умножения, используя DOM createElement и innerText. Создайте таблицу,
 
+//вложенные строки и ячейки в циклах.Должно получится что - то вроде этого:
 
+
 
+const table = document.createElement('table');
 
+for (let i = 0; i < 10; i++) {
 
+	const tr = document.createElement('tr');
 
+	for (let j = 1; j < 11; j++) {
 
+		const td = document.createElement('td');
 
+		td.id = String(i) + String(j);
 
+		td.dataset.col = String(i);
 
+		if (j === 10) {
 
+			td.textContent = String(i);
 
+			tr.prepend(td);
 
+			continue;
 
+		}
 
+		td.textContent = String((i === 0 ? 1 : i) * j);
 
+		tr.append(td);
 
+	}
 
+	table.append(tr);
 
+}
 
+document.body.append(table);
 
+
 
+//Подсветить ячейку
 
+//над которой находится курсор мыши. Используйте события mouseover и mouseout,
 
+//и style.backgroundColor для подсветки.
 
+//Читкоды:
 
+//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+//Внимание: :hover это читерство :-
 
+// let tdId;
 
+
 
+// table.onmouseover = function (e): void {
 
+// 	const {tagName,id} = e.target
 
+// 	const oldTd = document.getElementById(tdId)
 
+// 	if (oldTd) oldTd.style.backgroundColor = 'grey'
 
+// 	if (tagName === "TD") {
 
+// 		const td = document.getElementById(id)
 
+// 		td.style.backgroundColor = 'green'
 
+// 		tdId = id
 
+// 	} //event -   это объект с информацией о событии,
 
+//                              //передается первым параметром в обработчик события.
 
+// }
 
+
 
+// Подсветить строку и столбец,
 
+//в которой находится подсвеченная ячейка. Используйте parentElement
 
+//(родительский элемент элемента DOM), и список его детей: children.
 
+//Читкоды:
 
+//в обработчик события в качестве this передается элемент, на котором событие произошло;
 
+//у td есть свойство cellIndex, в котором лежит номер ячейки;
 
+//у tr, аналогично есть свойство rowIndex - номер строки;
 
+
 
+table.onmouseover = function ({
 
+	target: {
 
+		cellIndex,
 
+		tagName,
 
+		id,
 
+		dataset: { col },
 
+	},
 
+}) {
 
+	this.childNodes.forEach((element) => {
 
+		element.childNodes.forEach((td) => {
 
+			if (td.cellIndex === cellIndex) {
 
+				td.style.backgroundColor = 'yellow';
 
+			} else if (td.dataset.col === col) {
 
+				td.style.backgroundColor = 'orange';
 
+			} else {
 
+				td.style.backgroundColor = 'grey';
 
+			}
 
+		});
 
+	});
 
+	if (tagName === 'TD')
 
+		document.getElementById(id).style.backgroundColor = 'green';
 
+};
 
+
 
+//Calc
 
+//Сделайте ваш калькулятор из первых занятий используя DOM и элементы input
 
+//(в т.ч.type = "number" для чисел) Каждому полю ввода присвойте тот или иной id для обращения в обрабочтике события.
 
+//Для запуска раcчета используйте, например < button id = "calc" > и
 
+//Также можете создать поле ввода для результата и записывать результат в value этого поля.
 
+
 
+const btnSubmit = document.getElementById('submitCalc');
 
+const resultP = document.getElementById('result');
 
+
 
+btnSubmit.addEventListener('click', updateValue);
 
+function updateValue(e) {
 
+	const values = e.target.parentNode.children;
 
+	resultP.textContent = String(+values[0].value * +values[1].value);
 
+}
 
+
 
+//Calc Live
 
+//Сделайте расчет живым, т. е. обновляющимся по событию oninput каждого поля ввода,
 
+//влияющего на результат.Нет смысла копировать одну и ту же калькуляцию,
 
+//поэтому вначале задекларируйте функцию расчета, а потом присвойте её в
 
+//качестве обработчика события в каждом поле ввода:
 
+
 
+const firstInput = document.getElementById('first');
 
+const secondInput = document.getElementById('second');
 
+const hadleInputs = (e, inputValue) => {
 
+	resultP.textContent = String(+e.target.value * +inputValue.value);
 
+};
 
+firstInput.addEventListener('change', (e) => hadleInputs(e, secondInput));
 
+secondInput.addEventListener('change', (e) => hadleInputs(e, firstInput));