diff --git a/index.html b/index.html
index 6f14ae14aa..46a8edc2a4 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,168 @@
 <!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>
-          </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>
+<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>
-        </li>
-        <li class="comment">
-          <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">3</span>
+            <button class="like-button"></button>
           </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
-            </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>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
-            </div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">75</span>
+            <button class="like-button -active-like"></button>
           </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>
+      </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>
-  </body>
+  </div>
+</body>
+
+<script>
+  "use strict";
+
+const nameInput = document.querySelector('.add-form-name');
+const commentTextarea = document.querySelector('.add-form-text');
+const addButton = document.querySelector('.add-form-button');
+const commentsList = document.querySelector('.comments');
+
+const commentsData = [
+  {
+    id: 1,
+    name: 'Глеб Фокин',
+    date: '12.02.22 12:18',
+    text: 'Это будет первый комментарий на этой странице',
+    likesCount: 3,
+    isLiked: false
+  },
+  {
+    id: 2,
+    name: 'Варвара Н.',
+    date: '13.02.22 19:22',
+    text: 'Мне нравится как оформлена эта страница! ❤',
+    likesCount: 75,
+    isLiked: true
+  }
+];
+
+function renderComments() {
+  commentsList.innerHTML = commentsData.map(comment => {
+    const likeButtonClass = comment.isLiked ? 'like-button -active-like' : 'like-button';
+    return `
+      <li class="comment">
+        <div class="comment-header">
+          <div>${comment.name}</div>
+          <div>${comment.date}</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">
+            ${comment.text}
+          </div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">${comment.likesCount}</span>
+            <button class="${likeButtonClass}" data-id="${comment.id}"></button>
+          </div>
+        </div>
+      </li>
+    `;
+  }).join('');
+}
+
+renderComments();
+
+commentsList.addEventListener('click', function(e) {
+  if (e.target.classList.contains('like-button')) {
+    const button = e.target;
+    const commentId = button.getAttribute('data-id');
+    const comment = commentsData.find(c => c.id == commentId);
+
+    if (comment) {
+      comment.isLiked = !comment.isLiked;
+      if (comment.isLiked) {
+        comment.likesCount++;
+      } else {
+        comment.likesCount--;
+      }
+      renderComments();
+    }
+  }
+});
+
+addButton.addEventListener('click', addComment);
+
+function addComment(event) {
+  event.preventDefault();
+  const name = nameInput.value.trim();
+  const commentText = commentTextarea.value.trim();
+
+  if (!name || !commentText) {
+    alert('Пожалуйста, заполните поля «Имя» и «Комментарий»');
+    return;
+  }
+
+  const currentDate = new Date();
+  const day = String(currentDate.getDate()).padStart(2, '0');
+  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
+  const year = String(currentDate.getFullYear()).slice(-2);
+  const hours = String(currentDate.getHours()).padStart(2, '0');
+  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
+  const formattedDate = `${day}.${month}.${year} ${hours}:${minutes}`;
+ 
+  const newComment = {
+    id: Date.now(), 
+    name: name,
+    date: formattedDate,
+    text: commentText,
+    likesCount: 0,
+    isLiked: false
+  };
+ 
+  commentsData.push(newComment);
+  renderComments();
+  nameInput.value = '';
+  commentTextarea.value = '';
+}
+
+console.log("It works!");
+</script>
 
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
-</html>
+</html>
\ No newline at end of file
