diff --git a/index.html b/index.html
index 6f14ae14aa..b521d4f1ea 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,172 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Проект "Комменты"</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-
-  <body>
-    <div class="container">
-      <ul class="comments">
-        <li class="comment">
-          <div class="comment-header">
-            <div>Глеб Фокин</div>
-            <div>12.02.22 12:18</div>
+
+<head>
+  <title>Проект "Комменты"</title>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="container">
+    <ul class="comments">
+      <!-- <li class="comment">
+        <div class="comment-header">
+          <div>Глеб Фокин</div>
+          <div>12.02.22 12:18</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">
+            Это будет первый комментарий на этой странице
           </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Это будет первый комментарий на этой странице
-            </div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">3</span>
+            <button class="like-button"></button>
           </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">3</span>
-              <button class="like-button"></button>
-            </div>
+        </div>
+      </li>
+      <li class="comment">
+        <div class="comment-header">
+          <div>Варвара Н.</div>
+          <div>13.02.22 19:22</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">
+            Мне нравится как оформлена эта страница! ❤
           </div>
-        </li>
-        <li class="comment">
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">75</span>
+            <button class="like-button -active-like"></button>
+          </div>
+        </div>
+      </li> -->
+    </ul>
+    <div class="add-form">
+      <input type="text" class="add-form-name" placeholder="Введите ваше имя" />
+      <textarea type="textarea" class="add-form-text" placeholder="Введите ваш коментарий" rows="4"></textarea>
+      <div class="add-form-row">
+        <button class="add-form-button">Написать</button>
+      </div>
+    </div>
+  </div>
+</body>
+
+<script>
+  "use strict";
+  const nameInput = document.querySelector('.add-form-name');
+  const textInput = document.querySelector('.add-form-text');
+  const commentsList = document.querySelector('.comments');
+  const addButton = document.querySelector('.add-form-button');
+
+  // Массив с информацией о каждом комментарии
+  const comments = [
+    {
+      userName: "Глеб Фокин",
+      date: "12.02.22 12:18",
+      commentText: "Это будет первый комментарий на этой странице",
+      likes: 3,
+      isLiked: false
+    },
+    {
+      userName: "Варвара Н.",
+      date: "13.02.22 19:22",
+      commentText: "Мне нравится как оформлена эта страница! ❤",
+      likes: 75,
+      isLiked: true
+    }
+  ];
+
+  // Получение текущей даты и времени
+  function formatDate() {
+    const now = new Date();
+    const day = String(now.getDate()).padStart(2, '0');
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const year = String(now.getFullYear()).slice(-2);
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+
+    return `${day}.${month}.${year} ${hours}:${minutes}`;
+  }
+
+  // Функция рендеринга комментариев
+  const renderComments = () => {
+    const commentsHTML = comments.map((comment, index) => {
+      const likeClass = comment.isLiked ? ' -active-like' : '';
+      return `
+        <li class="comment" data-index="${index}">
           <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
+            <div>${comment.userName}</div>
+            <div>${comment.date}</div>
           </div>
           <div class="comment-body">
             <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
+              ${comment.commentText}
             </div>
           </div>
           <div class="comment-footer">
             <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
+              <span class="likes-counter">${comment.likes}</span>
+              <button class="like-button${likeClass}" data-index="${index}"></button>
             </div>
           </div>
         </li>
-      </ul>
-      <div class="add-form">
-        <input
-          type="text"
-          class="add-form-name"
-          placeholder="Введите ваше имя"
-        />
-        <textarea
-          type="textarea"
-          class="add-form-text"
-          placeholder="Введите ваш коментарий"
-          rows="4"
-        ></textarea>
-        <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
-        </div>
-      </div>
-    </div>
-  </body>
-
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
-</html>
+      `;
+    }).join('');
+
+    commentsList.innerHTML = commentsHTML;
+
+    // Добавляем обработчики кликов на лайки
+    initLike();
+  };
+
+  // Обработчик клика на лайк
+  const initLike = () => {
+    const likeButtons = document.querySelectorAll('.like-button');
+
+    for (const likeButton of likeButtons) {
+      likeButton.addEventListener('click', (event) => {        
+        const index = (likeButton.dataset.index); 
+        const comment = comments[index];
+
+        comment.isLiked = !comment.isLiked;
+
+        // Обновляем количество лайков
+        comment.likes = comment.isLiked ? comment.likes + 1 : comment.likes - 1;
+        renderComments();
+      });
+    };
+  };
+
+  addButton.addEventListener('click', () => {
+    if (nameInput.value.trim() === '' || textInput.value.trim() === '') {
+      alert('Пожалуйста, заполните все поля');
+      return;
+    }
+
+    // Добавление нового комментария в массив
+    comments.push({
+      userName: nameInput.value,
+      date: formatDate(),
+      commentText: textInput.value,
+      likes: 0,
+      isLiked: false
+    });
+
+    // Перерисовываем комментарии
+    renderComments();
+
+    // Очищаем поля ввода после добавления
+    nameInput.value = '';
+    textInput.value = '';
+  });
+
+  renderComments();
+
+  console.log("It works!");
+</script>
+
+</html>
\ No newline at end of file
