3 years ago · bef37d1125
--- a/js18,19,20-shopGQL
+++ b/js18,19,20-shopGQL
@@ -0,0 +1 @@
 
				+Subproject commit e8670844aa42e66e9717f9c0c3626f3a873a7db2
			
--- a/js22-JSX/.gitignore
+++ b/js22-JSX/.gitignore
@@ -1,3 +1,7 @@
 
				+<<<<<<< HEAD
			
 
				+.DS_Store
			
 
				+**/.vscode/
			
 
				+=======
			
 
				 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
			
 
				 
			
 
				 # dependencies
			
@@ -21,3 +25,4 @@
 
				 npm-debug.log*
			
 
				 yarn-debug.log*
			
 
				 yarn-error.log*
			
 
				+>>>>>>> e98fb6c7 (HW<JSX> done)
			
--- a/js22-JSX/canvas-game
+++ b/js22-JSX/canvas-game
@@ -0,0 +1,6 @@
 
				+#c1 {
			
 
				+    width: 500px;
			
 
				+    height: 500px;
			
 
				+    border: 3px solid black;
			
 
				+    margin: 40px;
			
 
				+}
			
--- a/js22-JSX/canvas-game
+++ b/js22-JSX/canvas-game
@@ -0,0 +1,17 @@
 
				+<!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/normalize.css">
			
 
				+    <link rel="stylesheet" href="css/style.css">
			
 
				+    <title>HW21</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <canvas id='c1' width=500 height=500></canvas>
			
 
				+    <p>Количество циклов: <span id="count">0</span></p>
			
 
				+    <button id="start">Start</button>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/canvas-game
+++ b/js22-JSX/canvas-game
@@ -0,0 +1,79 @@
 
				+// не Counter Strike, но решила поиграть в жизнь
			
 
				+
			
 
				+var canvas = document.getElementById('c1');
			
 
				+var ctx = canvas.getContext('2d');
			
 
				+var mas = [];
			
 
				+var count = 0;
			
 
				+var timer;
			
 
				+
			
 
				+canvas.onclick = function(e) {
			
 
				+    var x = e.offsetX;
			
 
				+    var y = e.offsetY;
			
 
				+    console.log(x);
			
 
				+    console.log(y);
			
 
				+    x = Math.floor(x/10);
			
 
				+    y = Math.floor(y/10);
			
 
				+    mas[y][x]=1;
			
 
				+    console.log(mas);
			
 
				+    drawField();
			
 
				+}
			
 
				+
			
 
				+function goLife() {
			
 
				+    var n=50, m=50;
			
 
				+    for(var i=0; i<m; i++) {
			
 
				+        mas[i]=[];
			
 
				+        for(var j=0; j<n; j++) {
			
 
				+            mas[i][j]=0;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+goLife();
			
 
				+
			
 
				+function drawField() {
			
 
				+    ctx.clearRect(0, 0, 500, 500);
			
 
				+    for(var i=0; i<50; i++) {
			
 
				+        for(var j=0; j<50; j++) {
			
 
				+            if(mas[i][j]==1) {
			
 
				+                ctx.fillRect(j*10, i*10, 10, 10);
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function startLife(){
			
 
				+//моделирование жизни
			
 
				+	var mas2 = [];
			
 
				+	for (var i=0; i<50; i++){
			
 
				+		mas2[i]=[];
			
 
				+		for (var j=0; j<50; j++){
			
 
				+			var neighbors = 0;
			
 
				+			if (mas[fpm(i)-1][j]==1) neighbors++; //up
			
 
				+			if (mas[i][fpp(j)+1]==1) neighbors++; //right
			
 
				+			if (mas[fpp(i)+1][j]==1) neighbors++; //bottom
			
 
				+			if (mas[i][fpm(j)-1]==1) neighbors++; //left
			
 
				+			if (mas[fpm(i)-1][fpp(j)+1]==1) neighbors++;
			
 
				+			if (mas[fpp(i)+1][fpp(j)+1]==1) neighbors++;
			
 
				+			if (mas[fpp(i)+1][fpm(j)-1]==1) neighbors++;
			
 
				+			if (mas[fpm(i)-1][fpm(j)-1]==1) neighbors++;
			
 
				+			(neighbors==2 || neighbors==3) ? mas2[i][j]=1 : mas2[i][j]==0;
			
 
				+		}
			
 
				+	}
			
 
				+	mas = mas2;
			
 
				+	drawField();
			
 
				+	count++;
			
 
				+	document.getElementById('count').innerHTML = count;
			
 
				+	timer = setTimeout(startLife, 500);
			
 
				+}
			
 
				+
			
 
				+function fpm(i) {
			
 
				+    if(i==0) return 50;
			
 
				+    else return i;
			
 
				+}
			
 
				+
			
 
				+function fpp(i) {
			
 
				+    if(i==49) return -1;
			
 
				+    else return i;
			
 
				+}
			
 
				+
			
 
				+document.getElementById('start').onclick = startLife;
			
--- a/js22-JSX/js01/index.html
+++ b/js22-JSX/js01/index.html
@@ -0,0 +1,13 @@
 
				+<!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="css/style.css">
			
 
				+    <title>HW1</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js01/js/main.js
+++ b/js22-JSX/js01/js/main.js
@@ -0,0 +1,9 @@
 
				+
			
 
				+let amountprotein = 1.5; //грамм белка на кг веса
			
 
				+let operationresult; //результат
			
 
				+
			
 
				+do{  //цикл
			
 
				+	let humanweight = prompt("Укажите свой вес в кг",""); //просим пользователя свой вес в кг
			
 
				+    operationresult = humanweight * amountprotein; //кг веса * грамм белка
			
 
				+	alert("грамм белка на указанные кг веса  " + operationresult);  //выводим нужное количество белка 
			
 
				+}while(humanweight !== null)
			
--- a/js22-JSX/js02/index.html
+++ b/js22-JSX/js02/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW2</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js02/js/main.js
+++ b/js22-JSX/js02/js/main.js
@@ -0,0 +1,239 @@
 
				+// assign: evaluation
			
 
				+c =  ( b = ( a = 5 ) * 5 ) / 2;
			
 
				+12.5
			
 
				+
			
 
				+// semicolon: error
			
 
				+
			
 
				+// example 1
			
 
				+a = 10; b = a + 7;
			
 
				+17
			
 
				+a = 10 b = a + 7;
			
 
				+// SyntaxError
			
 
				+
			
 
				+// example 2
			
 
				+c = 5; b = c * 2;
			
 
				+10
			
 
				+c = 5 b = c * 2;
			
 
				+//SyntaxError
			
 
				+
			
 
				+// semicolon: mistake
			
 
				+// example 1
			
 
				+false == "0"
			
 
				+true
			
 
				+false == "0;"
			
 
				+false
			
 
				+// example 2
			
 
				+false == "0"
			
 
				+true
			
 
				+false == ";0"
			
 
				+false
			
 
				+
			
 
				+// example 3
			
 
				+a = 10; c = b = 25; + a * 2
			
 
				+20
			
 
				+a = 10; c = b = 25 + a * 2
			
 
				+45
			
 
				+
			
 
				+// example 4
			
 
				+a = 10; c = 5; + a * 2
			
 
				+20
			
 
				+a = 10; c = 5 + a * 2
			
 
				+25
			
 
				+
			
 
				+// Number: age
			
 
				+let yearnow = 2021; //год по календарю
			
 
				+let yearbirth; //результат
			
 
				+do{ //цикл
			
 
				+	let personage = prompt("Сколько вам лет?",""); //просим пользователя сказать свой возраст
			
 
				+    yearbirth = yearnow - personage; //возраст пользователя - год по календарю
			
 
				+	alert("год рождения по указанному возрасту пользователя  " + yearbirth); //выводим год рождения пользователя
			
 
				+}while(personage !== null)
			
 
				+
			
 
				+// Number: temperature
			
 
				+let FahrenheitValue; //результат
			
 
				+do{ //цикл
			
 
				+	let CelsiusValue = prompt("Какая температура в градусах по Цельсию?",""); //просим пользователя сказать температура в градусах по Цельсию
			
 
				+    FahrenheitValue = (CelsiusValue * 9/5) + 32; //температура в грудусах Цельсия * значение для вычисления в Фаренгейты
			
 
				+	alert("переведенное значение температуры из градусов Цельсия в Фаренгейты  " + FahrenheitValue); //выводим показатель температуры по фаренгейту
			
 
				+}while(CelsiusValue !== null)
			
 
				+
			
 
				+// Number: divide
			
 
				+var number //первое число
			
 
				+var divider //делитель
			
 
				+let divisionresult //результат деления
			
 
				+let number = prompt("Введите первое число: ","");
			
 
				+let divider = prompt("Введите делитель: ","");
			
 
				+divisionresult = number / divider;
			
 
				+alert(Math.floor(divisionresult));
			
 
				+
			
 
				+// Number: odd
			
 
				+let number = +prompt('Введите число: ', '');
			
 
				+if (typeof number === 'number'){
			
 
				+    alert(typeof number)
			
 
				+}
			
 
				+else {alert('Выведите четное число или нет', '') 
			
 
				+}
			
 
				+
			
 
				+// String: greeting
			
 
				+do{
			
 
				+    let nameuser = prompt("Как вас зовут?","");
			
 
				+    alert("Привет" + " "+ nameuser + "!");  
			
 
				+}while(CelsiusValue !== null)
			
 
				+
			
 
				+// // // String: lexics
			
 
				+let question = prompt("Почему ты обиделась?","");
			
 
				+if (question.includes ("потому-что"), ("не скажу"), ("все хорошо, забей")){
			
 
				+    alert("не надо так!")
			
 
				+}
			
 
				+
			
 
				+// confirm
			
 
				+let isBoss = confirm("Ты здесь главный?");
			
 
				+alert( isBoss ); // true, если нажата OK и false, если нажата отмена
			
 
				+
			
 
				+// Boolean
			
 
				+let gender = confirm("Вы женщина?");
			
 
				+let married = confirm("Вы в браке?");
			
 
				+let children = confirm("У вас есть дети?");
			
 
				+
			
 
				+// Boolean: if
			
 
				+let gender = confirm("Вы женщина?");
			
 
				+if (gender){
			
 
				+    alert('Вы женщина')
			
 
				+}
			
 
				+else {alert('Вы мужчина')
			
 
				+}
			
 
				+
			
 
				+let married = confirm("Вы в браке?");
			
 
				+if (married){
			
 
				+    alert('Круто')
			
 
				+}
			
 
				+else {alert('Наслаждайтесь пока холостой жизнью')
			
 
				+}
			
 
				+
			
 
				+let children = confirm("У вас есть дети?");
			
 
				+if (children){
			
 
				+    alert('Дети-это прекрасно')
			
 
				+}
			
 
				+else {alert('Хотите?')
			
 
				+}
			
 
				+
			
 
				+// Array: real
			
 
				+//Список покупок
			
 
				+var shopping = ['bread', 'milk', 'cheese', 'hummus'];
			
 
				+shopping;
			
 
				+shopping[0];
			
 
				+"bread"
			
 
				+shopping[1];
			
 
				+"milk"
			
 
				+shopping[2];
			
 
				+"cheese"
			
 
				+shopping[3];
			
 
				+"hummus"
			
 
				+shopping;
			
 
				+(4) ["bread", "milk", "cheese", "hummus"]
			
 
				+shopping.length
			
 
				+4
			
 
				+
			
 
				+// Еще пару примеров массивов
			
 
				+var beverages = ['water', 'beer', 'juice', 'wine'];
			
 
				+var studentslist = ['Ivanov', 'Petrov', 'Sidorov', 'Kamarov'];
			
 
				+
			
 
				+// Array: booleans
			
 
				+let questions = [gender,married,children];
			
 
				+
			
 
				+//Array: plus
			
 
				+let arr = [2,6];
			
 
				+arr[1] = arr[0] + arr[1];
			
 
				+arr;
			
 
				+(2) [2, 8]
			
 
				+
			
 
				+//Array: plus string
			
 
				+let string = ['i','love','js'];
			
 
				+let stringValue = string[0] + string[1] + string[2];
			
 
				+stringValue;
			
 
				+"ilovejs" // чтобы обьединить 3 в 1
			
 
				+
			
 
				+// Object: real
			
 
				+let car = {
			
 
				+    marka: "Hyundai",
			
 
				+    model: "Elantra",
			
 
				+    color: "black",
			
 
				+    year: 2021
			
 
				+}
			
 
				+
			
 
				+// Object: change
			
 
				+car["marka"] = "Audi";
			
 
				+car.model = "A1"; //est
			
 
				+
			
 
				+// Comparison if
			
 
				+var age = +prompt("Сколько вам лет?","");
			
 
				+if (age < 18){
			
 
				+    alert("школьник");
			
 
				+}
			
 
				+else if (age < 30){
			
 
				+    alert("молодеж");
			
 
				+}
			
 
				+else if (age < 45){
			
 
				+    alert("зрелость");
			
 
				+}
			
 
				+else if (age < 60){
			
 
				+    alert("закат");
			
 
				+}
			
 
				+else if (age > 60){
			
 
				+    alert("как пенсия?");
			
 
				+}
			
 
				+else {
			
 
				+    alert("то ли киборг, то ли ошибка"); 
			
 
				+}
			
 
				+
			
 
				+// Comparison: sizes //
			
 
				+var size = +prompt("Какой у вас размер?","");
			
 
				+if (size < 40){
			
 
				+    alert("Минимальный размер 40");
			
 
				+}
			
 
				+else if (size >= 40 && size < 42){
			
 
				+    alert("S");
			
 
				+}
			
 
				+else if (size >= 42 && size < 46){
			
 
				+alert("M");
			
 
				+}
			
 
				+else if (size >= 46 && size < 50){
			
 
				+    alert("L");
			
 
				+}  
			
 
				+else if (size >= 50 && size < 54){
			
 
				+    alert("XL");
			
 
				+}
			
 
				+else if (size >= 54 && size < 55){
			
 
				+    alert("XXL");
			
 
				+}
			
 
				+else {              
			
 
				+    alert("Максимальный размер - 54"); 
			
 
				+}
			
 
				+
			
 
				+// Comparison: object
			
 
				+var size = {
			
 
				+    40: "S",
			
 
				+    42: "M",
			
 
				+    46: "L",
			
 
				+    50: "XL",
			
 
				+    54: "XXL",
			
 
				+}
			
 
				+let answer = prompt("Ведите размер:");
			
 
				+alert(size[answer]);
			
 
				+
			
 
				+// Ternary // 
			
 
				+let gender = confirm("Вы мужчина?") ? "Вы мужчина" : "Вы женщина";
			
 
				+alert(gender);
			
 
				+
			
 
				+// Синий пояс Number: flats
			
 
				+var floors = 9; //  кол-во этажей
			
 
				+var porches = 10; // число подъездов
			
 
				+var apartmentsPerFloor = 4; // квартир на этаж
			
 
				+var apartment = parseInt(prompt("Номер квартиры", Math.random() * 100 | 0), 10); // номер квартиры
			
 
				+// этаж относительно дома
			
 
				+var floor = Math.ceil(apartment / apartmentsPerFloor);
			
 
				+// подъезд относительно дома.
			
 
				+var porch = Math.ceil(floor / floors);
			
 
				+// этаж относительно подъезда
			
 
				+floor -= (porch - 1) * floors;
			
 
				+alert("Квартира с номером " + apartment + " находится в подъезде № " + porch + " на " + floor + " этаже");
			
--- a/scissors/audio/draw.mp3
+++ b/scissors/audio/draw.mp3
--- a/scissors/audio/loss.mp3
+++ b/scissors/audio/loss.mp3
--- a/scissors/audio/win.mp3
+++ b/scissors/audio/win.mp3
--- a/scissors/css/style.css
+++ b/scissors/css/style.css
@@ -0,0 +1,184 @@
 
				+*,

			
 
				+*::before,

			
 
				+*::after {

			
 
				+	box-sizing: border-box;

			
 
				+	margin: 0;

			
 
				+	padding: 0;

			
 
				+}

			
 
				+body {

			
 
				+	background: #1E88E5;

			
 
				+	display: flex;

			
 
				+	flex-direction: column;

			
 
				+	align-items: center;

			
 
				+	justify-content: center;

			
 
				+	height: 100vh;

			
 
				+	color:#fff;

			
 
				+	font-size: 16px;

			
 
				+	font-family: sans-serif;

			
 
				+}

			
 
				+.game {

			
 
				+	border:3px solid #fff;

			
 
				+	width: 100%;

			
 
				+	max-width: 700px;

			
 
				+	padding:50px;

			
 
				+	border-radius: 3px;

			
 
				+}

			
 
				+.game h1 {

			
 
				+	font-size: 30px;

			
 
				+	text-align: center;

			
 
				+}

			
 
				+.counter-block {

			
 
				+	width: 200px;

			
 
				+	border:2px solid #000;

			
 
				+	margin:20px auto;

			
 
				+	padding: 10px;

			
 
				+	display: flex;

			
 
				+	justify-content: space-around;

			
 
				+	font-size: 44px;

			
 
				+}

			
 
				+.counter-block span {

			
 
				+	margin:0 25px;

			
 
				+}

			
 
				+.count {

			
 
				+	position: relative;

			
 
				+	width: 50px;

			
 
				+	text-align: center;

			
 
				+}

			
 
				+.count::before {

			
 
				+	content:"";

			
 
				+	display: block;

			
 
				+	padding:3px 8px;

			
 
				+	background: #1E88E5;

			
 
				+	color: #fff;

			
 
				+	font-size: 14px;

			
 
				+	position: absolute;

			
 
				+	top:50px;

			
 
				+}

			
 
				+.count-user::before {

			
 
				+	content:"Игрок";

			
 
				+	left:-5px;

			
 
				+}

			
 
				+.count-comp::before {

			
 
				+	content:"Комп";

			
 
				+	right:-5px;

			
 
				+}

			
 
				+.figure-container {

			
 
				+	display: flex;

			
 
				+	justify-content: space-between;

			
 
				+	align-items: center;

			
 
				+	padding:30px 20px;

			
 
				+}

			
 
				+.user-field,

			
 
				+.comp-field {

			
 
				+	width: 50%;

			
 
				+	display: flex;

			
 
				+}

			
 
				+.field {

			
 
				+	width: 70px;

			
 
				+	height: 70px;

			
 
				+	border-radius: 50%;

			
 
				+	border:4px solid #fff;

			
 
				+	cursor: pointer;

			
 
				+	margin:5px;

			
 
				+	transition:.2s;

			
 
				+	overflow: hidden;

			
 
				+	box-shadow: 3px 3px 5px #000;

			
 
				+	outline: none;

			
 
				+}

			
 
				+.result {

			
 
				+	text-align: center;

			
 
				+}

			
 
				+.field.active {

			
 
				+	background-color: green;

			
 
				+}

			
 
				+.field.error {

			
 
				+	background-color: red;

			
 
				+}

			
 
				+.comp-field {

			
 
				+	justify-content: flex-end;

			
 
				+}

			
 
				+.rock {

			
 
				+	background: url(../img/rock.png) center no-repeat;

			
 
				+}

			
 
				+.scissors {

			
 
				+	background: url(../img/scissors.png) center no-repeat;

			
 
				+}

			
 
				+.paper {

			
 
				+	background: url(../img/paper.png) center no-repeat;

			
 
				+}

			
 
				+.comp-field.blink .rock {

			
 
				+	animation: blink 0.3s linear infinite;

			
 
				+}

			
 
				+.comp-field.blink .scissors {

			
 
				+	animation: blink 0.3s 0.1s linear infinite;

			
 
				+}

			
 
				+.comp-field.blink .paper {

			
 
				+	animation: blink 0.3s 0.2s linear infinite;

			
 
				+}

			
 
				+.comp-field.blink {

			
 
				+	animation-play-state: paused;

			
 
				+}

			
 
				+@keyframes blink {

			
 
				+	100% {background-color: green;}

			
 
				+}

			
 
				+.buttons {

			
 
				+	padding:20px 15px;

			
 
				+	text-align: center;

			
 
				+}

			
 
				+.buttons button {

			
 
				+	margin:0 8px;

			
 
				+	cursor:pointer;

			
 
				+	border:none;

			
 
				+	border-radius:3px;

			
 
				+	color:#fff;

			
 
				+	text-transform: uppercase;

			
 
				+	padding:10px 12px;

			
 
				+	font-weight: bold;

			
 
				+	font-size: 16px;

			
 
				+	box-shadow: 3px 3px 2px rgba(0,0,0,0.7);

			
 
				+	transition:.2s;

			
 
				+}

			
 
				+.buttons button:hover,

			
 
				+.buttons button:active {

			
 
				+	box-shadow: 1px 1px 1px rgba(0,0,0,0.7);

			
 
				+}

			
 
				+.play {

			
 
				+	background: green;

			
 
				+}

			
 
				+

			
 
				+

			
 
				+@media(max-width:700px) {

			
 
				+	.game {

			
 
				+		padding: 10px;

			
 
				+	}

			
 
				+	.figure-container {

			
 
				+		flex-direction: column;

			
 
				+	}

			
 
				+	.user-field,

			
 
				+	.comp-field {

			
 
				+		width: 100%;

			
 
				+		flex-wrap: wrap;

			
 
				+		justify-content: center;

			
 
				+		align-items: center;

			
 
				+	}

			
 
				+	.user-field {

			
 
				+		margin-bottom: 20px;

			
 
				+	}

			
 
				+	.user-field::before {

			
 
				+		content:"Игрок:";

			
 
				+		display: block;

			
 
				+		width: 100%;

			
 
				+		font-size: 20px;

			
 
				+		text-align: center;

			
 
				+	}

			
 
				+	.comp-field::before {

			
 
				+		content:"Компьютер:";

			
 
				+		display: block;

			
 
				+		width: 100%;

			
 
				+		font-size: 20px;

			
 
				+		text-align: center;

			
 
				+	}

			
 
				+	.game h1 {

			
 
				+		font-size: 20px;

			
 
				+	}

			
 
				+}
			
--- a/scissors/fav/android-chrome-192x192.png
+++ b/scissors/fav/android-chrome-192x192.png
--- a/scissors/fav/android-chrome-256x256.png
+++ b/scissors/fav/android-chrome-256x256.png
--- a/scissors/fav/apple-touch-icon.png
+++ b/scissors/fav/apple-touch-icon.png
--- a/scissors/fav/browserconfig.xml
+++ b/scissors/fav/browserconfig.xml
@@ -0,0 +1,9 @@
 
				+<?xml version="1.0" encoding="utf-8"?>
			
 
				+<browserconfig>
			
 
				+    <msapplication>
			
 
				+        <tile>
			
 
				+            <square150x150logo src="/mstile-150x150.png"/>
			
 
				+            <TileColor>#2d89ef</TileColor>
			
 
				+        </tile>
			
 
				+    </msapplication>
			
 
				+</browserconfig>
			
--- a/scissors/fav/favicon-16x16.png
+++ b/scissors/fav/favicon-16x16.png
--- a/scissors/fav/favicon-32x32.png
+++ b/scissors/fav/favicon-32x32.png
--- a/scissors/fav/favicon.ico
+++ b/scissors/fav/favicon.ico
--- a/scissors/fav/mstile-150x150.png
+++ b/scissors/fav/mstile-150x150.png
--- a/scissors/fav/safari-pinned-tab.svg
+++ b/scissors/fav/safari-pinned-tab.svg
@@ -0,0 +1,64 @@
 
				+<?xml version="1.0" standalone="no"?>
			
 
				+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
			
 
				+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
			
 
				+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
			
 
				+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
			
 
				+ preserveAspectRatio="xMidYMid meet">
			
 
				+<metadata>
			
 
				+Created by potrace 1.11, written by Peter Selinger 2001-2013
			
 
				+</metadata>
			
 
				+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
			
 
				+fill="#000000" stroke="none">
			
 
				+<path d="M20 2540 c-20 -20 -20 -33 -20 -1260 0 -1227 0 -1240 20 -1260 20
			
 
				+-20 33 -20 1260 -20 1227 0 1240 0 1260 20 20 20 20 33 20 1260 0 1227 0 1240
			
 
				+-20 1260 -20 20 -33 20 -1260 20 -1227 0 -1240 0 -1260 -20z m1381 -196 c113
			
 
				+-33 208 -118 262 -232 25 -54 32 -83 35 -153 7 -144 -36 -251 -139 -343 l-48
			
 
				+-44 59 -11 c43 -9 60 -16 60 -28 0 -13 -8 -15 -50 -10 -27 3 -50 3 -50 -1 1
			
 
				+-4 61 -95 134 -202 l133 -195 95 4 c152 5 255 -35 348 -135 67 -73 103 -162
			
 
				+108 -265 9 -187 -78 -333 -246 -412 -124 -58 -290 -48 -404 24 -89 57 -160
			
 
				+154 -188 258 l-11 44 -43 -42 c-66 -65 -108 -50 -44 16 l32 33 -190 0 -191 0
			
 
				+-17 -63 c-33 -119 -116 -215 -234 -270 -54 -25 -83 -32 -153 -35 -187 -9 -333
			
 
				+78 -412 246 -25 54 -32 83 -35 153 -9 187 78 333 246 412 63 30 73 32 184 32
			
 
				+100 0 117 2 113 15 -21 76 -25 104 -17 112 17 17 32 -1 38 -43 4 -21 9 -39 13
			
 
				+-39 6 0 242 370 249 391 2 5 -21 32 -52 60 -39 35 -67 74 -93 126 -32 65 -37
			
 
				+86 -41 162 -10 210 104 374 303 437 56 18 181 17 246 -2z"/>
			
 
				+<path d="M1210 2300 c-235 -40 -372 -306 -270 -523 50 -105 155 -185 275 -206
			
 
				+198 -36 388 100 424 304 36 198 -100 387 -303 424 -65 12 -61 12 -126 1z m270
			
 
				+-164 c57 -20 65 -26 68 -51 4 -33 -56 -104 -70 -82 -4 7 -8 -3 -8 -26 0 -35
			
 
				+-9 -47 -100 -137 -54 -55 -106 -100 -115 -100 -25 0 -17 32 18 70 17 20 4 7
			
 
				+-29 -28 -43 -45 -67 -63 -78 -59 -28 11 -17 40 36 94 29 29 48 53 42 53 -12 0
			
 
				+-85 -76 -108 -113 -13 -22 -24 -27 -44 -25 -46 5 -39 35 25 102 52 55 51 54
			
 
				+-11 -7 -71 -70 -98 -80 -104 -38 -3 19 22 50 125 155 70 72 110 114 87 93 -27
			
 
				+-25 -46 -36 -57 -31 -28 10 -19 38 26 82 42 41 44 42 114 42 50 0 74 4 83 15
			
 
				+16 19 22 19 100 -9z"/>
			
 
				+<path d="M1053 1507 c-14 -23 -71 -113 -126 -200 -55 -87 -97 -160 -95 -162 2
			
 
				+-3 21 0 42 6 26 7 42 7 48 1 15 -15 2 -30 -35 -37 -72 -15 -72 -15 -20 -50
			
 
				+107 -72 181 -192 191 -311 l5 -64 190 0 191 0 -32 33 c-65 67 -22 81 45 15
			
 
				+l43 -42 0 40 c0 129 98 282 219 343 23 12 41 24 41 27 0 14 -263 393 -270 389
			
 
				+-4 -2 -10 -23 -14 -45 -4 -28 -11 -40 -22 -40 -14 0 -16 8 -10 54 3 30 8 61
			
 
				+12 69 4 12 -4 11 -48 -4 -71 -25 -188 -25 -268 0 l-61 19 -26 -41z"/>
			
 
				+<path d="M570 1070 c-235 -40 -372 -306 -270 -523 50 -105 155 -185 275 -206
			
 
				+198 -36 388 100 424 304 36 198 -100 387 -303 424 -65 12 -61 12 -126 1z m278
			
 
				+-192 c53 -53 62 -68 62 -98 0 -29 -8 -44 -40 -75 -34 -33 -42 -37 -50 -25 -7
			
 
				+11 -10 3 -10 -28 0 -41 -5 -48 -85 -129 l-85 -85 -95 32 c-58 19 -95 37 -95
			
 
				+45 0 11 17 8 72 -11 39 -13 73 -22 75 -20 3 2 -34 17 -81 32 -74 24 -86 31
			
 
				+-86 50 l0 23 85 -29 c47 -16 83 -26 81 -22 -3 4 -45 21 -95 37 -86 27 -91 30
			
 
				+-91 56 l0 28 87 -30 c48 -16 92 -28 98 -26 5 2 -37 19 -95 39 -105 34 -105 35
			
 
				+-108 69 -2 27 3 40 27 63 l30 28 47 -16 c26 -9 52 -16 58 -16 16 1 -86 40
			
 
				+-103 40 -24 0 -71 -52 -71 -77 0 -13 -4 -23 -10 -23 -27 0 -6 49 42 97 l52 53
			
 
				+111 0 c62 0 104 4 97 9 -10 6 -4 16 23 39 55 49 80 44 153 -30z"/>
			
 
				+<path d="M600 776 c0 -19 -8 -44 -18 -56 -18 -23 -19 -23 -71 -5 -29 9 -54 15
			
 
				+-57 13 -2 -3 22 -12 53 -22 l57 -18 23 26 c20 24 34 96 18 96 -3 0 -5 -15 -5
			
 
				+-34z"/>
			
 
				+<path d="M1860 1070 c-235 -40 -372 -306 -270 -523 50 -105 155 -185 275 -206
			
 
				+198 -36 388 100 424 304 36 198 -100 387 -303 424 -65 12 -61 12 -126 1z m292
			
 
				+-177 c62 -61 66 -102 14 -152 -24 -23 -35 -29 -39 -19 -3 7 -6 -3 -6 -22 -1
			
 
				+-30 -12 -46 -75 -109 l-75 -74 -45 13 c-25 7 -46 16 -46 20 0 15 13 18 37 9
			
 
				+16 -6 22 -6 18 1 -3 6 -13 10 -22 10 -13 0 -12 5 7 28 14 15 -14 -10 -60 -55
			
 
				+-69 -67 -89 -81 -107 -77 -42 11 -27 45 59 131 45 45 79 86 75 90 -4 4 -50 -7
			
 
				+-102 -24 -108 -36 -135 -34 -135 7 0 28 4 30 130 72 111 36 130 45 129 63 -1
			
 
				+15 -2 16 -6 3 -2 -9 -25 -24 -50 -32 -57 -19 -53 -20 -53 1 0 9 17 34 37 55
			
 
				+36 37 40 38 108 39 38 0 64 3 57 6 -10 4 -6 13 14 34 42 44 78 39 136 -18z
			
 
				+m-303 -248 c-39 -41 -49 -43 -49 -11 0 17 8 27 28 34 49 18 54 13 21 -23z"/>
			
 
				+</g>
			
 
				+</svg>
			
--- a/scissors/fav/site.webmanifest
+++ b/scissors/fav/site.webmanifest
@@ -0,0 +1,19 @@
 
				+{
			
 
				+    "name": "RSP",
			
 
				+    "short_name": "RSP",
			
 
				+    "icons": [
			
 
				+        {
			
 
				+            "src": "/android-chrome-192x192.png",
			
 
				+            "sizes": "192x192",
			
 
				+            "type": "image/png"
			
 
				+        },
			
 
				+        {
			
 
				+            "src": "/android-chrome-256x256.png",
			
 
				+            "sizes": "256x256",
			
 
				+            "type": "image/png"
			
 
				+        }
			
 
				+    ],
			
 
				+    "theme_color": "#ffffff",
			
 
				+    "background_color": "#ffffff",
			
 
				+    "display": "standalone"
			
 
				+}
			
--- a/scissors/img/RSP.png
+++ b/scissors/img/RSP.png
--- a/scissors/img/paper.png
+++ b/scissors/img/paper.png
--- a/scissors/img/rock.png
+++ b/scissors/img/rock.png
--- a/scissors/img/scissors.png
+++ b/scissors/img/scissors.png
--- a/scissors/index.html
+++ b/scissors/index.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="ru">

			
 
				+<head>

			
 
				+	<meta charset="UTF-8">

			
 
				+	<meta name="viewport" content="width=device-width">

			
 
				+	<title>Камень-ножницы-бумага</title>

			
 
				+	<link rel="stylesheet" href="css/style.css">

			
 
				+

			
 
				+	<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png">

			
 
				+	<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">

			
 
				+	<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">

			
 
				+	<link rel="manifest" href="fav/site.webmanifest">

			
 
				+	<link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5">

			
 
				+	<meta name="msapplication-TileColor" content="#da532c">

			
 
				+	<meta name="theme-color" content="#ffffff">

			
 
				+

			
 
				+</head>

			
 
				+<body>

			
 
				+	<div class="game">

			
 
				+		<h1>Камень-ножницы-бумага</h1>

			
 
				+		<div class="counter-block">

			
 
				+			<div class="count count-user">0</div>

			
 
				+			<span>:</span>

			
 
				+			<div class="count count-comp">0</div>

			
 
				+		</div>

			
 
				+		<div class="figure-container">

			
 
				+			<div class="user-field">

			
 
				+				<button class="field rock" data-field="r"></button>

			
 
				+				<button class="field scissors" data-field="s"></button>

			
 
				+				<button class="field paper" data-field="p"></button>

			
 
				+			</div>

			
 
				+			<div class="comp-field">

			
 
				+				<button class="field rock" data-field="r"></button>

			
 
				+				<button class="field scissors" data-field="s"></button>

			
 
				+				<button class="field paper" data-field="p"></button>

			
 
				+			</div>

			
 
				+		</div>

			
 
				+		<h3 class="result">Сделайте выбор</h3>

			
 
				+	</div>

			
 
				+	<div class="buttons">

			
 
				+		<button class="play">Играть заново</button>

			
 
				+	</div>

			
 
				+

			
 
				+	<audio src="#" class="sound"></audio>

			
 
				+	<script src="js/app.js"></script>

			
 
				+</body>

			
 
				+</html>
			
--- a/scissors/js/app.js
+++ b/scissors/js/app.js
@@ -0,0 +1,92 @@
 
				+window.addEventListener('load', function () {
			
 
				+	
			
 
				+
			
 
				+	let countUser = document.querySelector('.count-user'),
			
 
				+		countComp = document.querySelector('.count-comp'),
			
 
				+		userField = document.querySelector('.user-field'),
			
 
				+		compField = document.querySelector('.comp-field'),
			
 
				+		sound = document.querySelector('.sound'),
			
 
				+		res = document.querySelector('.result'),
			
 
				+		play = document.querySelector('.play'),
			
 
				+		fields = document.querySelectorAll('.field'),
			
 
				+		userStep, compStep, countU = 0, countC = 0, blocked = false;
			
 
				+	
			
 
				+	
			
 
				+	function choiceUser(e) { //осознанный выбор пользователя
			
 
				+		if (blocked) return;
			
 
				+		let target = e.target;
			
 
				+		if (target.classList.contains('field')) { 
			
 
				+			userStep = target.dataset.field;
			
 
				+			fields.forEach(item => item.classList.remove('active', 'error'));
			
 
				+			target.classList.add('active');
			
 
				+			choiceComp();
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+	function choiceComp() { //рандомный выбор компьютера
			
 
				+		blocked = true;
			
 
				+		let rand = Math.floor(Math.random() * 3);
			
 
				+		compField.classList.add('blink');
			
 
				+		let compFields = compField.querySelectorAll('.field');
			
 
				+
			
 
				+		setTimeout(() => {
			
 
				+			compField.classList.remove('blink');
			
 
				+			compStep = compFields[rand].dataset.field;
			
 
				+			compFields[rand].classList.add('active');
			
 
				+			winner();
			
 
				+		},3000);
			
 
				+	}
			
 
				+
			
 
				+	function winner() { //кто одержал победу
			
 
				+		blocked = false;
			
 
				+
			
 
				+		let comb = userStep + compStep;
			
 
				+
			
 
				+		switch (comb) { 
			
 
				+			case 'rr':
			
 
				+			case 'ss':
			
 
				+			case 'pp':
			
 
				+				res.innerText = 'Ничья!';
			
 
				+				sound.setAttribute('src', 'audio/draw.mp3');
			
 
				+				sound.play();
			
 
				+				break;
			
 
				+			
			
 
				+			case 'rs':
			
 
				+			case 'sp':
			
 
				+			case 'pr':
			
 
				+				res.innerText = 'Победили вы!';
			
 
				+				sound.setAttribute('src', 'audio/win.mp3');
			
 
				+				sound.play();
			
 
				+				countU++;
			
 
				+				countUser.innerText = countU;
			
 
				+				compField.querySelector('[data-field='+compStep+']').classList.add('error');
			
 
				+				break;
			
 
				+			
			
 
				+			case 'sr':
			
 
				+			case 'ps':
			
 
				+			case 'rp':
			
 
				+				res.innerText = 'Победил компьютер!';
			
 
				+				sound.setAttribute('src', 'audio/loss.mp3');
			
 
				+				sound.play();
			
 
				+				countC++;
			
 
				+				countComp.innerText = countC;
			
 
				+				userField.querySelector('[data-field=' + userStep + ']').classList.add('error');
			
 
				+				break;
			
 
				+		}
			
 
				+		
			
 
				+	}
			
 
				+
			
 
				+	function playGame() {
			
 
				+		countU = countC = 0;
			
 
				+		res.innerText = 'Сделайте выбор';
			
 
				+		countUser.innerText = '0';
			
 
				+		countComp.innerText = '0';
			
 
				+		fields.forEach(item => item.classList.remove('active', 'error'));
			
 
				+	}
			
 
				+
			
 
				+	play.addEventListener('click', playGame);
			
 
				+	userField.addEventListener('click', choiceUser);
			
 
				+
			
 
				+
			
 
				+});
			
 
				+
			
--- a/js22-JSX/js03/other
+++ b/js22-JSX/js03/other
@@ -0,0 +1,13 @@
 
				+<!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>HW3</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js03/other
+++ b/js22-JSX/js03/other
@@ -0,0 +1,220 @@
 
				+// switch: sizes
			
 
				+let size = prompt("Введите ваш размер:",""); 
			
 
				+
			
 
				+switch(size){
			
 
				+    case "40": alert("S");
			
 
				+    break;
			
 
				+    case "42": alert("M");
			
 
				+    break;
			
 
				+    case "46": alert("L")
			
 
				+    break;
			
 
				+    case "50": alert("XL")
			
 
				+    break;
			
 
				+    case "54": alert("XXL")
			
 
				+    break;
			
 
				+    default: alert('Проверьте данные о размере')
			
 
				+}
			
 
				+
			
 
				+// switch: if
			
 
				+let color = prompt("Введите цвет:", "");
			
 
				+
			
 
				+if (color === "red") {
			
 
				+    document.write("<div style='background-color: red;'>красный</div>");
			
 
				+    document.write("<div style='background-color: black; color: white;'>черный</div>");
			
 
				+} else if (color === "black") {
			
 
				+    document.write("<div style='background-color: black; color: white;'>черный</div>");
			
 
				+} else if (color === "blue") {
			
 
				+    document.write("<div style='background-color: blue;'>синий</div>");
			
 
				+    document.write("<div style='background-color: green;'>зеленый</div>");
			
 
				+} else if (color === "green") {
			
 
				+    document.write("<div style='background-color: green;'>зеленый</div>");
			
 
				+} else {
			
 
				+    document.write("<div style='background-color: gray;'>Я не понял</div>");
			
 
				+};
			
 
				+
			
 
				+// prompt: or
			
 
				+let yearnow = 2021; //год по календарю
			
 
				+let personage = prompt("Сколько вам лет?"); 
			
 
				+
			
 
				+if (personage == null || personage == "" || isNaN(personage)) {
			
 
				+    alert("Ошибка!");
			
 
				+} else {
			
 
				+    alert("Вы " + (yearnow - personage) + " года рождения");
			
 
				+}
			
 
				+
			
 
				+// confirm: or this days
			
 
				+confirm("Шопинг?") && !alert ("Круто!") || alert ("Ты бяка!");
			
 
				+
			
 
				+// confirm: if this days
			
 
				+let shopping = confirm("Шопинг?");
			
 
				+
			
 
				+if (shopping) {
			
 
				+    alert("Круто!");
			
 
				+} else {
			
 
				+    alert("Ты бяка!");
			
 
				+}
			
 
				+
			
 
				+// triple prompt
			
 
				+let yoursurname = prompt("Ваша фамилия?");
			
 
				+let yourname = prompt("Ваше имя?");
			
 
				+let yourfathername = prompt("Ваше отчество?");
			
 
				+let fullname = yoursurname + " " + yourname + " " + yourfathername;
			
 
				+alert("Ваше ФИО:" + " " + fullname);
			
 
				+
			
 
				+// default: or
			
 
				+let yoursurname = prompt("Ваша фамилия?") || "Акиншина";
			
 
				+let yourname = prompt("Ваше имя?") || "Евгения";
			
 
				+let yourfathername = prompt("Ваше отчество?") || "Равшановна";
			
 
				+let fullname = yoursurname + " " + yourname + " " + yourfathername;
			
 
				+alert("Ваше ФИО:" + " " + fullname);
			
 
				+
			
 
				+// default: if
			
 
				+let yoursurname = prompt("Ваша фамилия?");
			
 
				+
			
 
				+if (yoursurname){
			
 
				+}
			
 
				+else {
			
 
				+    yoursurname = "Акиншина"
			
 
				+}
			
 
				+let yournames = prompt("Ваше имя?");
			
 
				+if (yourname){
			
 
				+
			
 
				+}
			
 
				+else {
			
 
				+    yourname = "Евгения"
			
 
				+}
			
 
				+
			
 
				+let yourfathername = prompt("Ваше отчество?");
			
 
				+
			
 
				+if (yourfathername){
			
 
				+
			
 
				+}
			
 
				+else {
			
 
				+    yourfathername = "Равшановна"
			
 
				+}
			
 
				+alert("Ваше ФИО:" + " " + yoursurname + " " + yourname + " " + yourfathername);
			
 
				+
			
 
				+// login and password
			
 
				+let login = "admin";
			
 
				+let password = "qwerty";
			
 
				+let useranswer = prompt("Введите логин: ");
			
 
				+
			
 
				+if (useranswer === login) {
			
 
				+    let useranswer = prompt("Введите пароль: ");
			
 
				+    if (useranswer === password) {
			
 
				+        alert("Поздравляем, ваши данные верны!");
			
 
				+    } else {
			
 
				+        alert("Ошибка ввода пароля!");
			
 
				+    }
			
 
				+} else {
			
 
				+    alert("Ошибка ввода логина!");
			
 
				+}
			
 
				+
			
 
				+// currency calc
			
 
				+alert("Добро пожаловать!");
			
 
				+let summaСhoiсe = prompt("Выберите валюту, в которую вы хотите перевести ваши грн: usd или eur?");
			
 
				+let usd = 27.17;
			
 
				+let eur = 32.15;
			
 
				+
			
 
				+switch (summaСhoiсe) {
			
 
				+    case "usd":
			
 
				+        let summaUsd = prompt("Введите сумму в грн: "s);
			
 
				+        summaUser = (summaUsd / usd).toFixed(2);
			
 
				+        alert("Вы получите " + " " + summaUser + " " + "usd");
			
 
				+        break;
			
 
				+    case "eur":
			
 
				+        let summaEur = prompt("Введите сумму в грн: ");
			
 
				+        summaUser = (summaEur / eur).toFixed(2);
			
 
				+        alert("Вы получите " + " " + summaUser + " " + "eur");
			
 
				+        break;
			
 
				+        default: alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// currency calc: improved
			
 
				+alert("Добро пожаловать!");
			
 
				+let summaСhoiсe = (prompt("Выберите валюту, в которую вы хотите перевести ваши грн: usd или eur?")).toLowerCase();
			
 
				+let usd = 27.17;
			
 
				+let eur = 32.15;
			
 
				+
			
 
				+switch (summaСhoiсe) {
			
 
				+    case "usd":
			
 
				+        let summaUsd = prompt("Введите сумму в грн: ");
			
 
				+        summaUser = (summaUsd / usd).toFixed(2);
			
 
				+        alert("Вы получите " + " " + summaUser + " " + "usd");
			
 
				+        break;
			
 
				+    case "eur":
			
 
				+        let summaEur = prompt("Введите сумму в грн: ");
			
 
				+        summaUser = (summaEur / eur).toFixed(2);
			
 
				+        alert("Вы получите " + " " + summaUser + " " + "eur");
			
 
				+        break;
			
 
				+        default: alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// currency calc: two rates
			
 
				+alert("Добро пожаловать!");
			
 
				+let summaСhoiсe = (prompt("Выберите валюту, в которую вы хотите перевести ваши грн: usd или eur?")).toLowerCase();
			
 
				+let buyUsd = 27.17;
			
 
				+let sellUsd = 27.37;
			
 
				+let buyEur = 32.15;
			
 
				+let sellEur = 32.41;
			
 
				+let resultAnswer, answer, valueСhoiсe;
			
 
				+
			
 
				+switch (summaСhoiсe) {
			
 
				+    case "usd": 
			
 
				+    valueСhoiсe = prompt("Введите сумму в грн: ");
			
 
				+    resultAnswer = confirm("Покупаете?") ? answer = valueСhoiсe / buyUsd : answer = valueСhoiсe / sellUsd; 
			
 
				+    alert(answer.toFixed(2));
			
 
				+    break;
			
 
				+    case "eur": 
			
 
				+    valueСhoiсe = prompt("Введите сумму в грн: ");
			
 
				+    resultAnswer = confirm("Покупаете?") ? answer = valueСhoiсe / buyEur : answer = valueСhoiсe / sellEur; 
			
 
				+    alert(answer.toFixed(2));
			
 
				+    break;
			
 
				+    default: alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// currency calc: if
			
 
				+alert("Добро пожаловать!");
			
 
				+let summaСhoiсe = (prompt("Выберите валюту, в которую вы хотите перевести ваши грн: usd или eur?")).toLowerCase();
			
 
				+let buyUsd = 27.17;
			
 
				+let sellUsd = 27.37;
			
 
				+let buyEur = 32.15;
			
 
				+let sellEur = 32.41;
			
 
				+let resultAnswer, answer, valueСhoiсe;
			
 
				+
			
 
				+if (summaСhoiсe=="usd") {
			
 
				+    valueСhoiсe = prompt("Введите сумму в грн: ");
			
 
				+    resultAnswer = confirm("Покупаете?") ? answer = valueСhoiсe / buyUsd : answer = valueСhoiсe / sellUsd; 
			
 
				+    alert(answer.toFixed(2));
			
 
				+}else if (summaСhoiсe=="eur") {
			
 
				+    valueСhoiсe = prompt("Введите сумму в грн: ");
			
 
				+    resultAnswer = confirm("Покупаете?") ? answer = valueСhoiсe / buyEur : answer = valueСhoiсe / sellEur; 
			
 
				+    alert(answer.toFixed(2));
			
 
				+}
			
 
				+else {
			
 
				+    alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// scissors
			
 
				+let possibleАnswer = ["rock", "scissors", "paper"];
			
 
				+let userChoise = possibleАnswer.indexOf(prompt(possibleАnswer + " ?").toLowerCase());
			
 
				+let compChoise = Math.floor(Math.random() * 3);
			
 
				+
			
 
				+alert("Answer computer - " + possibleАnswer[compChoise]);
			
 
				+
			
 
				+if (userChoise === compChoise) {
			
 
				+    alert("Draw");
			
 
				+} else if ((userChoise - compChoise + 3) % 3 === 1) {
			
 
				+    alert("Computer won!");
			
 
				+} else {
			
 
				+    alert("You won!");
			
 
				+}
			
 
				+
			
 
				+// Задание на черный пояс
			
 
				+let possibleАnswerDone = ["rock", "scissors", "paper"];
			
 
				+let userChoiseDone = possibleАnswerDone.indexOf(prompt(possibleАnswerDone + " ?").toLowerCase());
			
 
				+let compChoiseDone = Math.floor(Math.random() * 3);
			
 
				+
			
 
				+let gameWinner = alert("Answer computer - " + possibleАnswerDone[compChoiseDone]) || (((userChoiseDone === compChoiseDone) && alert("Draw")) || (((userChoiseDone - compChoiseDone + 3) % 3 === 1) && alert("Computer won!")) || (((compChoiseDone - userChoiseDone + 3) % 3 === 1) && alert("You won!")));
			
 
				+ 
			
 
				+//еще один вариант игры "scissors" в отдельной папке!!!
			
--- a/js22-JSX/js04/index.html
+++ b/js22-JSX/js04/index.html
@@ -0,0 +1,25 @@
 
				+<!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>HW4</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <table>
			
 
				+        <script language="JavaScript"> 
			
 
				+            document.write("<h1>Таблица умножения</h1>"); 
			
 
				+            for (let j = 1; j <= 9; j++){  
			
 
				+                document.write("<div style='float: left; width: 70px;'>"); 
			
 
				+            for (let i = 1; i <=9; i++){ 
			
 
				+                document.write(i + "*" + j + "=" +(i*j) + "<br>"); 
			
 
				+            }  
			
 
				+                document.write ("</div>"); 
			
 
				+            } 
			
 
				+        </script> 
			
 
				+    </table>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js04/js/main.js
+++ b/js22-JSX/js04/js/main.js
@@ -0,0 +1,247 @@
 
				+// html tree
			
 
				+let body = {
			
 
				+    name: 'body',
			
 
				+    children: [
			
 
				+        {
			
 
				+            name: 'div',
			
 
				+            children: [
			
 
				+                {
			
 
				+                    name: 'span',
			
 
				+                    children: 'Enter a data please',
			
 
				+                },
			
 
				+                {
			
 
				+                    name: 'br',
			
 
				+                },
			
 
				+                {
			
 
				+                    name: 'input',
			
 
				+                    attrs: {
			
 
				+                        type: 'text',
			
 
				+                        id: 'name',
			
 
				+                    },
			
 
				+                },
			
 
				+                {
			
 
				+                    name: 'input',
			
 
				+                    attrs: {
			
 
				+                        type: 'text',
			
 
				+                        id: 'name',
			
 
				+                    },
			
 
				+                },
			
 
				+            ]
			
 
				+        },
			
 
				+        {
			
 
				+            name: 'div',
			
 
				+            children: [
			
 
				+                {
			
 
				+                    name: 'button',
			
 
				+                    attrs: {
			
 
				+                        id: 'ok',
			
 
				+                        children: 'OK',
			
 
				+                    }
			
 
				+                },
			
 
				+                {
			
 
				+                    name: 'button',
			
 
				+                    attrs: {
			
 
				+                        id: 'cancel',
			
 
				+                        children: 'Cancel',
			
 
				+                    }
			
 
				+                },
			
 
				+            ]
			
 
				+        }
			
 
				+    ],
			
 
				+};
			
 
				+
			
 
				+// declarative fields
			
 
				+let notebook = {
			
 
				+    brand: prompt("Enter laptop brand: ") || "HP",
			
 
				+    type: prompt("Enter laptop type: ") || "440 G4",
			
 
				+    model: prompt("Enter your laptop model: ") || "Y7Z75EA",
			
 
				+    ram: +prompt("Enter the amount of laptop RAM: ") || 4,
			
 
				+    size: prompt("Enter laptop size: ") || 14,
			
 
				+    weight: +prompt("Enter the weight of the laptop: ") || 1.8,
			
 
				+
			
 
				+    resolution: {
			
 
				+        width: +prompt("Enter the width of the laptop: ") || 1920,
			
 
				+        height: +prompt("Enter the length of the laptop: ") || 1080,
			
 
				+    },
			
 
				+};
			
 
				+
			
 
				+let phone = {
			
 
				+    brand: prompt("Enter phone name: ") || "meizu",
			
 
				+    model: prompt("Enter your phone model: ") || "m2",
			
 
				+    ram: +prompt("Enter the amount of RAM: ") || 2,
			
 
				+    color: prompt("Enter color: ") || "black",
			
 
				+};
			
 
				+let person = {
			
 
				+    name: prompt("Enter a name: ") || "Donald",
			
 
				+    surname: prompt("Enter a surname: ") || "Trump",
			
 
				+    married: confirm("Are you married?") || true,
			
 
				+};
			
 
				+
			
 
				+// object links
			
 
				+person["smartphone"] = smartphone;
			
 
				+person["laptop"] = laptop; 
			
 
				+laptop["owner"] = person; 
			
 
				+smartphone["owner"] = person; 
			
 
				+
			
 
				+//or
			
 
				+person.smartphone = smartphone;
			
 
				+person.laptop = laptop; 
			
 
				+laptop.owner = person; 
			
 
				+smartphone.owner = person; 
			
 
				+
			
 
				+// imperative array fill 3
			
 
				+let arr = []; 
			
 
				+
			
 
				+alert("Введите названия ваших любимых фруктов: ")
			
 
				+arr[0] = prompt("Первый фрукт: ");
			
 
				+arr[1] = prompt("Второй фрукт: ");
			
 
				+arr[2] = prompt("Третий фрукт: ");
			
 
				+alert(arr + " " + "я це люблю!");
			
 
				+
			
 
				+// while confirm
			
 
				+while (true) {
			
 
				+    var a = confirm();
			
 
				+    if (a === true || a == null) break;
			
 
				+}
			
 
				+
			
 
				+// array fill
			
 
				+let arrayValue = [];
			
 
				+let elementPush;
			
 
				+
			
 
				+while (elementPush !== null) {
			
 
				+    elementPush = prompt("Enter element: ");
			
 
				+
			
 
				+    if (elementPush === null) {
			
 
				+        break;
			
 
				+    }
			
 
				+
			
 
				+    arrayValue.push(elementPush);
			
 
				+}
			
 
				+console.log(arrayValue);
			
 
				+
			
 
				+// array fill nopush
			
 
				+let elementAdd = [];
			
 
				+
			
 
				+for (let i = 0, j; j !== null; i++) {
			
 
				+    j = prompt("Enter element: ");
			
 
				+
			
 
				+    if (j === null) {
			
 
				+        break;
			
 
				+    }
			
 
				+
			
 
				+    elementAdd[i] = j;
			
 
				+}
			
 
				+console.log(elementAdd);
			
 
				+
			
 
				+// infinite probability
			
 
				+var i = 0;
			
 
				+while (true) {
			
 
				+    if (Math.random() > 0.9) {
			
 
				+    alert(++i);
			
 
				+    break;
			
 
				+    }
			
 
				+    else i++;
			
 
				+}
			
 
				+
			
 
				+// empty loop
			
 
				+let choiceUser;
			
 
				+do {
			
 
				+    choiceUser = prompt("ОK или Отмена?");
			
 
				+} while (choiceUser != "");
			
 
				+
			
 
				+// progression sum
			
 
				+var functionResult = '';
			
 
				+n = +prompt("Введите N:");
			
 
				+for (let i=1; i<=n; i= i+3) {
			
 
				+functionResult = functionResult + i + ' ';
			
 
				+}
			
 
				+console.log(functionResult);
			
 
				+
			
 
				+// chess one line
			
 
				+let str = ' ';
			
 
				+
			
 
				+for (let i = 0;i<10;i++)
			
 
				+  if (i % 2 === 1) {
			
 
				+        str += ' '
			
 
				+    }
			
 
				+    else {
			
 
				+        str += '#'
			
 
				+    }
			
 
				+" # # # # # "
			
 
				+// or
			
 
				+let str = ' ';
			
 
				+
			
 
				+for(let i = 0;i<10;i++)
			
 
				+  if (i % 2 === 0) {
			
 
				+        str += '#'
			
 
				+    }
			
 
				+    else {
			
 
				+        str += ' '
			
 
				+    }
			
 
				+" # # # # # "
			
 
				+
			
 
				+// numbers
			
 
				+let str = '';
			
 
				+
			
 
				+for (let i=0;i<10;i++) {
			
 
				+	for (j=0;j<10;j++) {
			
 
				+		str += String(j); //or new String - преобразовано в строку с помощью глобального объекта напрямую
			
 
				+	}
			
 
				+    str += "\n";
			
 
				+}
			
 
				+console.log(str);
			
 
				+
			
 
				+// chess 1
			
 
				+let a=12, b=10, str=''; // b-строки, a-символы, размер доски можно легко менять - изменяя значения a и b
			
 
				+while (b--) str += (b%2?'#.':'.#').repeat(a/2)+((a%2)?b%2?'#':'.':'')+'\n';
			
 
				+console.log(str);
			
 
				+
			
 
				+// cubes
			
 
				+let enteredValue = prompt("Укажите число N для вычисления куба: ");
			
 
				+let arrayValue = [];
			
 
				+
			
 
				+for (let i = 0; i < enteredValue; i++) {
			
 
				+    arrayValue[i] = Math.pow(i, 3);
			
 
				+}
			
 
				+console.log(arrayValue);
			
 
				+
			
 
				+// multiply table
			
 
				+var result = 'x ';
			
 
				+for (var i = 0; i < 11; i++) {
			
 
				+
			
 
				+    for (var j = 0; j < 11; j++) {
			
 
				+
			
 
				+        if (i == 0 && j > 0) {
			
 
				+          result += '[' + j + ']';
			
 
				+        } 
			
 
				+        else if (j == 0 && i>0) {
			
 
				+          result += '[' + i + '] ';
			
 
				+        } 
			
 
				+        else if (i>0 && j>0) {
			
 
				+        result += (i*j) + ' ';
			
 
				+        }
			
 
				+    }
			
 
				+    result += '\n'
			
 
				+}
			
 
				+alert(result);
			
 
				+
			
 
				+// matrix to html table
			
 
				+//Решение в html - зайти в html - Open with Live Server//
			
 
				+
			
 
				+// Задание на синий пояс: Треугольник
			
 
				+
			
 
				+// option 1
			
 
				+function pyramid(n){
			
 
				+    for (let i=1; i<= n; i++) {
			
 
				+    let str = '.'.repeat(n-i);
			
 
				+    let str2 = '#'. repeat(i*2 -1);
			
 
				+    console.log(str + str2 + str);
			
 
				+    }
			
 
				+}
			
 
				+pyramid(6);
			
 
				+
			
 
				+// option 2
			
 
				+var lines = line = 6;
			
 
				+a='.';
			
 
				+b='#';
			
 
				+while (line-->0) console.log(Array(line+1).join(a) +Array(2*(lines-line)).join(b) +Array(line+1).join(a));
			
--- a/js22-JSX/js05/index.html
+++ b/js22-JSX/js05/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW5</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js05/js/main.js
+++ b/js22-JSX/js05/js/main.js
@@ -0,0 +1,309 @@
 
				+// 3 persons
			
 
				+// array 1
			
 
				+var a = {
			
 
				+    name: "Ivan",
			
 
				+    surname: "Ivanov",
			
 
				+}
			
 
				+
			
 
				+// array 2
			
 
				+var b = {
			
 
				+    name: "Taras",
			
 
				+    surname: "Tarasov",
			
 
				+}
			
 
				+
			
 
				+// array 3
			
 
				+var c = {
			
 
				+    name: "Petro",
			
 
				+    surname: "Petrov",
			
 
				+}
			
 
				+
			
 
				+// different fields
			
 
				+a.age = 33,
			
 
				+b.sex = "male",
			
 
				+c.fathername = "Petrovi4"
			
 
				+
			
 
				+// fields check
			
 
				+// option 1
			
 
				+let optionalField = ["age", "sex", "fathername"];
			
 
				+let choiceArray = prompt("Выберите массив a, b, c: ");
			
 
				+
			
 
				+if (choiceArray === "a") {
			
 
				+    for (let i of optionalField) {
			
 
				+        if(i in a) {
			
 
				+            alert("Необязательное после для массива а: " + i);
			
 
				+        }
			
 
				+    } 
			
 
				+} 
			
 
				+else if (choiceArray === "b") {
			
 
				+    for (let i of optionalField) {
			
 
				+        if(i in b) {
			
 
				+            alert("Необязательное после для массива b: " + i);
			
 
				+        }
			
 
				+    } 
			
 
				+} else if (choiceArray === "c") {
			
 
				+    for (let i of optionalField) {
			
 
				+        if(i in c) {
			
 
				+            alert("Необязательное после для массива c: " + i);
			
 
				+        }
			
 
				+    } 
			
 
				+} else {
			
 
				+    alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// option 2
			
 
				+let choiceArray = prompt("Выберите массив a, b, c: ");
			
 
				+let choiceArray1 = 'a';
			
 
				+let choiceArray2 = 'b';
			
 
				+let choiceArray3 = 'c';
			
 
				+
			
 
				+if(choiceArray === choiceArray1) {
			
 
				+    alert("Необязательное после для массива а: age");
			
 
				+} else if(choiceArray === choiceArray2) {
			
 
				+    alert("Необязательное после для массива b: sex");
			
 
				+} else if(choiceArray === choiceArray3) {
			
 
				+    alert("Необязательное после для массива c: fathername");
			
 
				+} else {
			
 
				+    alert("Ошибка!");
			
 
				+}
			
 
				+
			
 
				+// array of persons
			
 
				+let persons = ['a', 'b', 'c'];
			
 
				+
			
 
				+let a = { 
			
 
				+    name: "Ivan", 
			
 
				+    surname: "Ivanov" 
			
 
				+}
			
 
				+let b = { 
			
 
				+    name: "Taras", 
			
 
				+    surname: "Tarasov" 
			
 
				+}
			
 
				+let c = { 
			
 
				+    name: "Petro", 
			
 
				+    surname: "Petrov" 
			
 
				+}
			
 
				+
			
 
				+persons.a = { name: "Ivan", surname: "Ivanov"};
			
 
				+persons.b = { name: "Taras", surname: "Tarasov"};
			
 
				+persons.c = { name: "Petro", surname: "Petrov"};
			
 
				+
			
 
				+// loop of persons
			
 
				+for (let i in persons) {
			
 
				+    console.log(persons[i]);
			
 
				+}
			
 
				+
			
 
				+// loop of name and surname
			
 
				+for (var key in persons) {
			
 
				+    console.log(persons[key]);
			
 
				+}
			
 
				+// or
			
 
				+for (let i in persons) {
			
 
				+    console.log(persons[i]["name"], persons[i]["surname"]);
			
 
				+}
			
 
				+
			
 
				+// loop of loop of values
			
 
				+for (let i in persons) {
			
 
				+    for (let j in persons[i]) {
			
 
				+        console.log(persons[i][j]);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// fullName
			
 
				+for (let i in persons) {
			
 
				+    if (persons[i]["fathername"]) {
			
 
				+        persons[i].fullName = persons[i]["name"] + persons[i]["fathername"] + persons[i]["surname"];
			
 
				+    } else {
			
 
				+        persons[i].fullName = persons[i]["name"] + persons[i]["surname"];
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// serialize
			
 
				+let changeLine = JSON.strigify(persons);
			
 
				+console.log(changeLine);
			
 
				+
			
 
				+// deserialize
			
 
				+let changeArray = JSON.parse("[{\"name\":\"Ivan\",\"surname\":\"Ivanov\",\"age\":33,\"fullName\":\"IvanIvanov\"]");
			
 
				+changeArray.push(persons);
			
 
				+console.log(changeArray);
			
 
				+
			
 
				+// HTML
			
 
				+//
			
 
				+let persons = ['a', 'b', 'c'];
			
 
				+
			
 
				+let a = { 
			
 
				+    name: "Ivan", 
			
 
				+    surname: "Ivanov",
			
 
				+}
			
 
				+let b = { 
			
 
				+    name: "Taras", 
			
 
				+    surname: "Tarasov",
			
 
				+}
			
 
				+let c = { 
			
 
				+    name: "Petro", 
			
 
				+    surname: "Petrov",
			
 
				+}
			
 
				+
			
 
				+persons = [a, b, c];
			
 
				+
			
 
				+//
			
 
				+var str = "<table border='1'>"
			
 
				+str += "<tr><th>Persons</th><th>name</th><th>surname</th></tr>"
			
 
				+for(let i = 0; i < persons.length; i++) {
			
 
				+    if(i % 2 == 1) {
			
 
				+        str += `<tr><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>`
			
 
				+    }
			
 
				+    else {
			
 
				+        str += `<tr><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>`
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+str += "</table>"
			
 
				+document.write(str)
			
 
				+
			
 
				+// HTML optional fields
			
 
				+//
			
 
				+let persons = ['a', 'b', 'c'];
			
 
				+
			
 
				+let a = { 
			
 
				+    name: "Ivan", 
			
 
				+    surname: "Ivanov",
			
 
				+    age: 33,
			
 
				+}
			
 
				+let b = { 
			
 
				+    name: "Taras", 
			
 
				+    surname: "Tarasov",
			
 
				+    sex: "male",
			
 
				+}
			
 
				+let c = { 
			
 
				+    name: "Petro", 
			
 
				+    surname: "Petrov",
			
 
				+    fathername: "Petrovi4",
			
 
				+}
			
 
				+
			
 
				+persons = [a, b, c];
			
 
				+
			
 
				+//
			
 
				+let str = "<table border='1'>"
			
 
				+str += "<tr><th>Persons</th><th>name</th><th>surname</th><th>age</th><th>fathername</th><th>sex</th></tr>"
			
 
				+for(let i = 0; i < persons.length; i++) {
			
 
				+    if(i % 2 == 1) {
			
 
				+        str += `<tr><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>
			
 
				+        <td>${persons[i]["age"]}</td>
			
 
				+        <td>${persons[i]["fathername"]}</td>
			
 
				+        <td>${persons[i]["sex"]}</td></tr>`
			
 
				+    }
			
 
				+    else {
			
 
				+        str += `<tr><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>
			
 
				+        <td>${persons[i]["age"]}</td>
			
 
				+        <td>${persons[i]["fathername"]}</td>
			
 
				+        <td>${persons[i]["sex"]}</td></tr>`
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+str += "</table>"
			
 
				+document.write(str)
			
 
				+
			
 
				+// HTML tr color
			
 
				+let str = "<table border='1'>"
			
 
				+str += "<tr><th>Persons</th><th>name</th><th>surname</th><th>age</th><th>fathername</th><th>sex</th></tr>"
			
 
				+for(let i = 0; i < persons.length; i++) {
			
 
				+    if(i % 2 == 1) {
			
 
				+        str += `<tr style='background: cyan'><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>
			
 
				+        <td>${persons[i]["age"]}</td>
			
 
				+        <td>${persons[i]["fathername"]}</td>
			
 
				+        <td>${persons[i]["sex"]}</td></tr>`
			
 
				+    }
			
 
				+    else {
			
 
				+        str += `<tr style='background: yellow'><td>${i}</td>
			
 
				+        <td>${persons[i]["name"]}</td>
			
 
				+        <td>${persons[i]["surname"]}</td>
			
 
				+        <td>${persons[i]["age"]}</td>
			
 
				+        <td>${persons[i]["fathername"]}</td>
			
 
				+        <td>${persons[i]["sex"]}</td></tr>`
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+str += "</table>"
			
 
				+document.write(str)
			
 
				+
			
 
				+// Задание на синий пояс.
			
 
				+var someTree = {
			
 
				+    tagName: "table",
			
 
				+    subTags: [{
			
 
				+        tagName: "tr",
			
 
				+        subTags: [{
			
 
				+            tagName: "td",
			
 
				+            text: "some text"
			
 
				+        }, {
			
 
				+            tagName: "td",
			
 
				+            text: "some text 2"
			
 
				+        }]
			
 
				+    }],
			
 
				+    attrs: {
			
 
				+        border: 1
			
 
				+    }
			
 
				+}
			
 
				+    
			
 
				+function createElem(tagName, attrs, text) {
			
 
				+    var elem = document.createElement(tagName);
			
 
				+    if (attrs)
			
 
				+        for (var name in attrs) elem.setAttribute(name, attrs[name]);
			
 
				+    if (text) elem.textContent = text;
			
 
				+    return elem
			
 
				+}
			
 
				+    
			
 
				+function walker(tree) {
			
 
				+    var tagName = tree.tagName,
			
 
				+        attrs = tree.attrs,
			
 
				+        text = tree.text,
			
 
				+        elem = createElem(tagName, attrs, text);
			
 
				+    if (tree.subTags) tree.subTags.forEach(function(el) {
			
 
				+        el = walker(el);
			
 
				+        elem.appendChild(el)
			
 
				+    });
			
 
				+    return elem
			
 
				+}
			
 
				+
			
 
				+var table = walker(someTree);
			
 
				+document.body.appendChild(table);
			
 
				+
			
 
				+// destruct array
			
 
				+let arr = [1,2,3,4,5, "a", "b", "c"];
			
 
				+let [odd1, odd2, odd3] = arr.filter(item => item%2);
			
 
				+let [even1, even2] = arr.filter(item => !(item%2));
			
 
				+let other = ["a", "b", "c"];
			
 
				+
			
 
				+// or
			
 
				+let arr = [1,2,3,4,5, "a", "b", "c"];
			
 
				+let [odd1, even1, odd2, even2, odd3, ...other] = arr;
			
 
				+
			
 
				+// or
			
 
				+let [odd1, even1, odd2, even2, odd3, ...other] = new Set([1,2,3,4,5, "a", "b", "c"]);
			
 
				+
			
 
				+// destruct string
			
 
				+let arr = [1, "abc"];
			
 
				+let [number, [s1, s2, s3]] = arr;
			
 
				+console.log(number, s1, s2,s3);
			
 
				+
			
 
				+// destruct 2
			
 
				+let obj = {name: 'Ivan',
			
 
				+           surname: 'Petrov',
			
 
				+           children: [{name: 'Maria'}, {name: 'Nikolay'}]}
			
 
				+
			
 
				+let name1 = obj.children[0];
			
 
				+let name2 = obj.children[1];
			
 
				+
			
 
				+// destruct 3
			
 
				+let arr = [1,2,3,4, 5,6,7,10];
			
 
				+let a = arr[0];
			
 
				+let b = arr[1];
			
 
				+let length = arr.length;
			
--- a/js22-JSX/js06/index.html
+++ b/js22-JSX/js06/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW6</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js06/js/main.js
+++ b/js22-JSX/js06/js/main.js
@@ -0,0 +1,176 @@
 
				+// a
			
 
				+function a(text) {
			
 
				+    alert(text);
			
 
				+}
			
 
				+a("Привет!");
			
 
				+
			
 
				+// cube
			
 
				+function cube(a) {
			
 
				+    let cube = a * a * a;
			
 
				+    return cube;
			
 
				+}
			
 
				+cube();
			
 
				+
			
 
				+// or
			
 
				+var cube = (a) => a * a * a;
			
 
				+
			
 
				+// avg2
			
 
				+function avg2(a, b) {
			
 
				+    let avg2 = (a + b) / 2;
			
 
				+    return avg2;
			
 
				+}
			
 
				+avg2(a, b); // где a и b любые числа
			
 
				+
			
 
				+// or
			
 
				+var avg2 = (a, b) => (a + b) / 2;
			
 
				+
			
 
				+// sum3
			
 
				+function sum3(a = 0, b = 0, c = 0) {
			
 
				+    let sum3 = a + b + c;
			
 
				+    return sum3;
			
 
				+}
			
 
				+sum3();
			
 
				+
			
 
				+// or
			
 
				+var sum3 = (a = 0, b = 0, c = 0) => a + b + c; 
			
 
				+
			
 
				+// sum3 от двух параметров тоже работает корректно - благодаря заранее указанному возможному варианту, что число будет равно 0, следовательно другими словами, что число может и вовсе отсутствовать
			
 
				+
			
 
				+// intRandom
			
 
				+function intRandom(a = 0, b = 0) {
			
 
				+    return Math.round(Math.random() * (b - a)) + a;
			
 
				+}
			
 
				+
			
 
				+// or
			
 
				+var intRandom = (a = 0, b = 0) => Math.round(Math.random() * (b - a)) + a;
			
 
				+
			
 
				+// greetAll
			
 
				+function greetAll() {
			
 
				+    let str = [];
			
 
				+    for (let i = 0; i < arguments.length;i++) {
			
 
				+       str.push(' ' + arguments[i]);
			
 
				+    }
			
 
				+    alert('"' + 'Hello' + ' ' + str + '"');
			
 
				+}
			
 
				+
			
 
				+// sum
			
 
				+function sum() {
			
 
				+    let sum = 0;
			
 
				+    for (let i = 0; i < arguments.length;i++) {
			
 
				+        sum += arguments[i];
			
 
				+    }
			
 
				+    return sum;
			
 
				+}
			
 
				+
			
 
				+// Union
			
 
				+// Исходные функции(дублирую, чтобы было удобно скопировать и вставить в консоль для проверки)
			
 
				+function a(text) {
			
 
				+    alert(text);
			
 
				+}
			
 
				+
			
 
				+function cube(a) {
			
 
				+    let cube = a * a * a;
			
 
				+    return cube;
			
 
				+}
			
 
				+
			
 
				+function avg2(a, b) {
			
 
				+    let avg2 = (a + b) / 2;
			
 
				+    return avg2;
			
 
				+}
			
 
				+
			
 
				+function sum3Sample() {
			
 
				+    function sum3(a = 0, b = 0, c = 0) {
			
 
				+        let sum3 = a + b + c;
			
 
				+        return sum3;
			
 
				+    }
			
 
				+    alert(sum3(1, 2, 3)); // => 6
			
 
				+}
			
 
				+
			
 
				+function sum3(a = 0, b = 0, c = 0) {
			
 
				+    let sum3 = a + b + c;
			
 
				+    return sum3;
			
 
				+}
			
 
				+
			
 
				+function intRandom(a = 0, b = 0) {
			
 
				+    return Math.round(Math.random() * (b - a)) + a;
			
 
				+}
			
 
				+
			
 
				+function greetAll() {
			
 
				+    let str = [];
			
 
				+    for (let i = 0; i < arguments.length;i++) {
			
 
				+       str.push(' ' + arguments[i]);
			
 
				+    }
			
 
				+    alert('"' + 'Hello' + ' ' + str + '"');
			
 
				+}
			
 
				+
			
 
				+function sum() {
			
 
				+    let sum = 0;
			
 
				+    for (let i = 0; i < arguments.length;i++) {
			
 
				+        sum += arguments[i];
			
 
				+    }
			
 
				+    return sum;
			
 
				+}
			
 
				+
			
 
				+// Функции для массива
			
 
				+function aSample() {
			
 
				+    a("Привет!"); // вызывает alert("Привет!")
			
 
				+}
			
 
				+
			
 
				+function cubeSample() {
			
 
				+    a(cube(5)); // => 125
			
 
				+}
			
 
				+
			
 
				+function avg2Sample() {
			
 
				+    a(avg2(1, 2)); // возвращает 1.5
			
 
				+}
			
 
				+
			
 
				+function sum3Sample() {
			
 
				+    a(sum3(1, 2, 3)); // => 6
			
 
				+}
			
 
				+
			
 
				+function intRandomSample() {
			
 
				+    a(intRandom(-1, -1)); // вернет -1
			
 
				+}
			
 
				+
			
 
				+function greetAllSample() {
			
 
				+    greetAll("Superman"); // выводит alert "Hello Superman" 
			
 
				+}
			
 
				+
			
 
				+function sumSample() {
			
 
				+    a(sum(10, 20, 40, 100)); // => 170
			
 
				+}
			
 
				+
			
 
				+// switch 
			
 
				+var sample = prompt("Введите название задания: ");
			
 
				+
			
 
				+switch (sample.toLowerCase()) {
			
 
				+    case "a": aSample();
			
 
				+        break;
			
 
				+    case "cube": cubeSample();
			
 
				+        break;
			
 
				+    case "avg2": avg2Sample();
			
 
				+        break;
			
 
				+    case "sum3": sum3Sample();
			
 
				+        break;
			
 
				+    case "intrandom": intRandomSample();
			
 
				+        break;
			
 
				+    case "greetall": greetAllSample();
			
 
				+        break;
			
 
				+    case "sum": sumSample();
			
 
				+        break;
			
 
				+        default: alert("Ошибка!");
			
 
				+} 
			
 
				+
			
 
				+//вывод результата вызова функции с помощью alert  
			
 
				+
			
 
				+// Union declarative
			
 
				+var associativeArrays = {
			
 
				+    a: () => aSample(),
			
 
				+    cube: () => cubeSample(),
			
 
				+    avg2: () => avg2Sample(),
			
 
				+    sum3: () => sum3Sample(),
			
 
				+    intrandom: () => intRandomSample(),
			
 
				+    greetall: () => greetAllSample(),
			
 
				+    sum: () => sumSample(),
			
 
				+}
			
 
				+associativeArrays[prompt("Введите название задания: ")] ();
			
--- a/js22-JSX/js07/css/style.css
+++ b/js22-JSX/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;
			
 
				+}
			
--- a/js22-JSX/js07/index.html
+++ b/js22-JSX/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>
			
--- a/js22-JSX/js07/js/main.js
+++ b/js22-JSX/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
			
--- a/js22-JSX/js08/index.html
+++ b/js22-JSX/js08/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW8</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js08/js/main.js
+++ b/js22-JSX/js08/js/main.js
@@ -0,0 +1,130 @@
 
				+// ES6
			
 
				+// a
			
 
				+let a = text => alert(text);
			
 
				+
			
 
				+// cube
			
 
				+let cube = (a) => a * a * a;
			
 
				+
			
 
				+// avg2
			
 
				+let avg2 = (a, b) => (a + b) / 2;
			
 
				+
			
 
				+// sum3
			
 
				+let sum3 = (a = 0, b = 0, c = 0) => a + b + c; 
			
 
				+
			
 
				+// intRandom
			
 
				+let intRandom = (a = 0, b = 0) => Math.round(Math.random() * (b - a)) + a;
			
 
				+
			
 
				+// greetAll
			
 
				+let greetAll = (...arguments) => {
			
 
				+    for (let i in arguments) {
			
 
				+        alert('"' + 'Hello' + ' ' + arguments[i] + '"');
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// sum
			
 
				+let sum = (...arguments) => {
			
 
				+    let sum = 0;
			
 
				+    for (let i = 0; i < arguments.length;i++) {
			
 
				+        sum += arguments[i];
			
 
				+    }
			
 
				+    return sum;
			
 
				+}
			
 
				+
			
 
				+// sort
			
 
				+function byField(field, order) {
			
 
				+    let collator = new Intl.Collator(["en", "ru"], {
			
 
				+        numeric: true
			
 
				+    })
			
 
				+    order = order ? 1 : -1;
			
 
				+    return function(a, b) {
			
 
				+        return order * collator.compare(a[field], b[field]);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+let users = [{
			
 
				+    name: "Иван",
			
 
				+    age: 17,
			
 
				+}, {
			
 
				+    name: "Мария",
			
 
				+    age: 35,
			
 
				+}, {
			
 
				+    name: "Алексей",
			
 
				+    age: 73,
			
 
				+}, {
			
 
				+    name: "Яков",
			
 
				+    age: 12,
			
 
				+}]
			
 
				+
			
 
				+users.sort(byField('age', true));  //сортирует по возрасту по возрастанию
			
 
				+users.sort(byField('name', true)); //сортирует по имени по убыванию
			
 
				+
			
 
				+// array map
			
 
				+let Array = ["1", {}, null, undefined, "500", 700];
			
 
				+
			
 
				+let result  = Array.map(function(item) {
			
 
				+    let number = parseInt(item);
			
 
				+  return isNaN(number)? item : number;
			
 
				+})
			
 
				+
			
 
				+console.log(result);
			
 
				+
			
 
				+// array reduce
			
 
				+let arr = ["0", 5, 3, "string", null];
			
 
				+let result = arr.reduce(function(previousValue, currentValue) {
			
 
				+return typeof currentValue == 'number' ? previousValue * currentValue : previousValue;
			
 
				+},1);
			
 
				+console.log(result);
			
 
				+
			
 
				+// object filter
			
 
				+function filter(obj, callback) {
			
 
				+    let mainObj = {};
			
 
				+        for(let key in obj) {
			
 
				+            if (callback(key, obj[key])) {
			
 
				+                mainObj[key] = obj[key];
			
 
				+            }
			
 
				+        }
			
 
				+        return mainObj;
			
 
				+    }
			
 
				+
			
 
				+    let phone = {
			
 
				+        brand: "meizu",
			
 
				+        model: "m2",
			
 
				+        ram: 2,
			
 
				+        color: "black",
			
 
				+    }
			
 
				+
			
 
				+let outcome = filter(phone,(key,value) => key == "color" || value == 2);
			
 
				+console.log(outcome);
			
 
				+
			
 
				+// object map
			
 
				+function map(object, callback) {
			
 
				+    let obj = {};
			
 
				+        for(let key in object)
			
 
				+        Object.assign(obj,callback(key, object[key]));
			
 
				+        return obj;
			
 
				+    }
			
 
				+    let obj = map({name: 'Иван', age: 17}, function(key, value) {
			
 
				+        let result = {};
			
 
				+        result[key+"_"] = value + "$";
			
 
				+        return result;
			
 
				+    })
			
 
				+
			
 
				+console.log(obj);
			
 
				+//возвращает {name_: "Иван$", age_: "17$"}
			
 
				+
			
 
				+// Sum
			
 
				+// pешение с помощью цикла
			
 
				+function sum(n) {
			
 
				+    let	sum = 0;
			
 
				+    for (let i = 1;i <= n;i++) {
			
 
				+        sum += i;
			
 
				+    }
			
 
				+    return sum;
			
 
				+}
			
 
				+
			
 
				+// or
			
 
				+// pешение через рекурсию
			
 
				+function sum(n) {
			
 
				+    if (n == 1) return 1;
			
 
				+    return n + sumTo(n - 1);
			
 
				+}
			
--- a/js22-JSX/js09/css/style.css
+++ b/js22-JSX/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;
			
 
				+}
			
--- a/js22-JSX/js09/index.html
+++ b/js22-JSX/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>
			
--- a/js22-JSX/js09/js/main.js
+++ b/js22-JSX/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);
			
--- a/js22-JSX/js10-change/index.html
+++ b/js22-JSX/js10-change/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW10</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js10-change/js/main.js
+++ b/js22-JSX/js10-change/js/main.js
@@ -0,0 +1,108 @@
 
				+// makeProfileTimer
			
 
				+function makeProfileTimer() {
			
 
				+    let prevTime = performance.now();
			
 
				+    function changeTime() {
			
 
				+        let nextTime = performance.now();
			
 
				+        return ('Время выполнения alert: ' + (nextTime - prevTime));
			
 
				+    } 
			
 
				+    return changeTime;
			
 
				+}
			
 
				+
			
 
				+let timer = makeProfileTimer()
			
 
				+alert('Замеряем время работы этого alert');  
			
 
				+alert(timer())
			
 
				+
			
 
				+// or
			
 
				+function makeProfileTimer() {
			
 
				+    alert('Замеряем время работы этого alert');
			
 
				+}
			
 
				+
			
 
				+console.time('FirstWay');
			
 
				+makeProfileTimer();
			
 
				+console.timeEnd('FirstWay');
			
 
				+
			
 
				+// makeSaver
			
 
				+function makeSaver(f) {
			
 
				+    let start = false;
			
 
				+    let result;
			
 
				+    return () => {
			
 
				+        if (start === false) {
			
 
				+            result = f();
			
 
				+            start = true;
			
 
				+        }
			
 
				+        return result;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+let nameSarver = makeSaver(() => prompt('Введите имя'))
			
 
				+alert('Имя еще не спрашивали')
			
 
				+let name1 = nameSarver()
			
 
				+alert('Тока шо спросили имя')
			
 
				+let name2 = nameSarver()
			
 
				+alert('Два раза спрашивать имя - значит склероз')
			
 
				+alert('Привет, ' + name1 + ((name1 === name2) ? '. Задача решена' : 'Какая-то дичь'))
			
 
				+
			
 
				+var saver = makeSaver(Math.random)                 
			
 
				+    var value1 = saver()           
			
 
				+    var value2 = saver()                         
			
 
				+    value1 === value2  // всегда true
			
 
				+
			
 
				+    var saver2 = makeSaver(() => console.log('saved function called') || [null, undefined, false, '', 0, Math.random()][Math.ceil(Math.random()*6)])
			
 
				+    var value3 = saver2()
			
 
				+    var value4 = saver2()
			
 
				+
			
 
				+    value3 === value4 // тоже должно быть true
			
 
				+
			
 
				+// Final Countdown
			
 
				+function SelfInvoked() {
			
 
				+    let countdown = 5;
			
 
				+    
			
 
				+    function t() {
			
 
				+        console.log(countdown--);
			
 
				+        setTimeout(() => console.log('поехали!'), 5000);
			
 
				+
			
 
				+    if(!countdown)
			
 
				+        clearInterval(timer);
			
 
				+    }
			
 
				+
			
 
				+    let timer = setInterval(t, 1000);
			
 
				+}
			
 
				+
			
 
				+SelfInvoked() // запуск функции
			
 
				+5 //пауза 1 секунда
			
 
				+4 //пауза 1 секунда
			
 
				+3 //пауза 1 секунда
			
 
				+2 //пауза 1 секунда
			
 
				+1 //пауза 1 секунда
			
 
				+// поехали!
			
 
				+
			
 
				+// myBind
			
 
				+// решение
			
 
				+function myBind (func, context, args) {
			
 
				+    return (...params) => {
			
 
				+        let defaultValue = 0;
			
 
				+        let newArgs = args.map((i) => (i === undefined ? params[defaultValue++] : i));
			
 
				+        return func.call(context, ... newArgs);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// условие
			
 
				+var pow5 = myBind(Math.pow, Math, [undefined, 5]) // первый параметр - функция для биндинга значений по умолчанию, 
			
 
				+                                                  // второй - this для этой функции, третий - массив, в котором undefined означает
			
 
				+                                                  // параметры, которые должны передаваться при вызове,
			
 
				+                                                  // а другие значения являются значениями по умолчанию:
			
 
				+var cube = myBind(Math.pow, Math, [undefined, 3]) // cube возводит число в куб
			
 
				+
			
 
				+pow5(2) // => 32, вызывает Math.pow(2,5), соотнесите с [undefined, 5]
			
 
				+cube(3) // => 27
			
 
				+
			
 
				+var chessMin = myBind(Math.min, Math, [undefined, 4, undefined, 5,undefined, 8,undefined, 9])
			
 
				+chessMin(-1,-5,3,15) // вызывает Math.min(-1, 4, -5, 5, 3, 8, 15, 9), результат -5
			
 
				+
			
 
				+var zeroPrompt = myBind(prompt, window, [undefined, "0"]) // аналогично, только теперь задается "0" как текст по умолчанию в prompt, 
			
 
				+                                                          // а текст приглашения пользователя задается при вызове zeroPrompt
			
 
				+var someNumber = zeroPrompt("Введите число")              // вызывает prompt("Введите число","0")
			
 
				+
			
 
				+myBind((...params) => params.join(''), null, [undefined, 'b', undefined, undefined, 'e', 'f'])('a','c','d') === 'abcdef'
			
 
				+
			
 
				+    
			
--- a/js22-JSX/js11/css/style.css
+++ b/js22-JSX/js11/css/style.css
@@ -0,0 +1,3 @@
 
				+body {
			
 
				+    color: blue;
			
 
				+}
			
--- a/js22-JSX/js11/index.html
+++ b/js22-JSX/js11/index.html
@@ -0,0 +1,26 @@
 
				+<!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>HW11</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="thepassword">
			
 
				+        <input type="password" class="password" placeholder="Password">
			
 
				+        <label >
			
 
				+            <input type="checkbox" class="show-password"> See the password
			
 
				+        </label>
			
 
				+    </div>
			
 
				+    <div>
			
 
				+        <form name="theform" style="margin-top: 30px">
			
 
				+            <input type="text"  placeholder="Login" onKeyup="checkform()" />
			
 
				+            <input type="text"  placeholder="Password" onKeyup="checkform()" />
			
 
				+            <input id="submitbutton" type="submit" disabled="disabled" value="Button" />
			
 
				+        </form>
			
 
				+    </div>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js11/js/main.js
+++ b/js22-JSX/js11/js/main.js
@@ -0,0 +1,250 @@
 
				+// Password
			
 
				+
			
 
				+function Password(parent, open) {
			
 
				+
			
 
				+    let input = document.createElement('input')
			
 
				+    input.style.marginTop = '30px'
			
 
				+    parent.append(input)
			
 
				+
			
 
				+    let checkbox = document.createElement('input')
			
 
				+    checkbox.setAttribute('type', 'checkbox')
			
 
				+    parent.append(checkbox)
			
 
				+
			
 
				+    let content = document.createElement('span')
			
 
				+    content.append('See the password')
			
 
				+    content.style.color = 'blue'
			
 
				+    parent.append(content)
			
 
				+
			
 
				+    this.setValue = (text) => input.value = text
			
 
				+    
			
 
				+    this.getValue = () => input.value
			
 
				+
			
 
				+    this.getOpen = () => input.type
			
 
				+
			
 
				+    checkbox.onclick = () => this.onOpenChange(input.type)
			
 
				+
			
 
				+    checkbox.oninput = () => this.onChange(input.type)
			
 
				+
			
 
				+    this.setOpen = function(open) {
			
 
				+        if(open === false) {
			
 
				+            input.type = 'password'
			
 
				+            checkbox.checked = false
			
 
				+            checkbox.onchange = function() {
			
 
				+                if (input.type === 'password') {
			
 
				+                    input.type = 'text'
			
 
				+                    console.log('Current input type is: ' + p.getOpen())
			
 
				+                } 
			
 
				+                else {
			
 
				+                    input.type = 'password'
			
 
				+                    console.log('Current input type is: ' + p.getOpen())
			
 
				+                }
			
 
				+            }
			
 
				+        } else {
			
 
				+            if (open === true) {
			
 
				+                input.type = 'text'
			
 
				+                checkbox.checked = true
			
 
				+                checkbox.onchange = function() {
			
 
				+                    if (input.type === 'text') {
			
 
				+                        input.type = 'password'
			
 
				+                    } 
			
 
				+                    else {
			
 
				+                        input.type = 'text'
			
 
				+                    }
			
 
				+                }
			
 
				+            } 
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+let p = new Password(document.body, true)
			
 
				+
			
 
				+p.onChange = () => {console.log('Input type is successfully changed, exact time of change is: ' + new Date())}
			
 
				+
			
 
				+p.onOpenChange = type => confirm('Current type : ' + type + '\n' + 'Cancel - leave type unchanged' + '\n' + 'OK - change type')
			
 
				+
			
 
				+p.setValue('qwerty')
			
 
				+console.log('Current password is: ' + p.getValue())
			
 
				+
			
 
				+p.setOpen(false)
			
 
				+console.log('Current type of input is: ' + p.getOpen())
			
 
				+
			
 
				+// p.setOpen(true)
			
 
				+// console.log(p.getOpen()) // for true
			
 
				+
			
 
				+// // // or
			
 
				+let showPassword = document.querySelectorAll('.show-password')
			
 
				+showPassword.forEach(item => item.addEventListener('click', toogleType))
			
 
				+function toogleType() {
			
 
				+    let input = this.closest('.thepassword').querySelector('.password')
			
 
				+    if(input.type === 'password') {
			
 
				+        input.type = 'text'
			
 
				+    } else {
			
 
				+        input.type = 'password'
			
 
				+    }
			
 
				+} // decided to leave that way too - input hide/show password without 'qwerty' by default
			
 
				+
			
 
				+// // // LoginForm
			
 
				+// // LoginForm Constructor
			
 
				+
			
 
				+function Loggin() {
			
 
				+    
			
 
				+    let loginForm = document.createElement('input')
			
 
				+    loginForm.setAttribute('placeholder', 'Login')
			
 
				+    loginForm.style.marginLeft = '10px'
			
 
				+    loginForm.style.marginRight = '4px'
			
 
				+    document.body.appendChild(loginForm)
			
 
				+
			
 
				+    let passwordForm = document.createElement('input')
			
 
				+    passwordForm.setAttribute('placeholder', 'Password')
			
 
				+    document.body.appendChild(passwordForm)
			
 
				+
			
 
				+    let button = document.createElement('button')
			
 
				+    button.style.marginLeft = '4px'
			
 
				+    button.textContent = 'Button'
			
 
				+    document.body.appendChild(button)
			
 
				+
			
 
				+    this.setInfo = () => [loginForm.value, passwordForm.value]
			
 
				+
			
 
				+    this.getLog = (log) => loginForm.value = log
			
 
				+    
			
 
				+    this.getPass = (pass) => passwordForm.value = pass
			
 
				+
			
 
				+    this.setForm = function() {
			
 
				+        button.disabled = true
			
 
				+        loginForm.oninput = passwordForm.oninput = () => {
			
 
				+            if(loginForm.value.length > 0 & passwordForm.value.length > 0){
			
 
				+                button.disabled = false
			
 
				+            }
			
 
				+            else {
			
 
				+                button.disabled = true
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+let l = new Loggin()
			
 
				+l.setForm()
			
 
				+l.getLog('') // any login
			
 
				+l.getPass('') // any password
			
 
				+console.log(l.setInfo()) // array of log and pass
			
 
				+
			
 
				+// for example
			
 
				+// l.getLog('qwerty')
			
 
				+// l.getPass('123') 
			
 
				+// console.log(l.setInfo()) // Array (2) ["qwerty", "123"]
			
 
				+
			
 
				+// // // // or
			
 
				+function checkform() {
			
 
				+    let f = document.forms['theform'].elements
			
 
				+    let cansubmit = true;
			
 
				+
			
 
				+    for (let i = 0; i < f.length; i++) {
			
 
				+        if (f[i].value.length == 0) {
			
 
				+            cansubmit = false
			
 
				+        }
			
 
				+    }
			
 
				+    if (cansubmit) {
			
 
				+        document.getElementById('submitbutton').disabled = false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// Password Verify
			
 
				+
			
 
				+// function Password(parent, open) {
			
 
				+//     let input1 = document.createElement('input')
			
 
				+//     parent.append(input1)
			
 
				+//     let checkbox = document.createElement('input')
			
 
				+//     checkbox.setAttribute('type', 'checkbox')
			
 
				+//     parent.append(checkbox)
			
 
				+//     let content = document.createElement('span')
			
 
				+//     content.append('See the password')
			
 
				+//     content.style.marginRight = '5px'
			
 
				+//     content.style.color = 'blue'
			
 
				+//     parent.append(content)
			
 
				+
			
 
				+//     let input2 = document.createElement('input')
			
 
				+//     parent.appendChild(input2)
			
 
				+//     let btn = document.createElement('button')
			
 
				+//     btn.textContent = 'Button'
			
 
				+//     parent.appendChild(btn)
			
 
				+
			
 
				+//     this.setValue = (text) => input1.value = text
			
 
				+
			
 
				+//     this.getValue = () => input1.value
			
 
				+
			
 
				+//     this.getOpen = () => input1.type
			
 
				+
			
 
				+//     checkbox.onclick = () => this.onOpenChange(input1.type)
			
 
				+
			
 
				+//     checkbox.oninput = () => this.onChange(input1.type)
			
 
				+
			
 
				+//     this.setOpen = function(open) {
			
 
				+//         if(open === false) {
			
 
				+//             input1.type = 'password'
			
 
				+//             checkbox.checked = false
			
 
				+//             checkbox.onchange = function() {
			
 
				+//                 if (input1.type === 'password') {
			
 
				+//                     input1.type = 'text'
			
 
				+//                     console.log('Current input type is: ' + p.getOpen())
			
 
				+//                 }
			
 
				+//                 else {
			
 
				+//                     input1.type = 'password'
			
 
				+//                     console.log('Current input type is: ' + p.getOpen())
			
 
				+//                 }
			
 
				+//                 if(input1.type === 'text') {
			
 
				+//                     input2.hidden = true
			
 
				+//                 }
			
 
				+//                 else if (input1.type === 'password') {
			
 
				+//                     input2.hidden = false
			
 
				+//                 }
			
 
				+//             }
			
 
				+//         }
			
 
				+//         else {
			
 
				+//             if (open === true) {
			
 
				+//                 input1.type = 'text'
			
 
				+//                 checkbox.checked = true
			
 
				+//                 checkbox.onchange = function() {
			
 
				+//                     if (input1.type === 'password') {
			
 
				+//                         input1.type = 'text'
			
 
				+//                     }
			
 
				+//                     else {
			
 
				+//                         input1.type = 'password'
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//             }
			
 
				+//         }
			
 
				+//     }
			
 
				+
			
 
				+//     this.passwordVerify = function() {
			
 
				+//         btn.disabled = true
			
 
				+//         input1.oninput = input2.oninput = () => {
			
 
				+//             if(input1.value === input2.value) {
			
 
				+//                 btn.disabled = false
			
 
				+//             }
			
 
				+//             else {
			
 
				+//                 btn.disabled = true
			
 
				+//             }
			
 
				+//         }
			
 
				+//     }
			
 
				+// }
			
 
				+
			
 
				+// let p = new Password(document.body, true)
			
 
				+
			
 
				+// p.onChange = () => {console.log('Input type is successfully changed, exact time of change is: ' + new Date())}
			
 
				+
			
 
				+// p.onOpenChange = type => confirm('Current type : ' + type + '\n' + 'Cancel - leave type unchanged' + '\n' + 'OK - change type and hide the second input')
			
 
				+
			
 
				+// p.setValue('qwerty')
			
 
				+// console.log('Current password is: ' + p.getValue())
			
 
				+
			
 
				+// p.setOpen(false)
			
 
				+// console.log('Current type of input is: ' + p.getOpen())
			
 
				+// p.passwordVerify()
			
 
				+
			
 
				+// // p.setOpen(true)
			
 
				+// // console.log(p.getOpen()) // for true
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
--- a/js22-JSX/js12/css/style.css
+++ b/js22-JSX/js12/css/style.css
@@ -0,0 +1,22 @@
 
				+body {

			
 
				+	background: url(../img/kiosk.jpg) no-repeat;

			
 
				+	background-color: rgb(211, 210, 204);

			
 
				+	margin-left: 830px;

			
 
				+}

			
 
				+

			
 
				+button {

			
 
				+	color: white;

			
 
				+	padding: 5px 5px;

			
 
				+	margin-top: 5px;

			
 
				+	margin-left: 2px;

			
 
				+	border-radius: 10px;

			
 
				+	letter-spacing: 2px;

			
 
				+	background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

			
 
				+	background-size: 200% auto;

			
 
				+	box-shadow: 0 0 20px rgba(0, 0, 0, .1);

			
 
				+	transition: .5s;

			
 
				+}

			
 
				+

			
 
				+button:hover {

			
 
				+	background-position: right center;

			
 
				+}
			
--- a/js22-JSX/js12/img/kiosk.jpg
+++ b/js22-JSX/js12/img/kiosk.jpg
--- a/js22-JSX/js12/index.html
+++ b/js22-JSX/js12/index.html
@@ -0,0 +1,14 @@
 
				+<!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>HW12</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="content"></div>
			
 
				+    <script src='js/redux.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js12/js/redux.js
+++ b/js22-JSX/js12/js/redux.js
@@ -0,0 +1,125 @@
 
				+function createStore(reducer){ 
			
 
				+    let state = reducer(undefined, {})
			
 
				+    let cbs   = []
			
 
				+    return {
			
 
				+        dispatch(action){
			
 
				+            const newState = reducer(state, action)
			
 
				+            if (newState !== state){
			
 
				+                state = newState
			
 
				+                for (let cb of cbs) 
			
 
				+                    cb()
			
 
				+            }
			
 
				+        },
			
 
				+        getState(){ 
			
 
				+            return state
			
 
				+        },
			
 
				+        subscribe(cb){
			
 
				+            cbs.push(cb)
			
 
				+            return () => cbs = cbs.filter(c => c !== cb) 
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function createKiosk(state){
			
 
				+    let div = document.getElementById('content')
			
 
				+    div.innerHTML = ''
			
 
				+    let hello = document.createElement('span')
			
 
				+    hello.innerHTML = 'ГАСТРОНОМ "У ЛЮСИ" <br />'
			
 
				+    hello.style.color = '#4B0082'
			
 
				+    div.appendChild(hello)
			
 
				+
			
 
				+    let pivo = document.createElement('span')
			
 
				+    pivo.innerHTML = `- Пивасик по ${state.пивасик.БАБЛО} грн,\n`
			
 
				+    div.appendChild(pivo)
			
 
				+    let pivoAmount = document.createElement('span')
			
 
				+    pivoAmount.innerHTML = `${state.пивасик.СКОКА}\n банок в наличии<br />`
			
 
				+    div.appendChild(pivoAmount)
			
 
				+
			
 
				+    let chips = document.createElement('span')
			
 
				+    chips.innerHTML = `- Чипсики по ${state.чипсики.БАБЛО} грн,\n`
			
 
				+    div.appendChild(chips)
			
 
				+    let chipsAmount = document.createElement('span')
			
 
				+    chipsAmount.innerHTML = `${state.чипсики.СКОКА}\n пачек в наличии<br />`
			
 
				+    div.appendChild(chipsAmount)
			
 
				+
			
 
				+    let cigi = document.createElement('span')
			
 
				+    cigi.innerHTML = `- Сиги по ${state.сиги.БАБЛО} грн,\n`
			
 
				+    div.appendChild(cigi)
			
 
				+    let cigiAmount = document.createElement('span')
			
 
				+    cigiAmount.innerHTML = `${state.сиги.СКОКА}\n пачек в наличии<br />`
			
 
				+    div.appendChild(cigiAmount)
			
 
				+
			
 
				+    let kassa = document.createElement('span')
			
 
				+    kassa.innerText = `- Бабосиков в кассе: ${state.касса} грн\n`
			
 
				+    div.appendChild(kassa)
			
 
				+    let select = document.createElement('select')
			
 
				+    div.appendChild(select)
			
 
				+
			
 
				+    let pruduct = document.createElement('option')
			
 
				+    pruduct.innerText = 'Выберите товар'
			
 
				+    select.appendChild(pruduct)
			
 
				+
			
 
				+    let pivasik = document.createElement('option')
			
 
				+    pivasik.innerText = 'пивасик'
			
 
				+    select.appendChild(pivasik)
			
 
				+
			
 
				+    let chipsiki = document.createElement('option')
			
 
				+    chipsiki.innerText = 'чипсики'
			
 
				+    select.appendChild(chipsiki)
			
 
				+
			
 
				+    let cigarette = document.createElement('option')
			
 
				+    cigarette.innerText = 'сиги'
			
 
				+    select.appendChild(cigarette)
			
 
				+
			
 
				+    let inputAmount = document.createElement('input')
			
 
				+    inputAmount.type = 'number'
			
 
				+    inputAmount.min = '1'
			
 
				+    div.appendChild(inputAmount)
			
 
				+
			
 
				+    let button = document.createElement('button')
			
 
				+    button.innerText = "Купить"
			
 
				+    div.appendChild(button)
			
 
				+
			
 
				+    button.onclick = () => {
			
 
				+        if(state[select.value].СКОКА >= inputAmount.value){
			
 
				+            let pieces = inputAmount.value
			
 
				+            let price = select.value       
			
 
				+            store.dispatch(купи(price, pieces))
			
 
				+        } else{
			
 
				+            alert("А ты не лопнишь, деточка?...ладно, шучу:D - такого количества товара в наличии попросту нет!")
			
 
				+        }  
			
 
				+    }   
			
 
				+    return state
			
 
				+}
			
 
				+
			
 
				+
			
 
				+function reducer(state, {type, ШО, СКОКА, БАБЛО}){
			
 
				+    if (!state){
			
 
				+        return {
			
 
				+            пивасик: {СКОКА: 100, БАБЛО: 30},
			
 
				+            чипсики: {СКОКА: 100, БАБЛО: 20},
			
 
				+            сиги: {СКОКА : 100, БАБЛО: 40},
			
 
				+            касса: 0
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    if (type === 'КУПИТЬ'){
			
 
				+        return {
			
 
				+            ...state,
			
 
				+            [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА},
			
 
				+            касса: state[ШО].БАБЛО * СКОКА + state.касса
			
 
				+        }
			
 
				+    }
			
 
				+    return state
			
 
				+}
			
 
				+
			
 
				+const store = createStore(reducer)
			
 
				+const unsubscribe1 = store.subscribe(() => console.log('подписчик 1', store.getState()))
			
 
				+const kiosk = store.subscribe(() => createKiosk(store.getState()))
			
 
				+const купиПивасик = СКОКА => ({type: 'КУПИТЬ', ШО: 'пивасик', СКОКА})
			
 
				+const купиЧипсики = СКОКА => ({type: 'КУПИТЬ', ШО: 'чипсики', СКОКА})
			
 
				+const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: 'сиги', СКОКА})
			
 
				+const купи = (ШО,СКОКА) => ({type: 'КУПИТЬ', ШО, СКОКА})
			
 
				+store.dispatch(купиЧипсики(0))
			
 
				+store.dispatch(купиПивасик(0))
			
 
				+store.dispatch(купиСиги(0))
			
--- a/js22-JSX/js13/index.html
+++ b/js22-JSX/js13/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW13</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js13/js/main.js
+++ b/js22-JSX/js13/js/main.js
@@ -0,0 +1,115 @@
 
				+// fetch basic
			
 
				+// fetch improved
			
 
				+fetch('https://swapi.dev/api/people/1/')
			
 
				+    .then(res => res.json())
			
 
				+    .then(luke => createHero(document.body, luke))
			
 
				+
			
 
				+function createHero(parent, data) {
			
 
				+    let table = document.createElement('table')
			
 
				+    table.style.border = '2px solid #808080'
			
 
				+    table.style.borderCollapse = 'collapse'
			
 
				+    table.style.background = '#FFFAF0'
			
 
				+    parent.append(table)
			
 
				+
			
 
				+    for (let key in data) {
			
 
				+        let tr = document.createElement('tr')
			
 
				+        table.append(tr)
			
 
				+
			
 
				+        let th = document.createElement('th')
			
 
				+        th.style.border = '2px solid #808080'
			
 
				+        tr.append(th)
			
 
				+        th.append(key)
			
 
				+ 
			
 
				+        let td = document.createElement('td')
			
 
				+        td.style.border = '2px solid #808080'
			
 
				+        tr.append(td) 
			
 
				+
			
 
				+        let btn = function(parent, link) { 
			
 
				+            button = document.createElement('button')
			
 
				+            button.style.background = '#AFEEEE'
			
 
				+            button.style.color = '#1E90FF'
			
 
				+            button.append(link)
			
 
				+            parent.append(button)
			
 
				+
			
 
				+            button.onclick = () => {
			
 
				+                fetch(link)
			
 
				+                .then(res => res.json())
			
 
				+                .then(luke => createHero(document.body, luke))
			
 
				+            }
			
 
				+        }
			
 
				+        if (data[key] instanceof Array) {
			
 
				+            for (let arr of data[key]) {
			
 
				+                if (arr.startsWith('https://swapi.dev/api/')) {
			
 
				+                    btn(td, arr)
			
 
				+                } 
			
 
				+                else td.append(data[key])
			
 
				+            }
			
 
				+        } 
			
 
				+        else { 
			
 
				+            if (typeof data[key] === 'string' && data[key].startsWith('https://swapi.dev/api/')) {
			
 
				+                btn(td, data[key])
			
 
				+            }
			
 
				+            else td.append(data[key])
			
 
				+        }  
			
 
				+    }       
			
 
				+}
			
 
				+
			
 
				+// myfetch
			
 
				+// example1
			
 
				+function myfetch(url) {
			
 
				+    return new Promise(function (resolve, reject) {
			
 
				+        const xhr = new XMLHttpRequest()
			
 
				+        xhr.open('GET', url)
			
 
				+
			
 
				+        xhr.onload = () => {
			
 
				+            if (xhr.status != 200) { 
			
 
				+                reject(`Error: ${xhr.statusText}`)
			
 
				+                return
			
 
				+            } 
			
 
				+            resolve(JSON.parse(xhr.response))
			
 
				+        }
			
 
				+
			
 
				+        xhr.onerror = function() {
			
 
				+            reject('Error')
			
 
				+        }
			
 
				+
			
 
				+        xhr.send()
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+myfetch('https://swapi.dev/api/people/1/')
			
 
				+    .then(luke => console.log(luke)) // вывод в консоль
			
 
				+
			
 
				+// or
			
 
				+// example2
			
 
				+function myfetch(url) {
			
 
				+    return new Promise(function (resolve, reject) {
			
 
				+        const xhr = new XMLHttpRequest
			
 
				+        xhr.open('GET', url, true)
			
 
				+
			
 
				+        xhr.onreadystatechange = function() { 
			
 
				+            if (xhr.readyState !== 4) {
			
 
				+                return;
			
 
				+            }
			
 
				+            if (xhr.status !== 200) {
			
 
				+                reject(console.log('Error' + this.statusText))
			
 
				+            } 
			
 
				+            else {
			
 
				+                resolve(JSON.parse(xhr.responseText))
			
 
				+            }
			
 
				+        }
			
 
				+        
			
 
				+        xhr.send()
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+myfetch('https://swapi.dev/api/people/1/')
			
 
				+    .then(createHero => console.log(createHero)) // вывод в консоль
			
 
				+
			
 
				+// myfetch('https://swapi.dev/api/people/1/')
			
 
				+//     .then(json => createHero(document.body, json)) // для отрисовки на странице
			
 
				+
			
 
				+// race
			
 
				+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
			
 
				+
			
 
				+Promise.race([myfetch('https://swapi.dev/api/people/1/'),delay(100)]).then(res => console.log(res))
			
--- a/js22-JSX/js14-change/css/style.css
+++ b/js22-JSX/js14-change/css/style.css
@@ -0,0 +1,38 @@
 
				+#nicknameBox, #messageBox  {
			
 
				+    width: 90%;
			
 
				+    height: 50px;
			
 
				+    text-align: center;
			
 
				+    font-size: 20px;
			
 
				+    margin-left: 65px;
			
 
				+    border-radius: 10px;
			
 
				+    border: 1px solid rgb(65, 63, 63);
			
 
				+    background-color: aqua;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
 
				+
			
 
				+#buttonBox {
			
 
				+    width: 70%;
			
 
				+    height: 50px;
			
 
				+    font-size: 20px;
			
 
				+    margin-left: 205px;
			
 
				+    border-radius: 20px;
			
 
				+    border: 1px solid rgb(65, 63, 63);
			
 
				+    background-color: coral;
			
 
				+    color: rgb(65, 63, 63);
			
 
				+    opacity: 0.8;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+#buttonBox:hover {
			
 
				+    opacity: 1
			
 
				+}
			
 
				+
			
 
				+div {
			
 
				+  background-color: cyan;
			
 
				+  margin-top: 10px;
			
 
				+  border: 1px solid rgb(65, 63, 63);
			
 
				+  border-radius: 10px;
			
 
				+  font-size: 18px;
			
 
				+  color: rgb(65, 63, 63);
			
 
				+  text-align: center;
			
 
				+}
			
--- a/js22-JSX/js14-change/index.html
+++ b/js22-JSX/js14-change/index.html
@@ -0,0 +1,17 @@
 
				+<!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>HW14</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <input type="text" id="nicknameBox" placeholder="Enter your nickname">
			
 
				+    <input type="text" id="messageBox" placeholder="Enter your message">
			
 
				+    <button type="submit" id="buttonBox"></button>
			
 
				+    <span id="chatBox"></span>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js14-change/js/main.js
+++ b/js22-JSX/js14-change/js/main.js
@@ -0,0 +1,106 @@
 
				+// // Chat Homework
			
 
				+
			
 
				+// function jsonPost(url, data) {
			
 
				+//     return new Promise((resolve, reject) => {
			
 
				+//         var x = new XMLHttpRequest();   
			
 
				+//         x.onerror = () => reject(new Error('jsonPost failed'))
			
 
				+//         //x.setRequestHeader('Content-Type', 'application/json')
			
 
				+//         x.open("POST", url, true);
			
 
				+//         x.send(JSON.stringify(data))
			
 
				+
			
 
				+//         x.onreadystatechange = () => {
			
 
				+//             if (x.readyState == XMLHttpRequest.DONE && x.status == 200) {
			
 
				+//                 resolve(JSON.parse(x.responseText))
			
 
				+//             }
			
 
				+//             else if (x.status != 200){
			
 
				+//                 reject(new Error('status is not 200'))
			
 
				+//             }
			
 
				+//         }
			
 
				+//     })
			
 
				+// }
			
 
				+
			
 
				+// // Stage 0
			
 
				+
			
 
				+// jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: 'Anon', message: 'Я не умею копипастить в консоль, зато умею жать красную кнопку.'})
			
 
				+
			
 
				+// Stage 1-4
			
 
				+
			
 
				+let btn = document.querySelector('#buttonBox')
			
 
				+btn.innerText = 'Send'
			
 
				+let nick = document.querySelector('#nicknameBox')
			
 
				+let msg = document.querySelector('#messageBox')
			
 
				+
			
 
				+btn.onclick = function sendMessage() {
			
 
				+    let nick = document.querySelector('#nicknameBox').value
			
 
				+    let msg = document.querySelector('#messageBox').value
			
 
				+    jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: msg})
			
 
				+    document.querySelector('#nicknameBox').value = ''
			
 
				+    document.querySelector('#messageBox').value = ''
			
 
				+}
			
 
				+
			
 
				+function addMessage() {
			
 
				+    setInterval(function() {
			
 
				+        jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
			
 
				+        .then (post => {console.log(post.data)
			
 
				+        for(messageId in post.data) {
			
 
				+            let chat = document.querySelector('#chatBox')
			
 
				+            let div = document.createElement('div')
			
 
				+            let p = document.createElement('p')
			
 
				+            p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
			
 
				+            let t = document.createElement('time')
			
 
				+            t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
			
 
				+            chat.prepend(div)
			
 
				+            div.append(p)
			
 
				+            div.append(t)
			
 
				+        }
			
 
				+        messageId = post.nextMessageId})
			
 
				+    },3000)
			
 
				+}
			
 
				+addMessage()
			
 
				+
			
 
				+// Stage 5
			
 
				+
			
 
				+async function sendMessage(nick, msg) {
			
 
				+    jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: msg})
			
 
				+    document.querySelector('#nicknameBox').value = ''
			
 
				+    document.querySelector('#messageBox').value = ''
			
 
				+}
			
 
				+
			
 
				+async function getMessages() {
			
 
				+    jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
			
 
				+    .then (post => {console.log(post.data)
			
 
				+        for(messageId in post.data) {
			
 
				+            let chat = document.querySelector('#chatBox')
			
 
				+            let div = document.createElement('div')
			
 
				+            let p = document.createElement('p')
			
 
				+            p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
			
 
				+            let t = document.createElement('time')
			
 
				+            t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
			
 
				+            chat.prepend(div)
			
 
				+            div.append(p)
			
 
				+            div.append(t)
			
 
				+        }
			
 
				+    })
			
 
				+}
			
 
				+
			
 
				+async function sendAndCheck() {
			
 
				+    await sendMessage(nick.value, msg.value)
			
 
				+    await getMessages()
			
 
				+}
			
 
				+
			
 
				+btn.onclick = () => sendAndCheck()
			
 
				+
			
 
				+async function checkLoop() {
			
 
				+    getMessages()
			
 
				+}
			
 
				+
			
 
				+checkLoop()
			
 
				+
			
 
				+// Stage 6
			
 
				+
			
 
				+async function jsonPost(url, data) {
			
 
				+    let response = await fetch(url, {method: 'POST', body: JSON.stringify(data)})
			
 
				+    return await response.json()
			
 
				+}
			
 
				+
			
 
				+let delay = ms => new Promise(ok => {setTimeout(() => ok(ms), ms)})
			
--- a/js22-JSX/js15/css/style.css
+++ b/js22-JSX/js15/css/style.css
@@ -0,0 +1,92 @@
 
				+.light-container1, .light-container2 {
			
 
				+	background:rgb(51, 51, 51);
			
 
				+	width: 150px;
			
 
				+	height: 440px;
			
 
				+	border-radius: 10px;
			
 
				+	font-size: 70px;
			
 
				+	text-align:center;
			
 
				+	padding: 1px 0;
			
 
				+	border: 6px solid #000;
			
 
				+	margin: 30px 30px;
			
 
				+}
			
 
				+
			
 
				+.light-container3, .light-container4 {
			
 
				+    background:rgb(51, 51, 51);
			
 
				+	width: 150px;
			
 
				+	height: 380px;
			
 
				+	border-radius: 10px;
			
 
				+	font-size: 70px;
			
 
				+	text-align:center;
			
 
				+	padding: 5px 0;
			
 
				+	border: 6px solid #000;
			
 
				+	margin: 30px 30px;
			
 
				+}
			
 
				+
			
 
				+.circle, .round, .series {
			
 
				+	background:grey;
			
 
				+	width: 120px;
			
 
				+	height: 120px;
			
 
				+	border-radius: 50%;
			
 
				+	margin-left: 15px;
			
 
				+	margin-top: 20px;
			
 
				+	line-height: 120px;
			
 
				+	-webkit-transition: background-color 0.5s ease-out;
			
 
				+	-o-transition: background-color 0.5s ease-out;
			
 
				+	transition: background-color 0.5s ease-out;
			
 
				+}
			
 
				+/*Добавляем фоновый цвет*/
			
 
				+.circleBGColor1, .roundBGColor1 {
			
 
				+	background-color: #f00;
			
 
				+}
			
 
				+.circleBGColor2 {
			
 
				+	background-color: #ff0;
			
 
				+}
			
 
				+.circleBGColor3, .roundBGColor3 {
			
 
				+	background-color: #0f0;
			
 
				+}
			
 
				+/*Добавляем текстовый цвет*/
			
 
				+.circleColor1 {
			
 
				+	color: #f00;
			
 
				+}
			
 
				+.circleColor2 {
			
 
				+	color: #0f0;
			
 
				+}
			
 
				+
			
 
				+.roundColor1 {
			
 
				+    color: rgb(245, 209, 209);
			
 
				+}
			
 
				+
			
 
				+.roundColor2 {
			
 
				+    color: rgb(91, 128, 96);
			
 
				+}
			
 
				+
			
 
				+.btn, #btn {
			
 
				+    display: inline-block;
			
 
				+    padding: 16px 12px;
			
 
				+    font-size: 16px;
			
 
				+    font-weight: 600;
			
 
				+    cursor: pointer;
			
 
				+    text-align: center;
			
 
				+    text-decoration: none;
			
 
				+    outline: none;
			
 
				+    color: #fff;
			
 
				+    background-color: #4CAF50;
			
 
				+    border: none;
			
 
				+    border-radius: 15px;
			
 
				+    box-shadow: 0 6px #999;
			
 
				+}
			
 
				+
			
 
				+.btn, #btn:active {
			
 
				+    background-color: #3e8e41;
			
 
				+    box-shadow: 0 5px #666;
			
 
				+    transform: translateY(4px);
			
 
				+}
			
 
				+
			
 
				+button[disabled]{
			
 
				+    background: #D4D4D4;     
			
 
				+}
			
 
				+
			
 
				+#btn[disabled]{
			
 
				+    background: #D4D4D4;     
			
 
				+}
			
 
				+
			
--- a/js22-JSX/js15/index.html
+++ b/js22-JSX/js15/index.html
@@ -0,0 +1,33 @@
 
				+<!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>HW15</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="light-container1">
			
 
				+        <div class="series" id="green"></div>
			
 
				+        <div class="series" id="yellow"></div>
			
 
				+        <div class="series" id="red"></div>
			
 
				+    </div>
			
 
				+    <!-- <div class="light-container2">
			
 
				+		<div class="circle"></div>
			
 
				+		<div class="circle"></div>
			
 
				+		<div class="circle"></div>
			
 
				+	</div> -->
			
 
				+    <!-- <div class="light-container3">
			
 
				+        <div class="series" id="red"></div>
			
 
				+        <div class="series" id="green"></div>
			
 
				+        <button id="btn">LETS GO</button>
			
 
				+    </div> -->
			
 
				+    <!-- <div class="light-container4">
			
 
				+		<div class="round"></div>
			
 
				+		<div class="round"></div>
			
 
				+        <button class="btn" onclick="Dis(this,10)">LETS GO</button>
			
 
				+	</div> -->
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js15/js/main.js
+++ b/js22-JSX/js15/js/main.js
@@ -0,0 +1,287 @@
 
				+// Async/Await Homework 2
			
 
				+// TrafficLight
			
 
				+
			
 
				+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
			
 
				+
			
 
				+let green = document.querySelector('#green')
			
 
				+let yellow = document.querySelector('#yellow')
			
 
				+let red = document.querySelector('#red')
			
 
				+
			
 
				+async function trafficLight() {
			
 
				+    while (true) {
			
 
				+        greenPlay()
			
 
				+        await delay(8000)
			
 
				+        yellowPlay()
			
 
				+        await delay(3000)
			
 
				+        redPlay()
			
 
				+        await delay(8000)
			
 
				+        yellowPlay()
			
 
				+        await delay(3000)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function greenPlay() {
			
 
				+    remove()
			
 
				+    green.style.background = 'green'
			
 
				+}
			
 
				+function yellowPlay() {
			
 
				+    remove()
			
 
				+    yellow.style.background = 'yellow'
			
 
				+}
			
 
				+function redPlay() {
			
 
				+    remove()
			
 
				+    red.style.background = 'red'
			
 
				+}
			
 
				+
			
 
				+function remove() {
			
 
				+    green.style.background = ''
			
 
				+    yellow.style.background = ''
			
 
				+    red.style.background = ''
			
 
				+}
			
 
				+
			
 
				+trafficLight()
			
 
				+
			
 
				+// or
			
 
				+// находим все классы
			
 
				+// let circle = document.getElementsByClassName('circle')
			
 
				+// // функция - счётчик counter
			
 
				+// function counter(setCounterOne, setCounterTwo, classIndex0, classIndex1, classIndex2) {
			
 
				+// 	// выводим счётчик
			
 
				+// 	let timeoutId = setInterval(function () { 
			
 
				+// 		classIndex0.classList.add('circleBGColor1')
			
 
				+// 		classIndex1.innerHTML = setCounterOne;
			
 
				+// 		classIndex1.classList.add('circleColor1')
			
 
				+// 		// очищаем счетчик и добавляем класс(желтый)
			
 
				+// 		if(setCounterOne <= 3) {
			
 
				+// 			classIndex1.innerHTML = ''
			
 
				+// 			classIndex1.classList.add('circleBGColor2')
			
 
				+//             // мигание
			
 
				+//             setTimeout(function() {
			
 
				+//                 classIndex0.classList.remove('circleBGColor1')
			
 
				+//             }, 500)
			
 
				+// 		}
			
 
				+// 		setCounterOne--
			
 
				+// 		// при достижении нуля останавливаем таймер и удаляем клас(желтый и красный)
			
 
				+// 		if (setCounterOne == 0) {
			
 
				+// 			clearInterval(timeoutId)
			
 
				+// 			classIndex1.classList.remove('circleBGColor2', 'circleColor1')
			
 
				+// 			classIndex0.classList.remove('circleBGColor1')
			
 
				+// 			let timeId = setInterval(function() {
			
 
				+// 				// добавляем класс(зелёный)
			
 
				+// 				classIndex2.classList.add('circleBGColor3')
			
 
				+// 				classIndex1.innerHTML = setCounterTwo
			
 
				+// 				classIndex1.classList.add('circleColor2')
			
 
				+// 				// добавляем второй счётчик
			
 
				+// 				if(setCounterTwo <= 3) {
			
 
				+//                     classIndex1.innerHTML = ''
			
 
				+// 			        classIndex1.classList.add('circleBGColor2')
			
 
				+// 					// мигание
			
 
				+// 					setTimeout(function() {
			
 
				+// 						classIndex2.classList.remove('circleBGColor3')
			
 
				+// 					}, 500)
			
 
				+// 				}
			
 
				+//                 // при достижении нуля останавливаем таймер и удаляем клас(желтый и зеленый)
			
 
				+//                 if (setCounterTwo == 0) {
			
 
				+//                     clearInterval(timeoutId)
			
 
				+//                     classIndex1.classList.remove('circleBGColor2', 'circleColor3')
			
 
				+//                     classIndex2.classList.remove('circleBGColor3')
			
 
				+//                 }
			
 
				+//                 // подготовка счётчика к новому циклу
			
 
				+//                 if(setCounterTwo == 0) {
			
 
				+// 					clearInterval(timeId)
			
 
				+// 					classIndex1.classList.remove('circleColor2')
			
 
				+// 				}
			
 
				+// 				setCounterTwo--
			
 
				+// 			}, 1000)
			
 
				+// 		}
			
 
				+// 	},1000)
			
 
				+// }
			
 
				+
			
 
				+// // функция - подсчет таймаутов
			
 
				+// let totalCounter;
			
 
				+// function sumTimeout(counterOne, counterTwo) {
			
 
				+// 	let sumCounterOne = counterOne * 1000
			
 
				+// 	let sumCounterTwo = counterTwo * 1000
			
 
				+// 	totalCounter = (sumCounterOne + sumCounterTwo) + 1000
			
 
				+// 	return totalCounter
			
 
				+// }
			
 
				+
			
 
				+// // рекурсия setTimeout
			
 
				+// setTimeout(function restartCounter() {
			
 
				+// 	// счётчик
			
 
				+// 	let addCounterOne = 8
			
 
				+// 	let addCounterTwo = 8
			
 
				+// 	// вызов подсчет таймаутов
			
 
				+// 	sumTimeout(addCounterOne, addCounterTwo)
			
 
				+// 	// вызов светофора counter( первый счётчик , второй счётчик, класс с индексом [0], класс с индексом [1], класс с индексом [2])
			
 
				+// 	counter(addCounterOne, addCounterTwo, circle[0], circle[1], circle[2])
			
 
				+// 	setTimeout(restartCounter, totalCounter)
			
 
				+// },100)
			
 
				+
			
 
				+// domEventPromise
			
 
				+
			
 
				+// const domEventPromise = function (element, eventName) {
			
 
				+//     return new Promise(function(resolve, reject) {
			
 
				+//         let func
			
 
				+//         element.addEventListener(eventName, func = (event) => {
			
 
				+//             resolve(event)
			
 
				+//             element.removeEventListener(eventName, func)
			
 
				+//         })
			
 
				+//     })
			
 
				+// }
			
 
				+
			
 
				+// PedestrianTrafficLight
			
 
				+
			
 
				+// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
			
 
				+
			
 
				+// let red = document.querySelector('#red')
			
 
				+// let green = document.querySelector('#green')
			
 
				+// let btn = document.querySelector('#btn')
			
 
				+
			
 
				+// async function PedestrianTrafficLight() {
			
 
				+//     while (true) {
			
 
				+//         redPlay()
			
 
				+//         await Promise.race([delay(8000), domEventPromise(btn,'click')])
			
 
				+//         greenPlay()
			
 
				+//         await delay(8000)
			
 
				+//     }
			
 
				+// }
			
 
				+
			
 
				+// function redPlay() {
			
 
				+//     remove()
			
 
				+//     red.style.background = 'red'
			
 
				+// }
			
 
				+
			
 
				+// function greenPlay() {
			
 
				+//     remove()
			
 
				+//     green.style.background = 'green'
			
 
				+// }
			
 
				+
			
 
				+// function remove() {
			
 
				+//     red.style.background = ''
			
 
				+//     green.style.background = ''
			
 
				+// }
			
 
				+
			
 
				+// PedestrianTrafficLight()
			
 
				+// btn.addEventListener('click', btnClick)
			
 
				+
			
 
				+// async function btnClick() {
			
 
				+//     btn.disabled = true
			
 
				+//     await delay(12000)
			
 
				+//     btn.disabled = false
			
 
				+// }
			
 
				+
			
 
				+// // // or
			
 
				+// // находим все классы
			
 
				+// let round = document.getElementsByClassName('round')
			
 
				+// // функция - счётчик counter
			
 
				+// function counter(setCountOne, setCountTwo, Index0, Index1) {
			
 
				+//     // выводим счётчик
			
 
				+// 	let timeoutId = setInterval(function() { 
			
 
				+// 		Index0.classList.add('roundBGColor1')
			
 
				+//         Index0.innerHTML = setCountOne
			
 
				+//         Index0.classList.add('roundColor1')
			
 
				+//         if(setCountOne <= 3) {
			
 
				+//             // мигание
			
 
				+//             setTimeout(function() {
			
 
				+//                 Index0.innerHTML = ''
			
 
				+//                 Index0.classList.remove('roundBGColor1')
			
 
				+//             }, 500)
			
 
				+//         }
			
 
				+//         setCountOne--
			
 
				+// 		// при достижении нуля останавливаем таймер и удаляем класс (красный)
			
 
				+// 		if (setCountOne == 0) {
			
 
				+// 			clearInterval(timeoutId)
			
 
				+// 			Index0.classList.remove('roundBGColor1')
			
 
				+// 			let timeId = setInterval(function() {
			
 
				+//                 Index1.innerHTML = setCountTwo
			
 
				+//                 Index1.classList.add('roundColor2')
			
 
				+// 				// добавляем класс(зелёный)
			
 
				+// 				Index1.classList.add('roundBGColor3')
			
 
				+// 				// добавляем второй счётчик
			
 
				+// 				if(setCountTwo <= 3) {
			
 
				+//                         // мигание
			
 
				+//                         setTimeout(function() {
			
 
				+//                             Index1.classList.remove('roundBGColor3')
			
 
				+//                         }, 500)
			
 
				+// 				}
			
 
				+//                 // при достижении нуля останавливаем таймер и удаляем класc (зеленый)
			
 
				+//                 if (setCountTwo == 0) {
			
 
				+//                     Index1.innerHTML = ''
			
 
				+//                     clearInterval(timeoutId)
			
 
				+//                     Index1.classList.remove('roundBGColor3')
			
 
				+//                 }
			
 
				+//                 // подготовка счётчика к новому циклу
			
 
				+//                 if(setCountTwo == 0) {
			
 
				+// 					clearInterval(timeId)
			
 
				+// 				}
			
 
				+// 				setCountTwo--
			
 
				+// 			}, 1000)
			
 
				+// 		}
			
 
				+// 	},1000)
			
 
				+// }
			
 
				+
			
 
				+// let totalCounter
			
 
				+// function sumTimeout(countOne, countTwo) {
			
 
				+// 	let sumCountOne = countOne * 1000
			
 
				+// 	let sumCountTwo = countTwo * 1000
			
 
				+// 	totalCounter = (sumCountOne + sumCountTwo) + 1000
			
 
				+// 	return totalCounter
			
 
				+// }
			
 
				+
			
 
				+// setTimeout(function restartCounter() {
			
 
				+// 	let addCountOne = 8
			
 
				+// 	let addCountTwo = 8
			
 
				+// 	sumTimeout(addCountOne, addCountTwo)
			
 
				+// 	counter(addCountOne, addCountTwo, round[0], round[1])
			
 
				+// 	setTimeout(restartCounter, totalCounter)
			
 
				+// },100)
			
 
				+
			
 
				+// function Dis(el,tm) {
			
 
				+//   el.disabled = true
			
 
				+//   Dis.obj = el
			
 
				+//   setTimeout('Dis.obj.disabled = false;', tm * 1000)
			
 
				+// }
			
 
				+// смену цвета по нажатию кнопки долго думала как реализовать, но пока еще в процессе - решила сдать уже так
			
 
				+
			
 
				+// speedtest
			
 
				+
			
 
				+// async function speedtest(getPromise, count, parallel = 1) {
			
 
				+
			
 
				+//     let t1 = performance.now()
			
 
				+//     for (let i = 0; i < count; i++) {
			
 
				+//         let arrPromise = []
			
 
				+
			
 
				+//         for (let j = 0; j < parallel; j++) {
			
 
				+//             arrPromise.push(getPromise())
			
 
				+//         }
			
 
				+
			
 
				+//         await Promise.all(arrPromise)
			
 
				+//     }
			
 
				+
			
 
				+//     let t2 = performance.now()
			
 
				+//     let duration = t2 - t1
			
 
				+//     let querySpeed = count / duration
			
 
				+//     let queryDuration = duration / count
			
 
				+//     let parallelSpeed = (count * parallel) / duration
			
 
				+//     let parallelDuration = duration / (count * parallel)
			
 
				+
			
 
				+//     return {
			
 
				+//         duration,
			
 
				+//         querySpeed, //средняя скорость одного запроса
			
 
				+//         queryDuration, //
			
 
				+//         parallelSpeed,
			
 
				+//         parallelDuration
			
 
				+//     }
			
 
				+// }
			
 
				+
			
 
				+// speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
			
 
				+// // {duration: 10000, 
			
 
				+// // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
			
 
				+// // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем 
			
 
				+// // parallelSpeed: 0.01  // 100 запросов за 10000 миллисекунд
			
 
				+// // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
			
 
				+// speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)
			
 
				+
			
 
				+//проверяла результат работы раскомментируя по одному блоку кода с заданием js/html
			
 
				+
			
--- a/js22-JSX/js16-change/index.html
+++ b/js22-JSX/js16-change/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW16</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js16-change/js/main.js
+++ b/js22-JSX/js16-change/js/main.js
@@ -0,0 +1,107 @@
 
				+const getGQL = url => 
			
 
				+    (query, variables) =>
			
 
				+        fetch(url , {
			
 
				+            method: 'POST',
			
 
				+            headers: {
			
 
				+                "content-type": "application/json"
			
 
				+            },
			
 
				+            body: JSON.stringify({query, variables})
			
 
				+        }).then(res => res.json())
			
 
				+
			
 
				+let gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql")
			
 
				+
			
 
				+async function categoryById(id) {
			
 
				+    let query = `query CategoryFind($id:String) {
			
 
				+        CategoryFind(query:$id) {
			
 
				+            name goods {
			
 
				+            name
			
 
				+            price
			
 
				+            description
			
 
				+            images {url}
			
 
				+            }
			
 
				+        }
			
 
				+    }`
			
 
				+  
			
 
				+    let variables =  {"id": JSON.stringify([{ "_id": id }])}    //or {"id": "[{\"_id\":\"id\"}]"}
			
 
				+    
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res 
			
 
				+}
			
 
				+
			
 
				+categoryById("5dc458985df9d670df48cc47")
			
 
				+
			
 
				+async function goodById(id) {
			
 
				+    let query = `query GoodFind($id:String) {
			
 
				+        GoodFind(query:$id) {
			
 
				+            categories {
			
 
				+                _id
			
 
				+                name
			
 
				+            }
			
 
				+            name
			
 
				+            price
			
 
				+            description
			
 
				+            createdAt
			
 
				+            images {url}
			
 
				+        }
			
 
				+    }`
			
 
				+
			
 
				+    let variables =  {"id": JSON.stringify([{ "_id": id }])}    //or {"id": "[{\"_id\":\"id\"}]"}
			
 
				+      
			
 
				+
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res 
			
 
				+}
			
 
				+
			
 
				+goodById("5e203b5456d8f720513e6cba")
			
 
				+
			
 
				+async function goodFind() {
			
 
				+    let query = `query GoodFind($q:String) {
			
 
				+        GoodFind(query:$q) {
			
 
				+            categories {
			
 
				+                _id
			
 
				+                name
			
 
				+            }
			
 
				+            _id
			
 
				+            name
			
 
				+            price
			
 
				+            description
			
 
				+            createdAt
			
 
				+            images {url}
			
 
				+            
			
 
				+        }
			
 
				+    }`
			
 
				+  
			
 
				+    let variables =   {"q": JSON.stringify([{}])}    //or {"q": "[{}]"}
			
 
				+    
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res 
			
 
				+}
			
 
				+
			
 
				+goodFind()
			
 
				+
			
 
				+async function categoryFind() {
			
 
				+    let query = `query CategoryFind($q:String) {
			
 
				+        CategoryFind(query:$q) {
			
 
				+            _id
			
 
				+            name
			
 
				+            createdAt
			
 
				+            goods {
			
 
				+                _id 
			
 
				+                name 
			
 
				+                price
			
 
				+                createdAt
			
 
				+            }
			
 
				+        }
			
 
				+    }`
			
 
				+  
			
 
				+    let variables =   {"q": JSON.stringify([{}])}    //or {"q": "[{}]"}
			
 
				+    
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res 
			
 
				+}
			
 
				+
			
 
				+categoryFind()
			
--- a/js22-JSX/js17/index.html
+++ b/js22-JSX/js17/index.html
@@ -0,0 +1,13 @@
 
				+<!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>HW17</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js17/js/main.js
+++ b/js22-JSX/js17/js/main.js
@@ -0,0 +1,125 @@
 
				+const getGQL = url => 
			
 
				+    (query, variables) =>
			
 
				+        fetch(url , {
			
 
				+            method: 'POST',
			
 
				+            headers: {
			
 
				+                "content-type": "application/json",
			
 
				+                ...(localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {})
			
 
				+            },
			
 
				+            body: JSON.stringify({query, variables})
			
 
				+        }).then(res => res.json())
			
 
				+
			
 
				+let gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql")
			
 
				+
			
 
				+//регистрация
			
 
				+let reg = async(login, password) => {
			
 
				+    let query = `mutation reg($login:String, $password:String) {
			
 
				+        UserUpsert(user:{
			
 
				+            login: $login,
			
 
				+            password: $password
			
 
				+
			
 
				+        }){
			
 
				+           _id
			
 
				+        }
			
 
				+    }`
			
 
				+
			
 
				+    let variables = {"login":login, "password":password}
			
 
				+
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res
			
 
				+}
			
 
				+
			
 
				+//логин
			
 
				+let login = async(login, password) => {
			
 
				+    let query = `query login($login:String, $password:String) {
			
 
				+        login(login: $login, password: $password)
			
 
				+    }`
			
 
				+
			
 
				+    let variables = {"login":login, "password":password}
			
 
				+
			
 
				+    let token = await gql(query, variables)
			
 
				+    console.log(token)
			
 
				+    localStorage.authToken = token.data.login
			
 
				+}
			
 
				+
			
 
				+//отправка заказа
			
 
				+let newOrder = async(obj) => {
			
 
				+    let option = Object.entries(obj)
			
 
				+    let orderGoods = []
			
 
				+  
			
 
				+    for (let key of option) {
			
 
				+        let i = {
			
 
				+            "count": key[1],
			
 
				+            "good": {"_id": key[0]}
			
 
				+        }
			
 
				+        orderGoods.push(i)
			
 
				+    }
			
 
				+  
			
 
				+    let query = `mutation newOrder($order:OrderInput) {
			
 
				+       OrderUpsert(order:$order) {
			
 
				+         _id 
			
 
				+       }
			
 
				+     }`
			
 
				+  
			
 
				+    let variables = {
			
 
				+        "order": {"orderGoods": orderGoods}
			
 
				+    }
			
 
				+  
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res
			
 
				+}
			
 
				+  
			
 
				+//получениe всех заказов
			
 
				+let getOrders = async() => {
			
 
				+    let query = `query orders {
			
 
				+      OrderFind(query:"[{}]") {
			
 
				+        _id total 
			
 
				+        orderGoods {
			
 
				+          good {
			
 
				+            _id
			
 
				+            name
			
 
				+          }
			
 
				+          count 
			
 
				+          price
			
 
				+          total
			
 
				+        }
			
 
				+      }
			
 
				+    }`
			
 
				+  
			
 
				+    let res = await gql(query)
			
 
				+    console.log(res)
			
 
				+    return res
			
 
				+}
			
 
				+  
			
 
				+//получениe одного заказа по его _id
			
 
				+  let orderById = async(id) => {
			
 
				+      let query = `query orderId($id:String) {
			
 
				+        OrderFind(query:$id) {
			
 
				+        createdAt total
			
 
				+        orderGoods {
			
 
				+          good {
			
 
				+            _id
			
 
				+            name
			
 
				+          }
			
 
				+          count total price
			
 
				+        } 
			
 
				+      }
			
 
				+    }`
			
 
				+  
			
 
				+    let variables = {
			
 
				+        "id": JSON.stringify([{ "_id": id }])
			
 
				+    }
			
 
				+  
			
 
				+    let res = await gql(query, variables)
			
 
				+    console.log(res)
			
 
				+    return res
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
--- a/js22-JSX/js18/css/style.css
+++ b/js22-JSX/js18/css/style.css
@@ -0,0 +1,69 @@
 
				+#mainContainer {
			
 
				+    display: flex;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+#aside {
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    background-color: #78e0e4;
			
 
				+    padding: 20px;
			
 
				+    width: 20%;
			
 
				+    height: 100vh;
			
 
				+    font-size: 23px;
			
 
				+    font-family: 'Courier New', Courier, monospace;
			
 
				+    border: 2px solid black;
			
 
				+    text-decoration: underline;
			
 
				+}
			
 
				+
			
 
				+#aside a {
			
 
				+    text-decoration: none;
			
 
				+    color: rgb(53, 115, 185);
			
 
				+    margin: 15px 0;
			
 
				+    transition: all 0.5s;
			
 
				+}
			
 
				+
			
 
				+#aside a:hover {
			
 
				+    border: 1px solid black;
			
 
				+    text-align: center;
			
 
				+    color: #454747;
			
 
				+    background-color: rgb(253, 236, 209);
			
 
				+}
			
 
				+
			
 
				+#main {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    flex-direction: row;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+#main a {
			
 
				+    font-size: 25px;
			
 
				+    text-decoration: none;
			
 
				+    font-family: 'Courier New', Courier, monospace;
			
 
				+    margin-top: 20px;
			
 
				+    margin-bottom: 20px;
			
 
				+}
			
 
				+
			
 
				+#main div {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    flex-wrap: wrap;
			
 
				+    width: 38%;
			
 
				+    justify-content: center;
			
 
				+    border: 2px solid rgb(110, 108, 108);
			
 
				+    border-radius: 20px;
			
 
				+    margin-bottom: 20px;
			
 
				+    margin-left: 20px;
			
 
				+    text-align: center;
			
 
				+    padding-bottom: 20px;
			
 
				+}
			
 
				+
			
 
				+#main span {
			
 
				+    font-size: 20px;
			
 
				+    margin-top: 10px;
			
 
				+}
			
 
				+
			
 
				+#main button {
			
 
				+    font-size: 15px;
			
 
				+}
			
--- a/js22-JSX/js18/index.html
+++ b/js22-JSX/js18/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/normalize.css">
			
 
				+    <link rel="stylesheet" href="css/style.css">
			
 
				+    <title>HW18</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id='mainContainer'>
			
 
				+        <aside id='aside'></aside>
			
 
				+        <main id='main'></main>
			
 
				+    </div>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js18/js/main.js
+++ b/js22-JSX/js18/js/main.js
@@ -0,0 +1,276 @@
 
				+// функция createStore
			
 
				+
			
 
				+function createStore(reducer) {
			
 
				+    let state = reducer(undefined, {})
			
 
				+    let cbs = []
			
 
				+
			
 
				+    function dispatch(action) {
			
 
				+        if (typeof action === 'function') {
			
 
				+            return action(dispatch)
			
 
				+        }
			
 
				+
			
 
				+        const newState = reducer(state, action)
			
 
				+        if (newState !== state) {
			
 
				+            state = newState
			
 
				+            for (let cb of cbs)
			
 
				+                cb()
			
 
				+        }
			
 
				+    }
			
 
				+    
			
 
				+    return {
			
 
				+        dispatch,
			
 
				+        getState() {
			
 
				+            return state
			
 
				+        },
			
 
				+        subscribe(cb) {
			
 
				+            cbs.push(cb)
			
 
				+            return () => cbs = cbs.filter(c => c !== cb)
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// функция promiseReducer
			
 
				+
			
 
				+function promiseReducer(state = {}, { type, status, payload, error, name }) {
			
 
				+    
			
 
				+    if (type === 'PROMISE') {
			
 
				+        return {
			
 
				+            ...state,
			
 
				+            [name]: { status, payload, error }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    return state
			
 
				+}
			
 
				+
			
 
				+const store = createStore(promiseReducer)
			
 
				+
			
 
				+// actions
			
 
				+
			
 
				+const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name})
			
 
				+const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload})
			
 
				+const actionRejected = (name, error) => ({type: 'PROMISE', status: 'REJECTED', name, error})
			
 
				+
			
 
				+const actionPromise = (name, promise) => 
			
 
				+    async dispatch => {
			
 
				+        dispatch(actionPending(name))
			
 
				+        try{
			
 
				+            let payload = await promise
			
 
				+            dispatch(actionResolved(name, payload)) 
			
 
				+            return payload
			
 
				+        }
			
 
				+        catch(error){
			
 
				+             dispatch(actionRejected(name, error))
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+// функция cartReducer
			
 
				+
			
 
				+function cartReducer(state = {}, { type, count = 1, _id, name }) {
			
 
				+    if (type === "CART_ADD") {
			
 
				+        return {
			
 
				+            ...state,
			
 
				+            [_id]: {
			
 
				+                name: name,
			
 
				+                count: state[_id] ? state[_id].count + count : count
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    if (type === "CART_CHANGE") {
			
 
				+        return {
			
 
				+            ...state,
			
 
				+            [_id]: {
			
 
				+                name: name,
			
 
				+                count: count
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    if (type === 'CART_REMOVE') {
			
 
				+        let { [_id]: count, ...copyWithout } = state
			
 
				+        return copyWithout
			
 
				+    }
			
 
				+
			
 
				+    if (type === 'CART_CLEAR') {
			
 
				+        return {}
			
 
				+    }
			
 
				+
			
 
				+    return state
			
 
				+}
			
 
				+
			
 
				+//  reducers 
			
 
				+
			
 
				+let reducers = {
			
 
				+    promise: promiseReducer,
			
 
				+    cart: cartReducer
			
 
				+}
			
 
				+
			
 
				+// функция combineReducers
			
 
				+
			
 
				+function combineReducers(reducers) {
			
 
				+    function commonReducer(state = {}, action) {
			
 
				+        let newState = {}
			
 
				+
			
 
				+        for (let key in reducers) {
			
 
				+            let innerState = reducers[key](state[key], action)
			
 
				+
			
 
				+            innerState === state[key] ? newState[key] = state[key] : newState[key] = innerState
			
 
				+        }
			
 
				+
			
 
				+        return newState
			
 
				+    }
			
 
				+
			
 
				+    return commonReducer
			
 
				+}
			
 
				+
			
 
				+// запросы
			
 
				+
			
 
				+const getGQL = url =>
			
 
				+    (query, variables = {}) => fetch(url, {
			
 
				+        method: 'POST',
			
 
				+        headers: {
			
 
				+            "content-type": "application/json",
			
 
				+            ...(localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {})
			
 
				+        },
			
 
				+        body: JSON.stringify({ query, variables })
			
 
				+    }).then(res => res.json())
			
 
				+
			
 
				+let shopGQL = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql")
			
 
				+
			
 
				+const actionRootCategories = () =>
			
 
				+    actionPromise('rootCategories', shopGQL(`query cats($query:String) {
			
 
				+        CategoryFind(query:$query) {
			
 
				+            _id name 
			
 
				+        }
			
 
				+    }`, {query: JSON.stringify([{parent:null}])}))
			
 
				+
			
 
				+store.dispatch(actionRootCategories())
			
 
				+
			
 
				+const actionCategoryById = (_id) => 
			
 
				+    actionPromise('catById', shopGQL(`query catById($query:String) {
			
 
				+        CategoryFindOne(query:$query) {
			
 
				+            _id name goods {
			
 
				+                _id name price description images {
			
 
				+                    url
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }`, {query: JSON.stringify([{_id}])}))
			
 
				+
			
 
				+const actionGoodById = id => 
			
 
				+    actionPromise('goodById', shopGQL(`query GoodFind($id:String) {
			
 
				+        GoodFind(query: $id){
			
 
				+            name
			
 
				+            price
			
 
				+            description
			
 
				+            images {url}
			
 
				+        }
			
 
				+    }`, {id: JSON.stringify([{ "_id": id }])}))
			
 
				+
			
 
				+
			
 
				+window.onhashchange = () => {
			
 
				+    let { 1: route, 2: id } = location.hash.split('/')
			
 
				+    if (route === 'categories') {
			
 
				+        store.dispatch(actionCategoryById(id))
			
 
				+    }
			
 
				+
			
 
				+    if (route === 'good') {
			
 
				+        store.dispatch(actionGoodById(id))
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function drawMainMenu() {
			
 
				+    let cats = store.getState().rootCategories.payload
			
 
				+    if (cats) {
			
 
				+        aside.innerText = ''
			
 
				+        for (let { _id, name } of cats.data.CategoryFind) {
			
 
				+            let catA = document.createElement('a')
			
 
				+            catA.href = `#/categories/${_id}`
			
 
				+            catA.innerText = name
			
 
				+            aside.append(catA)
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+store.subscribe(drawMainMenu)
			
 
				+store.subscribe(() => console.log(store.getState()))
			
 
				+
			
 
				+store.subscribe(() => {
			
 
				+    const { 1: route, 2: id } = location.hash.split('/')
			
 
				+    if (route === 'categories') {
			
 
				+        const catById = store.getState().catById?.payload
			
 
				+        if (catById) {
			
 
				+            aside.innerText = ''
			
 
				+            let cats = document.createElement('p')
			
 
				+            cats.innerText = "Вы в категории ==>" + " " + catById.data.CategoryFindOne.name
			
 
				+            mainMenu = document.createElement('a')
			
 
				+            mainMenu.innerText = "Назад в главное меню"
			
 
				+            mainMenu.onclick = () => {
			
 
				+                main.innerText = ''
			
 
				+                drawMainMenu()
			
 
				+            }
			
 
				+            aside.append(mainMenu, cats)
			
 
				+
			
 
				+            let goods = catById.data.CategoryFindOne.goods
			
 
				+            for (let {_id, name, price, description, images} of goods) {
			
 
				+                let div = document.createElement('div')
			
 
				+                div.className = 'goods'
			
 
				+                let btnCart = document.createElement('btn')
			
 
				+                let btn = document.createElement('button')
			
 
				+                btn.textContent = "Добавить в карзину"
			
 
				+                let img = document.createElement('img')
			
 
				+                img.style.width ='400px'
			
 
				+                img.src = `http://shop-roles.asmer.fs.a-level.com.ua/${images[0].url}`
			
 
				+                let prices = document.createElement('span')
			
 
				+                let descriptions = document.createElement('p')
			
 
				+                prices.innerText = `Цена: ${price} грн`
			
 
				+                descriptions.innerText = `Описание: ${description}`
			
 
				+                let goodA = document.createElement('a')
			
 
				+                goodA.href = `#/good/${_id}`
			
 
				+                goodA.innerText = name
			
 
				+                main.append(div)
			
 
				+                btnCart.append(btn)
			
 
				+                div.append(goodA, img, prices, descriptions, btnCart)
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    if (route === 'good') {
			
 
				+        const goodById = store.getState().goodById?.payload
			
 
				+        const catById = store.getState().catById?.payload
			
 
				+        if (goodById) {
			
 
				+            aside.innerText = ''
			
 
				+            main.innerText = ''
			
 
				+            let cats = document.createElement('p')
			
 
				+            cats.innerText = "Вы в категории ==>" + " " + catById.data.CategoryFindOne.name
			
 
				+            menuGoods = document.createElement('a')
			
 
				+            menuGoods.innerText = catById.data.CategoryFindOne.name  + " " + "<== Назад в список товаров"
			
 
				+            mainMenu = document.createElement('a')
			
 
				+            mainMenu.innerText = "Назад в главное меню"
			
 
				+            mainMenu.onclick = () => {
			
 
				+                main.innerText = ''
			
 
				+                drawMainMenu()
			
 
				+            }
			
 
				+            aside.append(mainMenu, cats)
			
 
				+
			
 
				+            let good = goodById.data.GoodFind
			
 
				+            for (let {name, price, description, images} of good) {
			
 
				+                let div = document.createElement('div')
			
 
				+                div.className = 'good'
			
 
				+                let btn = document.createElement('button')
			
 
				+                btn.textContent = "Добавить в карзину"
			
 
				+                let img = document.createElement('img')
			
 
				+                img.style.width ='400px'
			
 
				+                img.src = `http://shop-roles.asmer.fs.a-level.com.ua/${images[0].url}`
			
 
				+                let prices = document.createElement('span')
			
 
				+                let descriptions = document.createElement('p')
			
 
				+                prices.innerText = `Цена: ${price} грн`
			
 
				+                descriptions.innerText = `Описание: ${description}`
			
 
				+                let goodA = document.createElement('a')
			
 
				+                goodA.innerText = name
			
 
				+                main.append(div)
			
 
				+                div.append(goodA, img, prices, descriptions, btn)
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+})
			
--- a/js22-JSX/js21-canvas/css/style.css
+++ b/js22-JSX/js21-canvas/css/style.css
@@ -0,0 +1,28 @@
 
				+* {
			
 
				+    box-sizing: border-box;   
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+ button{
			
 
				+    width: 100%;
			
 
				+    font-size: 2em;
			
 
				+}
			
 
				+input, button, select{
			
 
				+    width: 100%;
			
 
				+    font-size: 2em;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+    border: 1px;
			
 
				+    border-collapse: collapse;
			
 
				+}
			
 
				+
			
 
				+td,th {
			
 
				+    border: 1px solid black;
			
 
				+}
			
--- a/js22-JSX/js21-canvas/index.html
+++ b/js22-JSX/js21-canvas/index.html
@@ -0,0 +1,29 @@
 
				+<!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/normalize.css">
			
 
				+    <link rel="stylesheet" href="css/style.css">
			
 
				+    <title>HW21</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <canvas id='canvas' width=900 height=450></canvas> 
			
 
				+    <button id='undo'>UNDO</button>
			
 
				+    <input type='color' id='color'>
			
 
				+    <select id='tool'>
			
 
				+        <option value='graffity'>Graffity</option>
			
 
				+        <option value='circle'>Circle</option>
			
 
				+        <option value='line'>Line</option>
			
 
				+        <option value='rectangle'>Rectangle</option>
			
 
				+        <option value='ellipse'>Ellipse</option>
			
 
				+        <option value='square'>Square</option>
			
 
				+        <option value='triangle'>Triangle</option>
			
 
				+        <option value='select'>Select</option>
			
 
				+    </select>
			
 
				+    <input type='number' id='size' value=10>
			
 
				+    <button id='delete'>Delete...</button>
			
 
				+    <script src='js/main.js'></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js22-JSX/js21-canvas/js/main.js
+++ b/js22-JSX/js21-canvas/js/main.js
@@ -0,0 +1,358 @@
 
				+const canvas = document.getElementById('canvas')
			
 
				+const ctx = canvas.getContext('2d')
			
 
				+
			
 
				+const width = canvas.width;
			
 
				+const height = canvas.height;
			
 
				+
			
 
				+let current;
			
 
				+let selection = []
			
 
				+
			
 
				+const tools = {
			
 
				+    graffity: {
			
 
				+        mousemove(e){
			
 
				+            (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value)
			
 
				+        }
			
 
				+    },
			
 
				+    circle: {
			
 
				+        mousedown(e){
			
 
				+            current = new Circle(e.clientX,e.clientY, 1, color.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            current.radius = current.distanceTo(e.clientX, e.clientY)
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e){
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    line: {
			
 
				+        mousedown(e){
			
 
				+            current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            current.width = e.clientX - current.x
			
 
				+            current.height = e.clientY - current.y
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e){
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    rectangle: {
			
 
				+        mousedown(e){
			
 
				+            current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            current.width = e.clientX - current.x
			
 
				+            current.height = e.clientY - current.y
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e){
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    ellipse: {
			
 
				+        mousedown(e) {
			
 
				+            current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value)
			
 
				+        },
			
 
				+        mousemove(e) {
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            resultX = e.clientX - current.x;
			
 
				+            resultY = e.clientY - current.y;
			
 
				+            current.radiusX = resultX > 0 ? resultX : -resultX;
			
 
				+            current.radiusY = resultY > 0 ? resultY : - resultY;
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e) {
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    square: {
			
 
				+        mousedown(e){
			
 
				+            current = new Square(e.clientX, e.clientY, 0, color.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            current.width = e.clientX - current.x
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e){
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    triangle: {
			
 
				+        mousedown(e){
			
 
				+            current = new Triangle(e.clientX, e.clientY, color.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+            
			
 
				+            current.oneX = e.clientX;
			
 
				+            current.oneY = e.clientY;
			
 
				+            current.twoX = current.x - (current.oneX - current.x);
			
 
				+            current.twoY = e.clientY;
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+
			
 
				+        mouseup(e){
			
 
				+            current = null
			
 
				+        }
			
 
				+    },
			
 
				+    select: {
			
 
				+        click(e){
			
 
				+            console.log(e)
			
 
				+            let found = Drawable.instances.filter(c => c.in && c.in(e.clientX, e.clientY))
			
 
				+            if (found.length){
			
 
				+                if (e.ctrlKey){
			
 
				+                    selection.push(found.pop())
			
 
				+                }
			
 
				+                else {
			
 
				+                    selection = [found.pop()]
			
 
				+                }
			
 
				+            }
			
 
				+            else {
			
 
				+                if (!e.ctrlKey) selection = []
			
 
				+            }
			
 
				+
			
 
				+            Drawable.drawAll(selection)
			
 
				+        },
			
 
				+        mousedown(e){
			
 
				+            current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value)
			
 
				+        },
			
 
				+        mousemove(e){
			
 
				+            if (!current) return;
			
 
				+
			
 
				+            current.width = e.clientX - current.x
			
 
				+            current.height = e.clientY - current.y
			
 
				+
			
 
				+            Drawable.drawAll()
			
 
				+        },
			
 
				+        mouseup(e){
			
 
				+            current = null // пока не додумала как обратиться внутрь поля выделения
			
 
				+            //x,y, w, h прямоугольника
			
 
				+            //selection - только те элеменеты Drawable.instances которые в границах прямоугольника.
			
 
				+        },
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function superHandler(evt){
			
 
				+    let t = tools[tool.value]
			
 
				+    if (typeof t[evt.type] === 'function')
			
 
				+        t[evt.type].call(this, evt)
			
 
				+}
			
 
				+
			
 
				+canvas.onmousemove = superHandler
			
 
				+canvas.onmouseup = superHandler
			
 
				+canvas.onmousedown = superHandler
			
 
				+canvas.onclick = superHandler
			
 
				+
			
 
				+function Drawable(){
			
 
				+   Drawable.addInstance(this);   
			
 
				+}
			
 
				+
			
 
				+const distance = (x1,y1, x2, y2) => ((x1-x2)**2 + (y1-y2)**2)**0.5
			
 
				+
			
 
				+Drawable.prototype.draw = function(){};
			
 
				+Drawable.prototype.distanceTo = function(x,y){
			
 
				+    if (typeof this.x !== 'number' ||
			
 
				+        typeof this.y !== 'number'){
			
 
				+        return NaN
			
 
				+    }
			
 
				+    return distance(this.x, this.y, x, y)
			
 
				+}
			
 
				+
			
 
				+Drawable.instances = [];
			
 
				+Drawable.addInstance = function(item){
			
 
				+    Drawable.instances.push(item);
			
 
				+}
			
 
				+
			
 
				+Drawable.drawAll = function(selection=[]){
			
 
				+    ctx.clearRect(0,0,width,height);
			
 
				+    Drawable.forAll(item => item.draw())
			
 
				+    selection.forEach(item  => item.draw(true))
			
 
				+}
			
 
				+
			
 
				+Drawable.forAll = function(callback){
			
 
				+    for(var i = 0; i<Drawable.instances.length;i++){
			
 
				+        callback(Drawable.instances[i])
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Circle extends Drawable {
			
 
				+    constructor(x, y, radius, color){
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.radius = radius;
			
 
				+        this.color = color;
			
 
				+
			
 
				+        this.draw(); 
			
 
				+    }
			
 
				+
			
 
				+    draw(){
			
 
				+        ctx.beginPath();
			
 
				+        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
			
 
				+        ctx.closePath();
			
 
				+        ctx.fillStyle = this.color;
			
 
				+        ctx.fill(); // рисует закрашенный circle
			
 
				+        // ctx.stroke(); // рисует границы circle 
			
 
				+    }
			
 
				+
			
 
				+    in(x,y){
			
 
				+        return this.distanceTo(x,y) < this.radius
			
 
				+    }
			
 
				+
			
 
				+    inBounds(x,y,w,h){
			
 
				+        return this.x >= x && this.x <= x + w &&
			
 
				+               this.y >= y && this.y <= y + h 
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Line extends Drawable {
			
 
				+    constructor(x,y, width, height, color, lineWidth){
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.width = width;
			
 
				+        this.height = height;
			
 
				+        this.color = color;
			
 
				+        this.lineWidth = lineWidth;
			
 
				+
			
 
				+        this.draw(); 
			
 
				+    }
			
 
				+    
			
 
				+    draw(){
			
 
				+        ctx.beginPath();
			
 
				+        ctx.moveTo(this.x, this.y);
			
 
				+        ctx.lineTo(this.x + this.width, this.y + this.height);
			
 
				+        ctx.closePath();
			
 
				+        ctx.strokeStyle = this.color;
			
 
				+        ctx.lineWidth = this.lineWidth
			
 
				+        ctx.stroke();
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Rectangle extends Drawable {
			
 
				+    constructor(x, y, width, height, color){
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.width = width;
			
 
				+        this.height = height;
			
 
				+        this.color = color;
			
 
				+
			
 
				+        this.draw(); 
			
 
				+    }
			
 
				+    
			
 
				+    draw(){
			
 
				+        ctx.beginPath();
			
 
				+        ctx.strokeRect(this.x, this.y, this.width, this.height); // рисует границы rectangle
			
 
				+        // ctx.fillRect(this.x, this.y, this.width, this.height); // рисует закрашенный rectangle
			
 
				+        ctx.fillStyle = this.color;
			
 
				+        ctx.fill();
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Ellipse extends Drawable {
			
 
				+    constructor(x, y, radiusX, radiusY, color) {
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.radiusX = radiusX;
			
 
				+        this.radiusY = radiusY;
			
 
				+        this.color = color;
			
 
				+
			
 
				+        
			
 
				+        this.draw();
			
 
				+    }
			
 
				+
			
 
				+    draw() {
			
 
				+        ctx.beginPath();
			
 
				+        ctx.ellipse(this.x, this.y, this.radiusX, this.radiusY, 0, 0, 2 * Math.PI);
			
 
				+        ctx.closePath();
			
 
				+        ctx.fillStyle = this.color;
			
 
				+        // ctx.fill(); // рисует закрашенный ellipse
			
 
				+        ctx.stroke(); // рисует границы ellipse
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Square extends Drawable {
			
 
				+    constructor(x, y, width, color){
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.width = width;
			
 
				+        this.color = color;
			
 
				+
			
 
				+        this.draw(); 
			
 
				+    }
			
 
				+    
			
 
				+    draw(){
			
 
				+        ctx.beginPath();
			
 
				+        ctx.strokeRect(this.x, this.y, this.width, this.width); // рисует границы square
			
 
				+        // ctx.fillRect(this.x, this.y, this.width, this.width); // рисует закрашенный square
			
 
				+        ctx.fillStyle = this.color;
			
 
				+        ctx.fill();
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class Triangle extends Drawable {
			
 
				+    constructor(x, y, color){
			
 
				+        super()
			
 
				+        this.x = x;
			
 
				+        this.y = y;
			
 
				+        this.oneX = x;
			
 
				+        this.oneY = y;
			
 
				+        this.twoX = x;
			
 
				+        this.twoY = y;
			
 
				+        this.color = color;
			
 
				+
			
 
				+        this.draw(); 
			
 
				+    }
			
 
				+    
			
 
				+    draw(){
			
 
				+        ctx.beginPath();
			
 
				+        ctx.moveTo(this.x, this.y);
			
 
				+        ctx.lineTo(this.twoX, this.twoY);
			
 
				+        ctx.lineTo(this.oneX, this.oneY);
			
 
				+        ctx.closePath();
			
 
				+        // ctx.stroke(); // рисует границы triangle
			
 
				+        ctx.fill(); // рисует закрашенный triangle
			
 
				+        ctx.fillStyle = this.color;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+color.onchange = () => {
			
 
				+    selection.forEach(c => c.color = color.value)
			
 
				+    Drawable.drawAll(selection)
			
 
				+}
			
 
				+
			
 
				+document.getElementById('delete').onclick = () =>{
			
 
				+    Drawable.instances = Drawable.instances.filter(item => !selection.includes(item))
			
 
				+    selection = []
			
 
				+    Drawable.instances = []; // очищение массива полностью
			
 
				+    Drawable.drawAll()
			
 
				+}
			
 
				+
			
 
				+undo.onclick = function () {
			
 
				+    Drawable.instances.pop(); // удаление последнего элемента в массиве
			
 
				+    Drawable.drawAll()
			
 
				+}
			
--- a/js22-JSX/react/README.md
+++ b/js22-JSX/react/README.md
@@ -0,0 +1,70 @@
 
				+# Getting Started with Create React App
			
 
				+
			
 
				+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
			
 
				+
			
 
				+## Available Scripts
			
 
				+
			
 
				+In the project directory, you can run:
			
 
				+
			
 
				+### `npm start`
			
 
				+
			
 
				+Runs the app in the development mode.\
			
 
				+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
			
 
				+
			
 
				+The page will reload if you make edits.\
			
 
				+You will also see any lint errors in the console.
			
 
				+
			
 
				+### `npm test`
			
 
				+
			
 
				+Launches the test runner in the interactive watch mode.\
			
 
				+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
			
 
				+
			
 
				+### `npm run build`
			
 
				+
			
 
				+Builds the app for production to the `build` folder.\
			
 
				+It correctly bundles React in production mode and optimizes the build for the best performance.
			
 
				+
			
 
				+The build is minified and the filenames include the hashes.\
			
 
				+Your app is ready to be deployed!
			
 
				+
			
 
				+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
			
 
				+
			
 
				+### `npm run eject`
			
 
				+
			
 
				+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
			
 
				+
			
 
				+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
			
 
				+
			
 
				+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
			
 
				+
			
 
				+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
			
 
				+
			
 
				+## Learn More
			
 
				+
			
 
				+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
			
 
				+
			
 
				+To learn React, check out the [React documentation](https://reactjs.org/).
			
 
				+
			
 
				+### Code Splitting
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
			
 
				+
			
 
				+### Analyzing the Bundle Size
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
			
 
				+
			
 
				+### Making a Progressive Web App
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
			
 
				+
			
 
				+### Advanced Configuration
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
			
 
				+
			
 
				+### Deployment
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
			
 
				+
			
 
				+### `npm run build` fails to minify
			
 
				+
			
 
				+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
			
--- a/js22-JSX/react/node_modules/.bin/acorn
+++ b/js22-JSX/react/node_modules/.bin/acorn
@@ -0,0 +1 @@
 
				+../acorn/bin/acorn
			
--- a/js22-JSX/react/node_modules/.bin/ansi-html
+++ b/js22-JSX/react/node_modules/.bin/ansi-html
@@ -0,0 +1 @@
 
				+../ansi-html/bin/ansi-html
			
--- a/js22-JSX/react/node_modules/.bin/atob
+++ b/js22-JSX/react/node_modules/.bin/atob
@@ -0,0 +1 @@
 
				+../atob/bin/atob.js
			
--- a/js22-JSX/react/node_modules/.bin/autoprefixer
+++ b/js22-JSX/react/node_modules/.bin/autoprefixer
@@ -0,0 +1 @@
 
				+../autoprefixer/bin/autoprefixer
			
--- a/js22-JSX/react/node_modules/.bin/babylon
+++ b/js22-JSX/react/node_modules/.bin/babylon
@@ -0,0 +1 @@
 
				+../babylon/bin/babylon.js
			
--- a/js22-JSX/react/node_modules/.bin/browserslist
+++ b/js22-JSX/react/node_modules/.bin/browserslist
@@ -0,0 +1 @@
 
				+../browserslist/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/css-blank-pseudo
+++ b/js22-JSX/react/node_modules/.bin/css-blank-pseudo
@@ -0,0 +1 @@
 
				+../css-blank-pseudo/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/css-has-pseudo
+++ b/js22-JSX/react/node_modules/.bin/css-has-pseudo
@@ -0,0 +1 @@
 
				+../css-has-pseudo/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/css-prefers-color-scheme
+++ b/js22-JSX/react/node_modules/.bin/css-prefers-color-scheme
@@ -0,0 +1 @@
 
				+../css-prefers-color-scheme/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/cssesc
+++ b/js22-JSX/react/node_modules/.bin/cssesc
@@ -0,0 +1 @@
 
				+../cssesc/bin/cssesc
			
--- a/js22-JSX/react/node_modules/.bin/detect
+++ b/js22-JSX/react/node_modules/.bin/detect
@@ -0,0 +1 @@
 
				+../detect-port-alt/bin/detect-port
			
--- a/js22-JSX/react/node_modules/.bin/detect-port
+++ b/js22-JSX/react/node_modules/.bin/detect-port
@@ -0,0 +1 @@
 
				+../detect-port-alt/bin/detect-port
			
--- a/js22-JSX/react/node_modules/.bin/errno
+++ b/js22-JSX/react/node_modules/.bin/errno
@@ -0,0 +1 @@
 
				+../errno/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/escodegen
+++ b/js22-JSX/react/node_modules/.bin/escodegen
@@ -0,0 +1 @@
 
				+../escodegen/bin/escodegen.js
			
--- a/js22-JSX/react/node_modules/.bin/esgenerate
+++ b/js22-JSX/react/node_modules/.bin/esgenerate
@@ -0,0 +1 @@
 
				+../escodegen/bin/esgenerate.js
			
--- a/js22-JSX/react/node_modules/.bin/eslint
+++ b/js22-JSX/react/node_modules/.bin/eslint
@@ -0,0 +1 @@
 
				+../eslint/bin/eslint.js
			
--- a/js22-JSX/react/node_modules/.bin/esparse
+++ b/js22-JSX/react/node_modules/.bin/esparse
@@ -0,0 +1 @@
 
				+../esprima/bin/esparse.js
			
--- a/js22-JSX/react/node_modules/.bin/esvalidate
+++ b/js22-JSX/react/node_modules/.bin/esvalidate
@@ -0,0 +1 @@
 
				+../esprima/bin/esvalidate.js
			
--- a/js22-JSX/react/node_modules/.bin/he
+++ b/js22-JSX/react/node_modules/.bin/he
@@ -0,0 +1 @@
 
				+../he/bin/he
			
--- a/js22-JSX/react/node_modules/.bin/html-minifier-terser
+++ b/js22-JSX/react/node_modules/.bin/html-minifier-terser
@@ -0,0 +1 @@
 
				+../html-minifier-terser/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/import-local-fixture
+++ b/js22-JSX/react/node_modules/.bin/import-local-fixture
@@ -0,0 +1 @@
 
				+../import-local/fixtures/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/is-ci
+++ b/js22-JSX/react/node_modules/.bin/is-ci
@@ -0,0 +1 @@
 
				+../is-ci/bin.js
			
--- a/js22-JSX/react/node_modules/.bin/is-docker
+++ b/js22-JSX/react/node_modules/.bin/is-docker
@@ -0,0 +1 @@
 
				+../is-docker/cli.js
			
--- a/js22-JSX/react/node_modules/.bin/jest
+++ b/js22-JSX/react/node_modules/.bin/jest
@@ -0,0 +1 @@
 
				+../jest/bin/jest.js
			
--- a/js22-JSX/react/node_modules/.bin/jest-runtime
+++ b/js22-JSX/react/node_modules/.bin/jest-runtime
@@ -0,0 +1 @@
 
				+../jest-runtime/bin/jest-runtime.js
			
--- a/js22-JSX/react/node_modules/.bin/js-yaml
+++ b/js22-JSX/react/node_modules/.bin/js-yaml
@@ -0,0 +1 @@
 
				+../js-yaml/bin/js-yaml.js
			
--- a/js22-JSX/react/node_modules/.bin/jsesc
+++ b/js22-JSX/react/node_modules/.bin/jsesc
		`@@ -0,0 +1 @@`
		`+Subproject commit e8670844aa42e66e9717f9c0c3626f3a873a7db2`