diff --git a/01/1.html b/01/1.html
index 58bedc6..aa2a4f1 100644
--- a/01/1.html
+++ b/01/1.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
-  <title>Homework</title>
+  <title>Homework.</title>
 </head>
+
 <body>
-<!--
+  <!-- 
 Обязательное задание.
 
-Необходимо пользователя попросить ввести температуру в градусах Цельсия,
+Необходимо пользователя попросить ввести температуру в градусах Цельсия, 
 преобразовать введенное пользователем значение в соответствующую температуру
 в градусах по Фаренгейту и вывести в alert сообщение с текстом:
 "Цельсий: {C}, Фаренгейт: {F}"
@@ -19,12 +21,13 @@
 
 Уточнение: пользователь всегда вводит корректное число.
 -->
-<script>
-  "use strict";
-   const temp = prompt('Ведите температуру в градусах Цельсия');
-   const far = (9 / 5) * temp + 32;
-   alert(`Цельсий: ${temp}, Фаренгейт: ${far}`);
-   
-</script>
+  <script>
+    "use strict";
+
+    const temp = prompt('Ведите температуру в градусах Цельсия');
+    const far = (9 / 5) * temp + 32;
+    alert(`Цельсий: ${temp}, Фаренгейт: ${far}`);
+  </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/01/2.html b/01/2.html
index 55bc9ab..5c128fc 100644
--- a/01/2.html
+++ b/01/2.html
@@ -15,6 +15,7 @@
 -->
 <script>
   "use strict";
+  
    const name = "Nkita";
    const admin = name;
    console.log(admin);
diff --git a/01/3.html b/01/3.html
index e72984e..968ebbc 100644
--- a/01/3.html
+++ b/01/3.html
@@ -29,6 +29,7 @@
 -->
 <script>
   "use strict";
+  
    console.log(10 + 10 + "10");//ответ 2010 //к числу 10 прибавляем 10, и прибавляем строку 10, при сложении со строкой получается конкатенация строки получаем числр 20 плюс строка 10 = 2010
    console.log(10 + "10" + 10);//ответ 101010 //  к числу 10 прибавляем строку 10 в результате получаем конкатенацию строки и к ней прибавляем еще 10 и опять ее конкатениркуем, тк при сложении со строкой получается строка.
    console.log(10 + 10 + +"10");//ответ 30 // к числу 10 прибавляем число 10 и к нему прибавляем приведенноую строку к числу 10 путем приведения типа оператором "+"
diff --git a/02/1.html b/02/1.html
new file mode 100644
index 0000000..23da578
--- /dev/null
+++ b/02/1.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Для кода вставленного в теге script необходимо дать комментарии, почему мы
+получаем такой результат (в свободной форме).
+
+Подсказка. Чтобы лучше разобраться возьмите этот код и запустите в отладчике в
+браузере со включенными точками остановки.
+-->
+<script>
+  "use strict";
+
+  let a = 1, b = 1, c, d;
+	//cоздаем переменную a, b, с, d 
+  /*
+  Ваш комментарий, почему переменная `c` хранит данное значение?
+   */
+  c = ++a;
+  console.log(c);
+  //в переменную с кладем переменную а с префиксным инкрементом, тоесть увеличиваем ее значение на 1 перед вызовом получаем 1+1 = 2
+  /*
+  Ваш комментарий, почему переменная `d` хранит данное значение?
+   */
+  d = b++;
+  console.log(d);
+  //  переменной d присваиваем значение перемнной b c постфексным инкрементом после вызова, тоесть получаем текущее значение b = 1;
+
+  /*
+  Ваш комментарий, почему переменная `c` хранит данное значение?
+   */
+  c = 2 + ++a;
+  console.log(c);
+	//переменной c присваиваем значение выражения (число 2 + префискное значение инкремента перемеенной а=2+1 из предыдущего вызова а  = 2 увеличиваем на 1 = 3+2 = 5; 
+  /*
+  Ваш комментарий, почему переменная `d` хранит данное значение?
+   */
+  d = 2 + b++;
+  console.log(d);
+	//переменной d присваиваем значение выражения 2+ при данном вызове b =2 вследствии постфиксного инкремента и тк к переменной b опять приавляем инкремент постфиксно получаем 2+2=4
+	console.log(a);
+  //а = 3 из предыдущего примера
+  console.log(b);
+  //b = 3 из за постфиксного инкремента из прошлого вызова
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02/2.html b/02/2.html
new file mode 100644
index 0000000..72eea7d
--- /dev/null
+++ b/02/2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Для кода вставленного в теге script необходимо дать комментарии, почему мы
+получаем такой результат (в свободной форме).
+
+Подсказка. Чтобы лучше разобраться возьмите этот код и запустите в отладчике в
+браузере со включенными точками остановки.
+-->
+<script>
+  "use strict";
+
+  let a = 2;
+  let x = 1 + (a *= 2);
+
+  /*
+  Ваш комментарий, почему переменные `x` и `a` хранят данные значения?
+   */
+  console.log(x);
+  console.log(a);
+//Переменная x хранит результат выражения в котором переменная а присваивает новое значение = 4, а *=2 === a = a *2; 4+1=5
+/
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02/3.html b/02/3.html
new file mode 100644
index 0000000..63aa31f
--- /dev/null
+++ b/02/3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо попросить пользователя ввести два числа в переменные `a` и `b`.
+Необходимо вывести в консоль один результат из следующих проверок:
+1. Если оба числа в переменных `a` и `b` положительные, вывести разность
+чисел `a` и `b`, а именно, вычесть из переменной `a` значение переменной `b`.
+2. Если оба числа в переменных `a` и `b` отриsцательные, вывести произведение
+чисел `a` и `b`.
+3. Если числа в переменных `a` и `b` разных знаков, вывести сумму чисел
+`a` и `b`.
+В остальных случаях программа не должна ничего выводить.
+-->
+<script>
+  "use strict";
+
+	const a = Number(prompt('Веедите первое число'));
+	const b = Number(prompt('Веедите второе число'));
+	
+	if(a > 0 && b > 0){
+		console.log(a-b);
+	}else if( a < 0 && b < 0 ){
+		console.log(a*b);
+	}else{
+		console.log(a+b);
+	}
+	
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02/4.html b/02/4.html
new file mode 100644
index 0000000..76efa40
--- /dev/null
+++ b/02/4.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо реализовать четыре функции, каждая функция должна принимать по два
+числа и выполнять одну из операций (каждая функция выполняет одну из них):
+1. Сложение
+2. Разность
+3. Умножение
+4. Деление
+
+Необходимо сделать так, чтобы функция вернула число, например выражение
+`console.log(sum(2, 6));` должно вывести число 8 в консоль (sum - функция
+сложения в данном примере, ваши названия функций могут отличаться).
+
+Округлять значения, которые возвращают функции не нужно, однако, обратите
+внимание на разность, функция должна вычесть из большего числа меньшее, либо
+вернуть 0, если числа равны.
+
+Функциям всегда передаются корректные числа, проверки на NaN, Infinity делать
+не нужно.
+
+Необходимо для всех функций прописать комментарии jsdoc https://jsdoc.app/.
+-->
+<script>
+  "use strict";
+/**
+ * Сложение двух чисел
+ * @param {number} a - Первое число
+ * @param {number} b - Второе число
+ */
+function addition(a,b){
+  return a+b;
+}
+
+/**
+ * Разность двух чисел
+ * @param {number} a - Первое число
+ * @param {number} b - Второе число
+ */
+function difference(a,b){
+  if(a<b){
+    return b-a;
+  }else if(b<a){
+    return a-b;
+  }else{
+    return 0;
+  }
+  
+}
+
+/**
+ * Умножение двух чисел
+ * @param {number} a - Первое число
+ * @param {number} b - Второе число
+ */
+function multiplication(a,b){
+  return a*b;
+}
+
+/**
+ * Деление двух чисел
+ * @param {number} a - Первое число
+ * @param {number} b - Второе число
+ */
+function division(a,b){
+  return a/b;
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/02/5.html b/02/5.html
new file mode 100644
index 0000000..598293e
--- /dev/null
+++ b/02/5.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо скопировать и вставить в данный скрипт все функции из 4 задания.
+Необходимо реализовать функцию:
+mathOperation(arg1, arg2, operation);
+Параметры:
+arg1 - первое число.
+arg2 - второе число.
+operation - строка, которая содержит один символ из: "+", "-", "*", "/".
+Функция mathOperation должна вернуть результат операции, который был передан в
+параметр operation для двух первых аргументов (arg1 и arg2).
+Функция mathOperation должна использовать для вычисления функции из 4 задания.
+
+Примеры вызова функции:
+console.log(mathOperation(5, 3, "+")); // 8
+console.log(mathOperation(5, 3, ":)")); // NaN
+
+Функции mathOperation всегда передаются корректные числа, проверки на NaN,
+Infinity делать не нужно, однако, в случае если был передан некорректный
+аргумент в параметр operation, необходимо вернуть NaN.
+
+Необходимо для всех функций прописать комментарии jsdoc https://jsdoc.app/.
+-->
+<script>
+  "use strict";
+
+function mathOperation(a, b, operation){
+  switch (operation){
+    case '+':
+      return a+b;
+      break;
+    case '-':
+      if(a<b){
+         return b-a;
+       }else if(b<a){
+         return a-b;
+      }else{
+        return 0;
+      }
+    break;
+    case '*':
+      return a*b;
+      break
+    case '/':
+      return a/b;
+      break;
+    default:
+     return NaN;
+  }
+}
+  
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/1.html b/03/1.html
new file mode 100644
index 0000000..1ff71e2
--- /dev/null
+++ b/03/1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо с помощью цикла for вывести следующие 11 строк в консоль:
+0 – это ноль
+1 – нечетное число
+2 – четное число
+3 – нечетное число
+…
+10 – четное число
+-->
+<script>
+  "use strict";
+
+for(let i = 0; i<=10; i++){
+  if(i===0){
+    console.log(`${i} - это ноль`);
+  }else{
+    if(i%2){
+      console.log(`${i} - нечетное число`);
+    }else{   
+      console.log(`${i} - четное число`);
+    }
+  }
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/2.html b/03/2.html
new file mode 100644
index 0000000..280ac52
--- /dev/null
+++ b/03/2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо из объекта, который лежит в константе post вывести значения, к
+которым приписан комментарий, в консоль.
+-->
+<script>
+  "use strict";
+
+  const post = {
+    author: "John", // вывести этот текст
+    postId: 23,
+    comments: [
+      {
+        userId: 10,
+        userName: "Alex",
+        text: "lorem ipsum",
+        rating: {
+          likes: 10,
+          dislikes: 2, // вывести это число
+        },
+      },
+      {
+        userId: 5, // вывести это число
+        userName: "Jane",
+        text: "lorem ipsum 2", // вывести этот текст
+        rating: {
+          likes: 3,
+          dislikes: 1,
+        },
+      },
+    ],
+  };
+
+console.log(post.author);
+console.log(post.comments[0].rating.dislikes);
+console.log(post.comments[1].userId);
+console.log(post.comments[1].text);
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/3.html b/03/3.html
new file mode 100644
index 0000000..c8ece26
--- /dev/null
+++ b/03/3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Дан массив products, необходимо цену каждого продукта уменьшить на 15% используя
+метод forEach.
+-->
+<script>
+  "use strict";
+
+  const products = [
+    {
+      id: 3,
+      price: 200,
+    },
+    {
+      id: 4,
+      price: 900,
+    },
+    {
+      id: 1,
+      price: 1000,
+    },
+  ];
+
+products.forEach(element => {
+  console.log(element.price -= element.price*15/100 )
+});
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/4.html b/03/4.html
new file mode 100644
index 0000000..e90ad56
--- /dev/null
+++ b/03/4.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+1. Необходимо вывести в консоль массив продуктов в котором есть хоть одна
+фотография используя метод filter. Исходные данные - массив products.
+2. Необходимо отсортировать массив products используя метод sort по цене,
+начиная с самой маленькой, заканчивая самой большой ценой, после чего вывести
+отсортированный массив в консоль.
+-->
+<script>
+  "use strict";
+
+  const products = [
+    {
+      id: 3,
+      price: 127,
+      photos: [
+        "1.jpg",
+        "2.jpg",
+      ],
+    },
+    {
+      id: 5,
+      price: 499,
+      photos: [],
+    },
+    {
+      id: 10,
+      price: 26,
+      photos: [
+        "3.jpg",
+      ],
+    },
+    {
+      id: 8,
+      price: 78,
+    },
+  ];
+
+function filtering(arrItem){
+ 
+    return arrItem.photos && arrItem.photos.length>0;
+
+}
+const filterPhotoArr =  products.filter(filtering);
+
+console.log(filterPhotoArr);
+
+const sortPriceArr = products.sort(function(a, b){
+  return a.price - b.price;
+});
+
+console.log(sortPriceArr);
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/5.html b/03/5.html
new file mode 100644
index 0000000..90cdfda
--- /dev/null
+++ b/03/5.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Необязательное задание.
+
+Вывести с помощью цикла for числа от 0 до 9, НЕ используя тело цикла. То есть
+выглядеть должно примерно так:
+
+for(…){/* здесь пусто */}
+
+Вместо многоточия нужно записать нужные разделы.
+Помните, что в первом, втором и третьем раздела цикла можно не только писать
+условия или увеличивать счетчик, в этих разделах допустимы любые выражения,
+например вызовы функций.
+-->
+<script>
+  "use strict";
+
+
+  for(let i = 0;i<=9;console.log(i),i++){}
+  
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/03/6.html b/03/6.html
new file mode 100644
index 0000000..203bf9c
--- /dev/null
+++ b/03/6.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Необязательное задание.
+
+Необходимо вывести горку в консоль (используя цикл for), как показано на
+рисунке, только у вашей горки должно быть 20 рядов, а не 5:
+
+```
+x
+xx
+xxx
+xxxx
+xxxxx
+```
+
+Примечание: в трех косых кавычках ``` показан пример кода для вывода, вам эти
+кавычки выводить не нужно.
+-->
+<script>
+  "use strict";
+
+for(let i=1,x='';i<=20;i++, x+='x'){
+  console.log(x);
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/04/1.html b/04/1.html
new file mode 100644
index 0000000..9bca39e
--- /dev/null
+++ b/04/1.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо данное задание выполнить в es5 стиле и в es6 стиле.
+Необходимо создать функцию-конструктор/класс для продукта.
+Названия: `ProductES5` для es5 стиля, `ProductES6` для es6 стиля.
+При создании объекта от функции-конструктора/класса необходимо передавать имя
+и цену товара, эта информация должна быть сохранена в объекте.
+Также у объекта должна быть возможность выполнить метод `make25Discount`, данный
+метод должен уменьшать стоимость продукта на 25%.
+Необходимо продемонстрировать работу с объектом (в свободной форме).
+-->
+<script>
+  "use strict";
+  
+function ProductES5(name,price){
+	this.name = name;
+	this.price = +price;
+}
+
+ProductES5.prototype.make25Discount = function(){
+	this.price -= (this.price/100)*25;
+	console.log(`${this.name}, цена со скидкой 25% : ${this.price}р.(ES5)`);
+}
+
+var product1 = new ProductES5('банан',500);
+product1.make25Discount();
+
+
+class ProductES6{
+	constructor(name,price){
+		this.name = name;
+		this.price = +price;
+	}
+	make25Discount(){
+		this.price -= (this.price/100)*25;
+		console.log(`${this.name}, цена со скидкой 25% : ${this.price}р.(ES6)`);
+	}
+}
+
+const product2 = new ProductES6('Яблоко', 200);
+product2.make25Discount();
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/04/2.html b/04/2.html
new file mode 100644
index 0000000..3fb2c44
--- /dev/null
+++ b/04/2.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Необходимо данное задание выполнить в es5 стиле и в es6 стиле.
+Необходимо создать функцию-конструктор/класс для поста в социальной сети.
+Названия: `PostES5` для es5 стиля и `PostES6` для es6 стиля.
+Пост должен хранить:
+1. Автора поста (имени достаточно).
+2. Текст поста.
+3. Дату и время последнего изменения поста.
+Данные автора поста и текст поста необходимо передавать при создании
+экземпляра объекта.
+Каждому экземпляру объекта должен быть доступен метод `edit`, который будет
+менять текст поста.
+
+---
+
+Необходимо создать функцию-конструктор/класс для закрепленного поста в
+социальной сети.
+Названия: `AttachedPostES5` для es5 стиля и `AttachedPostES6` для es6 стиля.
+Закрепленный пост должен наследоваться от обычного поста.
+Данные автора поста и текст поста необходимо передавать при создании
+экземпляра объекта.
+Закрепленный пост должен иметь свойство `highlighted`, в котором по умолчанию
+будет лежать значение false (это свойство будет обозначать, будет ли наш
+закрепленный пост подсвечен).
+У экземпляров объекта закрепленного поста должен быть метод с названием
+`makeTextHighlighted`, который сделает так, чтобы наш пост стал подсвеченным
+(будет менять свойство `highlighted`).
+
+---
+
+Подсказки:
+1. Задание сложное, советую делать по аналогии с примером на онлайн-занятии.
+2. Обратите внимание что пост хранит "дату и время последнего изменения
+поста", это значит что если пост кто-то изменит (например вызовет какой-то
+метод, который изменит что-то в посте), дата и время последнего изменения
+поста также должна измениться.
+3. Выполняйте все по порядку, не стоит пытаться сделать все сразу, иначе можно
+что-нибудь пропустить.
+4. Если непонятно условие - задайте вопрос.
+-->
+<script>
+  "use strict";
+
+function PostES5(author, text){
+	this.author = author;
+	this.text = text;
+	this.dateOfLastChange = new Date();	
+}
+
+PostES5.prototype.edit = function(newText){
+	this.text = newText;
+	this.dateOfLastChange = new Date();
+	return `changed! text: ${this.text} date: ${this.dateOfLastChange}(ES5)`;
+}
+var post1 = new PostES5('Никита', 'Произвольный текст');
+post1.edit('Новый текст');
+
+class PostES6{
+	constructor(author, text){
+		this.author = author;
+		this.text = text;
+		this.dateOfLastChange = new Date();
+	}
+	
+	edit(newText){
+		this.text = newText;
+		this.dateOfLastChange = new Date();
+		return `changed! text: ${this.text} date: ${this.dateOfLastChange}(ES6)`;
+	}
+}
+
+const post2 = new PostES6('Добрыня','sample text');
+post2.edit('new text')
+
+function AttachedPostES5(author, text){
+	PostES5.call(this, author, text);
+	this.highlighted = false;
+}
+
+AttachedPostES5.prototype.constructor = AttachedPostES5;
+
+AttachedPostES5.prototype.makeTextHighlighted = function(){
+	this.highlighted = true;
+	return 'highlighted on';
+}
+
+var attachedPost1 = new AttachedPostES5('Толик','текст');
+attachedPost1.makeTextHighlighted();
+
+class AttachedPostES6 extends PostES6{
+	constructor(author, text){
+		super(this,author, text);
+		this.highlighted = false;
+	}
+	makeTextHighlighted(){
+		this.highlighted = true;
+		return 'highlighted on';
+	}
+}
+
+const attachedPost2 = new AttachedPostES5('Жорик','текст2');
+attachedPost2.makeTextHighlighted();
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/04/3.html b/04/3.html
new file mode 100644
index 0000000..66b7391
--- /dev/null
+++ b/04/3.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Необязательное задание.
+
+Необходимо создать функцию getDigitsOfNumber, которая принимает целое
+положительное число в диапазоне от 0 до 1000.
+Функция должна вернуть обычный объект с тремя свойствами:
+1. units - содержит число, количество единиц в параметре функции.
+2. dozens - содержит число, количество десятков в параметре функции.
+3. hundreds - содержит число, количество сотен в параметре функции.
+Если функции было передано не целое положительное число, либо число в ином
+диапазоне, нежели задано в условии, функция должна вывести в консоль информацию
+об ошибке и вернуть пустой объект.
+Необходимо также прописать jsdoc для данной функции.
+
+Подсказка:
+У объекта console есть разные методы, мы часто используем console.log для того
+чтобы вывести в консоль какое-то значение, однако есть и другие методы, найдите
+в интернете какие методы существуют и используйте "правильный метод" в нужном
+месте. Обратите внимание что функция не должна выбрасывать ошибку, она должна
+только вывести в консоль информацию о том, что что-то пошло не так.
+Обратите внимание на слова "от 0 до 1000", это означает диапазон [0, 999], что
+можно прочитать как "от нуля до 999 включительно".
+-->
+<script>
+  
+  "use strict";
+
+/**	Функция getDigitsOfNumber - разложения числа, на сотни, десятки, единицы.
+ * @param{number} Число в диапазоне 0 - 999
+ * @returns{object} Обьект с свойствами:
+ *  object.units - содержит число, количество единиц в параметре функции.
+ * object.dozens - содержит число, количество десятков в параметре функции.
+ * object.hundreds - содержит число, количество сотен в параметре функции.
+ */
+
+  function getDigitsOfNumber(int){
+		int = Math.round(int);
+		const obj = {}
+		if(int>=0&&int<1000){
+			obj.units = Math.floor((int%100%10)/1);
+			obj.dozens = Math.floor((int%100)/10);
+			obj.hundreds = Math.floor(int/100);
+			return obj;
+		}else{
+			console.dir('Введите число в диапазоне от 0 до 999 включительно')
+			return obj;
+		}
+	}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/05/1.html b/05/1.html
new file mode 100644
index 0000000..67e2668
--- /dev/null
+++ b/05/1.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+<a href="#" class="card-link">Card link</a>
+<a href="#" class="card-link">Another link</a>
+
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title" data-number="100">Card title</h5>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <p class="card-text" data-number="50">
+      Some quick example text to build on the card title and make up the bulk of the card's
+      content.
+    </p>
+    <a href="#" id="super_link" class="card-link">Card link</a>
+    <a href="#" class="card-link" data-number="50">Another link</a>
+  </div>
+</div>
+
+<script>
+  "use strict";
+
+  /*
+  1. Найти по id, используя getElementById, элемент с id равным "super_link" и
+  вывести этот элемент в консоль.
+   */
+
+   console.log(document.getElementById('super_link'));
+
+  /*
+  2. Внутри всех элементов на странице, которые имеют класс "card-link",
+  поменяйте текст внутри элемента на "ссылка".
+   */
+  const cardsLink = document.querySelectorAll('.card-link');
+  for(const card of cardsLink){
+    card.innerText = 'ссылка';
+  }
+
+  /*
+  3. Найти все элементы на странице с классом "card-link", которые лежат в
+  элементе с классом "card-body" и вывести полученную коллекцию в консоль.
+   */
+  const cardBodyCardsLink = document.querySelectorAll('.card-body .card-link');
+  console.log(cardBodyCardsLink);
+
+  /*
+  4. Найти первый попавшийся элемент на странице у которого есть атрибут
+  data-number со значением 50 и вывести его в консоль.
+   */
+
+  const firstDataNumber50 = document.querySelector('[data-number="50"]');
+  console.log(firstDataNumber50);
+  /*
+  5. Выведите содержимое тега title в консоль.
+   */
+  console.log(document.title);
+
+  /*
+  6. Получите элемент с классом "card-title" и выведите его родительский узел
+  в консоль.
+   */
+
+   const cardTitle = document.querySelector('.card-title');
+   console.log(cardTitle.parentNode);
+
+  /*
+  7. Создайте тег `p`, запишите внутри него текст "Привет" и добавьте созданный
+  тег в начало элемента, который имеет класс "card".
+   */
+    const tagP = document.createElement('p');
+    tagP.innerText = 'Привет';
+    document.querySelector('.card').append(tagP);
+
+  /*
+  8. Удалите тег h6 на странице.
+   */
+
+   document.querySelector('h6').remove();
+   
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/05/2.html b/05/2.html
new file mode 100644
index 0000000..10031b0
--- /dev/null
+++ b/05/2.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+<p class="dropdown">Привет :)</p>
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+          aria-haspopup="true" aria-expanded="false">
+    Dropdown button
+  </button>
+  <div class="menu dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+
+<script>
+  "use strict";
+
+  /*
+  1. Ко всем элементам, имеющим класс "dropdown-item" добавить еще один класс
+  "super-dropdown", необходимо использовать методы forEach и querySelectorAll и
+  свойство classList у элементов.
+   */
+    const dropdownItems = document.querySelectorAll('dropdown-item');
+    dropdownItems.forEach(el => el.classList.add('super-dropdown'));
+    /*
+  2. У элемента с классом btn необходимо убрать класс "btn-secondary", если он
+  присутствует у этого элемента, либо добавить, если такого класса у элемента
+  не было.
+   */
+    document.querySelector('.btn').classList.toggle('btn-secondary');
+
+  /*
+  3. Необходимо удалить класс "dropdown-menu" у элемента, у которого
+  присутствует класс "menu".
+   */
+    document.querySelector('.menu').classList.remove('dropdown-menu');
+
+
+  /*
+  4. Используя метод insertAdjacentHTML добавьте после div'a с классом
+  "dropdown" следующую разметку:
+    <a href="#">link</a>
+   */
+    document.querySelector('div.dropdown').insertAdjacentHTML('afterend','<a href="#">link</a>');
+
+  /*
+  5. У элемента с id "dropdownMenuButton" замените id на "superDropdown".
+   */
+  
+   document.querySelector('#dropdownMenuButton').setAttribute('id','superDropdown');
+
+  /*
+  6. Добавьте атрибут data-dd со значением 3 элементу у которого существует
+  атрибут "aria-labelledby" равный "dropdownMenuButton" используя dataset.
+   */
+    document.querySelector('[aria-labelledby="dropdownMenuButton"]').dataset.dd = 3;
+
+  /*
+  7. Удалите атрибут type у элемента с классом "dropdown-toggle".
+   */
+    document.querySelector('.dropdown-toggle').removeAttribute('type');
+
+  /*
+  8. Выведите в консоль все имеющиеся атрибуты и их значения тега у которого
+  есть все два класса btn и dropdown-toggle.
+  Вывод каждого атрибута и значений должен выглядеть следующим образом (пример):
+  Атрибут "class" содержит значение "btn btn-secondary dropdown-toggle"
+   */
+   
+   const btnAttributes = document.querySelector('.btn.dropdown-toggle').attributes;
+    for(const attribute of btnAttributes){
+      console.log(`Атрибут "${attribute.name}" содержит значение "${attribute.value}"`);
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/05/3.html b/05/3.html
new file mode 100644
index 0000000..2e53487
--- /dev/null
+++ b/05/3.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+<p class="super_element">Привет</p>
+
+<img src="https://placeimg.com/50/50/animals" alt="">
+<img src="https://placeimg.com/50/50/arch" alt="">
+<img src="https://placeimg.com/50/50/nature" alt="">
+<img src="https://placeimg.com/50/50/people" alt="">
+<img src="https://placeimg.com/50/50/tech" alt="">
+<img src="https://placeimg.com/50/50/tech/grayscale" alt="">
+<img src="https://placeimg.com/50/50/tech/sepia" alt="">
+
+<br>
+
+<button>Кнопка</button>
+<button class="super_element">Кнопка с классом btn</button>
+<button>Кнопка</button>
+
+<br>
+
+<textarea></textarea>
+
+<br>
+
+<ul>
+  <li>
+    <button>Кнопка 1</button>
+  </li>
+  <li>
+    <button>Кнопка 2</button>
+  </li>
+  <li>
+    <button>Кнопка 3</button>
+  </li>
+  <li>
+    <button>Кнопка 4</button>
+  </li>
+</ul>
+
+<script>
+  "use strict";
+
+  /*
+  1. Необходимо вывести сообщение в консоль "все теги прогрузились", когда все
+  теги будут созданы браузером.
+  */
+  document.addEventListener('DOMContentLoaded',()=>console.log('все теги прогрузились'));
+
+  /*
+  2. Необходимо вывести сообщение в консоль "страница загрузилась", когда все
+  ресурсы страницы будут загружены.
+  */
+  document.addEventListener('load',()=>console.log('страница загрузилась'));
+
+  /*
+  3. При клике на какой-либо тег на странице в консоль должно выводиться
+  сообщение наподобие:
+  Класс "super_element" присутствует в элементе "div".
+  сообщение должно определять присутствует или отсутствует класс "super_element"
+  у элемента, а также выводить в нижнем регистре верный тег в данной строке, по
+  которому был совершен клик.
+  Необходимо использовать делегирование.
+  */
+    document.body.addEventListener('click',event=>{
+      if(event.target.classList.contains('super_element')){
+ 
+        console.log(`Класс "super_element" присутствует в элементе "${event.target.localName}".`);
+      }else{
+
+        console.log(`Класс "super_element" отсутствует в элементе "${event.target.localName}".`);
+      }
+    });
+
+  /*
+  4. Сделайте, чтобы при наведении на textarea в консоли появлялось сообщение:
+  "Вы навели на textarea."
+   */
+    document.querySelector('textarea').addEventListener('mouseenter', () => console.log('Вы навели на textarea.'));
+
+  /*
+  5. Необходимо повесить событие клика на тег ul. В обработчике события в
+  консоль необходимо выводить текст, который записан внутри элемента кнопки,
+  по которой был произведен клик.
+  Если клик был не по кнопке, то ничего выводить не нужно.
+  Необходимо использовать делегирование.
+   */
+    document.querySelector('ul').addEventListener('click', event => {
+        if(event.target.localName==='button'){
+          console.log(event.target.innerText);
+        }
+    });
+
+  /*
+  6. Вопрос: Почему в console.log пишется сначала текст из 5 задания и только
+  потом выводится текст из 3 задания, если мы кликаем по кнопкам в ul?
+  Ответ необходимо написать здесь же, под этим комментарием, своими словами.
+  */
+   /*Потому, что обработчики событей висят на разных тегах, и видимо при делегировании идут вверх по дереву и сообвественно по приоритету. Если повесить обработчик 5 задания на body то порядок изменится, тк они будут находится на одном уровне дерева и выполняться будут последовательно.  
+
+  /*
+  7. С помощью JS необходимо изменить цвет заднего фона каждого второго тега li.
+   */
+  document.querySelector('li:nth-child(2)').style.backgroundColor = 'red';
+  
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/06/1.html b/06/1.html
new file mode 100644
index 0000000..9301550
--- /dev/null
+++ b/06/1.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+  <style>
+    .product {
+      width: 200px;
+      padding: 10px;
+      float: left;
+      margin-right: 30px;
+      box-shadow: 0 0 4px black;
+    }
+  </style>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+<div class="product">
+  <div class="productName">Товар 1</div>
+  <img src="https://picsum.photos/id/367/200/300" alt="">
+  <button>В корзину</button>
+</div>
+<div class="product">
+  <div class="productName">Товар 2</div>
+  <img src="https://picsum.photos/id/425/200/300" alt="">
+  <button>В корзину</button>
+</div>
+<div class="product">
+  <div class="productName">Товар 3</div>
+  <img src="https://picsum.photos/id/429/200/300" alt="">
+  <button>В корзину</button>
+</div>
+
+<script>
+  "use strict";
+
+  /*
+  1. Установите всем элементам с классом "productName" размер шрифта 24px.
+   */
+  const productNames = document.querySelectorAll('.productName');
+  for ( let i=0; i < productNames.length; i++ ){
+
+    productNames[i].style.width='24px';
+
+  }
+  /*
+  2. Установите всем элементам с классом "product" внешний отступ справа 50px.
+   */
+   const products = document.querySelectorAll('.product');
+  for ( let i=0; i < products.length; i++ ){
+
+    products[i].style.marginRight='50px';
+
+  }
+
+  /*
+  3. При клике на кнопку "В корзину" название кнопки должно поменяться на
+  "Добавлено" и кнопка должна стать неактивной.
+   */
+
+  function addEnentToBtns(btnsSelector){
+    const addToCardBtns = document.querySelectorAll(btnsSelector);
+    for ( let i=0; i<addToCardBtns.length; i++ ) {
+      addToCardBtns[i].addEventListener('click', event => {
+      
+        event.preventDefault();
+        event.target.innerText = 'Добавлено';
+        event.target.disabled = true;
+      
+    });
+  }  
+ } 
+ addEnentToBtns('.product button');
+
+  /*
+  4. Создайте полную (глубокую) копию элемента с классом product, измените в
+  этой копии путь до картинки на:
+  https://picsum.photos/id/1080/200/300
+  Поставьте название товара в данной копии "Товар 4" и замените последний
+  отображенный товар на странице на созданную копию. У данной копии также
+  должен правильно работать код из 3-го задания.
+   */
+  const copiedProduct = document.querySelector('.product').cloneNode(true);
+  copiedProduct.src='https://picsum.photos/id/1080/200/300';
+  copiedProduct.firstChild.nextSibling.textContent = 'Товар 4';
+  document.querySelector('.product:last-of-type').replaceWith(copiedProduct);
+  addEnentToBtns('.product button');
+  //Посмотрел ваше решение, у вас гениально сделано, буду знать что так можно. 
+
+
+  /*
+  5. По истечению 2 секунд с момента открытия страницы первый товар должен быть
+  удален из html.
+   */
+  setTimeout(()=>{
+    document.querySelector('.product').remove();
+  }, 2000 );
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/06/2.html b/06/2.html
new file mode 100644
index 0000000..fb65d4c
--- /dev/null
+++ b/06/2.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
+  <style>
+    .message {
+      width: 150px;
+      padding: 20px;
+      background: lightgoldenrodyellow;
+      border: 1px solid orange;
+      visibility: hidden;
+    }
+    .error {
+      border: 0.3rem solid red;
+    }
+  </style>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+<input id="from" type="text">
+В инпуте написано: <span></span>
+
+<br>
+
+<button class="messageBtn">Показать блок</button>
+<div class="message">
+  Привет :)
+</div>
+
+<br>
+
+<form>
+  <label>
+    Первый инпут:
+    <input class="form-control" type="text">
+  </label>
+  <br>
+  <br>
+  <label>
+    Второй инпут:
+    <select class="form-control">
+      <option value=""></option>
+      <option value="1">Один</option>
+      <option value="2">Два</option>
+    </select>
+  </label>
+  <br>
+  <br>
+  <span></span>
+  <p>
+
+  </p>
+  <div></div>
+  <button>Отправить</button>
+</form>
+
+<script>
+  "use strict";
+
+  /*
+  1. При изменении значения в input с id="from", значение содержащееся в нем
+  должно моментально отображаться в span. То есть при печати в input'е тег span
+  также должен меняться.
+  */
+  const inputFrom = document.querySelector('#from');
+  const textFromInput = inputFrom.nextSibling;
+  
+  inputFrom.addEventListener('input', e => {
+    textFromInput.textContent += e.target.value;
+  }); 
+
+  /*
+  2. При клике на кнопку с классом messageBtn необходимо элементу с классом
+  message:
+  1) добавить два класса: animate__animated и animate__fadeInLeftBig
+  2) поставить данному элементу стиль visibility в значение 'visible'.
+   */
+  const msgBlock = document.querySelector('.message');
+  document.querySelector('.messageBtn')
+    .addEventListener('click', () => {
+      msgBlock.classList.add('animate__animated','animate__fadeInLeftBig');
+      msgBlock.style.visibility = 'visible';  
+  });
+
+  /*
+  3. Необходимо при отправке формы проверить, заполнены ли все поля в этой
+  форме. Если какое-либо поле не заполнено, форма не должна отправляться, также
+  должны быть подсвечены незаполненные поля (необходимо поставить класс error
+  незаполненным полям).
+  Как только пользователь начинает заполнять какое-либо поле, необходимо,
+  при вводе в данное поле, произвести проверку:
+  Если поле пустое, необходимо данное поле подсветить (поставить класс error
+  данному полю).
+  Если поле было чем-либо заполнено, подсветку (класс error) необходимо убрать.
+   */
+
+   const form = document.querySelector('form');
+
+   form.addEventListener('submit', event =>{
+      
+      const formElements = event.target.elements;
+        for ( let i = 0; i < formElements.length; i++ ) {
+         
+          validation(formElements[i],event);
+        
+        }   
+    });
+
+ 
+    form.addEventListener('input', event => {
+      event.preventDefault();
+      validation (event.target);
+    });
+    
+
+  function validation ( formInput, e ){
+  
+      if (formInput.value === '' && formInput.type !== 'submit') {
+        
+        formInput.classList.add('error');
+        
+          e.preventDefault();
+        
+      } else {
+
+        formInput.classList.remove('error');
+
+      }
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/06/3.html b/06/3.html
new file mode 100644
index 0000000..e00b1aa
--- /dev/null
+++ b/06/3.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
+  <style>
+    i {
+      font-size: 50px;
+    }
+    .golden {
+      color: gold;
+    }
+  </style>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+<div class="stars_container">
+<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
+</div>
+
+<script>
+  "use strict";
+
+  /*
+  1. При наведении на любую из звезд, данной звезде должен ставиться класс
+  golden, также такой класс должен ставиться всем звездам до нее слева.
+  */
+    const stars = document.querySelectorAll('.fas');
+    
+    for (let i = 0; i < stars.length; i++) {
+
+      stars[i].addEventListener('mouseover', event => {
+
+        event.target.classList.add('golden');
+        
+        if ( i ) {
+
+          for ( let j = 0; j < i; j++ ) {
+
+            stars[j].classList.add('golden');
+
+          }
+
+        }
+
+      });
+
+    }
+    
+    
+
+  /*
+  2. Когда мы уводим курсор мыши от звезды, все поставленные классы из первого
+  задания должны быть удалены.
+   */
+  document.querySelector('.stars_container').addEventListener('mouseout', event => {
+
+    for(let i = 0; i < stars.length; i++){
+
+          stars[i].classList.remove('golden');
+
+    }
+
+  });
+    
+  
+
+  /*
+  3. Когда мы переводим мышь от одной звезды к другой, у нас могут мигать
+  звезды (временно могут становиться черными). Почему так? Напишите словами.
+  Можем ли мы это исправить? Если да, то предложите решение.
+  */
+
+
+  /*В моем примере они мигают только потому что мышка проходт между тегами попадая на node "пробела"(наверно переноса строки) звезд тем самым выполняя событие mouseout.
+  Я удалил все пробелы и переносы строки из разметки, и все работает как надо.*/
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/07/1.html b/07/1.html
new file mode 100644
index 0000000..d6783c4
--- /dev/null
+++ b/07/1.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <style>
+    .nav {
+      margin-top: 30px;
+    }
+    #inputDiv {
+      font-size: 30px;
+    }
+  </style>
+</head>
+<body>
+<!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+<div class="container">
+  <ul class="nav nav-tabs">
+    <li class="nav-item" data-text="T1">
+      <a class="nav-link active" href="#">Link 1</a>
+    </li>
+    <li class="nav-item" data-text="X6">
+      <a class="nav-link" href="#">Link 2</a>
+    </li>
+    <li class="nav-item" data-text="H99">
+      <a class="nav-link" href="#">Link 3</a>
+    </li>
+  </ul>
+
+  <div class="text">Уверен, ты справишься с этим заданием!</div>
+
+  <input type="range" min="20" max="100">
+  <div id="inputDiv">
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, expedita.
+  </div>
+</div>
+
+<script>
+  "use strict";
+
+  /*
+  1. Необходимо сделать так, чтобы при клике на элемент с классом "nav-link",
+  данному элементу ставился класс "active", при этом у всхе других элементов с
+  классом nav-link данных элемент отсутствовал, необходимо использовать
+  делегирование события.
+  Также необходимо чтобы в div с классом text ставился нужный текст, который
+  прописан в объекте panelText (вам необходимо определить самостоятельно, что
+  общего между данной в html версткой и объектом ниже).
+  */
+  const textDiv = document.querySelector('.text')
+  document.querySelector('.nav').addEventListener('click', (event) => {
+    if (event.target.classList.contains('nav-link')) {
+      event.currentTarget.querySelector('.active').classList.remove('active');
+      event.target.classList.add('active');
+      textDiv.textContent = panelText[event.target.parentNode.dataset.text];
+    }
+  });
+
+  const panelText = {
+    T1: "Уверен, ты справишься с этим заданием!",
+    X6: "Знаю, программирование это нелегко.",
+    H99: "Однако, программирование, в итоге, принесет свои плоды.",
+  };
+
+
+  /*
+  2. Необходимо сделать так, чтобы при изменении input'а менялся и размер шрифта
+  у элемента с id="inputDiv". Перемещение ползунка должно плавно увеличивать
+  шрифт у текста, никакого резкого увеличения шрифта не должно быть при
+  перетаскивании ползунка.
+   */
+   const resDiv = document.querySelector('#inputDiv');
+   const input = document.querySelector('input');
+   resDiv.style.fontSize = input.value + 'px';
+   input.addEventListener('input', (event) =>{
+      resDiv.style.WebkitTransition = 'font-size .25s';
+      resDiv.style.MozTransition = 'font-size .25s';
+      resDiv.style.fontSize = event.target.value + 'px';
+   });
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/07/2.html b/07/2.html
new file mode 100644
index 0000000..4a93926
--- /dev/null
+++ b/07/2.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .products {
+      overflow: hidden;
+      margin-top: 40px;
+    }
+
+    .product {
+      float: left;
+      margin-right: 20px;
+    }
+  </style>
+</head>
+<body>
+<header>
+  <button class="menuButton" data-type="phones">Показать смартфоны</button>
+  <button class="menuButton" data-type="tablets">Показать планшеты</button>
+  <button class="menuButton" data-type="tv">Показать телевизоры</button>
+</header>
+
+<div class="products"></div>
+
+<script>
+  /*
+  1. Программист Паша уволился с работы и не закончил задачу.
+  Задача состояла в том, чтобы при клике на какую-либо кнопку в теге header
+  выводить продукты в div с классом products.
+  Продукты, которые надо вывести, валидны и прописаны в объекте products.
+  Однако, Паша явно сделал много ошибок в других кусках кода, вам необходимо
+  исправить все ошибки и внимательно проверить чтоб код работал правильно и
+  ничего лишнего не выводилось в div с классом products.
+  */
+
+  class Product {
+    constructor(id, name, price, imageUrl) {
+      this.id = id;
+      this.name = name;
+      this.price = price;
+      this.imageUrl = imageUrl;
+    }
+
+    /**
+     * @returns {string} html-разметка для товара
+     */
+    getProductMarkup() {
+      return `
+        <div class="product">
+            <div>${this.name}</div>
+            <img src="${this.imageUrl}" alt="">
+            <div>Цена: <span>${this.price}</span> р.</div>
+            <a href="https://example.com/producs/${this.id}">Подробнее</a>
+        </div>
+      `;
+    }
+  }
+
+  const products = {
+    phones: [
+      new Product(1, "Смартфон 1", "2533", "https://picsum.photos/seed/1/200"),
+      new Product(2, "Смартфон 2", "3123", "https://picsum.photos/seed/2/200"),
+      new Product(3, "Смартфон 3", "6123", "https://picsum.photos/seed/3/200"),
+    ],
+    tablets: [
+      new Product(4, "Плашнет 1", "5239", "https://picsum.photos/seed/4/200"),
+      new Product(5, "Плашнет 2", "6483", "https://picsum.photos/seed/5/200"),
+    ],
+    tv: [
+      new Product(6, "Телевизор 1", "4314", "https://picsum.photos/seed/6/200"),
+      new Product(7, "Телевизор 2", "5412", "https://picsum.photos/seed/7/200"),
+      new Product(8, "Телевизор 3", "3577", "https://picsum.photos/seed/8/200"),
+      new Product(9, "Телевизор 4", "8714", "https://picsum.photos/seed/9/200"),
+    ],
+  };
+
+  const productsEl = document.querySelector('.products');
+  document.querySelector('header').addEventListener('click', event => {
+    if (!event.target.classList.contains('.menuButton')) {
+      const res = products[event.target.dataset.type]
+        .map(product => product.getProductMarkup());
+      productsEl.innerHTML = res.join('');
+    } 
+  });
+
+</script>
+</body>
+</html>
\ No newline at end of file
