diff --git a/index.html b/index.html
index 6f14ae14a..2095f7974 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,248 @@
 <!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>
-          </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>
-          <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>
+
+<head>
+  <title>Проект "Комменты"</title>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="container">
+    <ul class="comments">
+    </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>
-
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
-</html>
+  </div>
+</body>
+
+<script type="module">
+
+  const PERSONAL_KEY = "daria-antonova";
+
+  function getComments() {
+    return fetch(`https://wedev-api.sky.pro/api/v1/${PERSONAL_KEY}/comments`, {
+      method: "GET"
+    })
+    
+      .then(response => {
+        console.log('Статус ответа:', response.status);
+        if (!response.ok) {
+          throw new Error('Ошибка загрузки комментариев');
+        }
+        return response.json();
+      });
+  }
+
+  function postComment({ name, text }) {
+    return fetch(`https://wedev-api.sky.pro/api/v1/${PERSONAL_KEY}/comments`, {
+      method: "POST",
+      body: JSON.stringify({
+        name: name,
+        text: text,
+      })
+    })
+      .then(response => {
+        console.log('Статус добавления:', response.status);
+        if (!response.ok) {
+          return response.json().then(errorData => {
+            throw new Error(errorData.error || 'Ошибка при добавлении комментария');
+          });
+        }
+        return response.json();
+      });
+  }
+
+
+  function escapeHtml(unsafe) {
+    if (typeof unsafe !== 'string') return unsafe;
+
+    return unsafe
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#039;');
+  }
+
+  function formatDate(apiDate) {
+    const date = new Date(apiDate);
+    return `${date.getDate().toString().padStart(2, '0')}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getFullYear().toString().slice(-2)} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+  }
+
+
+  "use strict";
+
+  const nameInput = document.querySelector('.add-form-name');
+  const textInput = document.querySelector('.add-form-text');
+  const addButton = document.querySelector('.add-form-button');
+  const commentsList = document.querySelector('.comments');
+
+  let commentsData = [];
+  let replyingTo = null;
+
+  function renderComments() {
+    commentsList.innerHTML = '';
+
+    commentsData.forEach((comment) => {
+      const likeButtonClass = comment.isLiked ? 'like-button -active-like' : 'like-button';
+
+      const commentHTML = `
+    <li class="comment" data-id="${comment.id}">
+      <div class="comment-header">
+        <div>${escapeHtml(comment.name)}</div>
+        <div>${comment.date}</div>
+      </div>
+      <div class="comment-body">
+        <div class="comment-text">
+          ${escapeHtml(comment.text)}
+        </div>
+      </div>
+      <div class="comment-footer">
+        <div class="likes">
+          <span class="likes-counter">${comment.likes}</span>
+          <button class="${likeButtonClass}" data-id="${comment.id}"></button>
+        </div>
+      </div>
+    </li>`;
+
+      commentsList.innerHTML += commentHTML;
+    });
+
+    initLikeButtons();
+    initCommentClickHandlers();
+  }
+
+  function initCommentClickHandlers() {
+    const commentElements = document.querySelectorAll('.comment');
+
+    commentElements.forEach((commentElement) => {
+      commentElement.addEventListener('click', (event) => {
+        if (!event.target.closest('.like-button')) {
+          const commentId = parseInt(commentElement.dataset.id);
+          replyToComment(commentId);
+        }
+      });
+    });
+  }
+
+  function replyToComment(commentId) {
+    const comment = commentsData.find(c => c.id === commentId);
+
+    if (comment) {
+      replyingTo = commentId;
+      textInput.value = `> ${escapeHtml(comment.name)}: ${escapeHtml(comment.text)}\n\n`;
+      textInput.focus();
+    }
+  }
+
+  function initLikeButtons() {
+    const likeButtons = document.querySelectorAll('.like-button');
+
+    likeButtons.forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const commentId = parseInt(button.dataset.id);
+        const comment = commentsData.find(c => c.id === commentId);
+
+        if (comment) {
+          if (comment.isLiked) {
+            comment.likes--;
+            comment.isLiked = false;
+          } else {
+            comment.likes++;
+            comment.isLiked = true;
+          }
+
+          renderComments();
+        }
+      });
+    });
+  }
+
+
+
+  function loadComments() {
+    console.log('Загружаю комментарии...');
+    getComments()
+      .then(responseData => {
+        console.log('Получены данные:', responseData);
+        commentsData = responseData.comments.map(comment => ({
+          id: comment.id,
+          name: comment.author.name,
+          date: formatDate(comment.date),
+          text: comment.text,
+          likes: comment.likes,
+          isLiked: comment.isLiked
+        }));
+        renderComments();
+      })
+      .catch(error => {
+        console.error('Ошибка загрузки:', error);
+        alert('Не удалось загрузить комментарии: ' + error.message);
+      });
+  }
+
+  function addComment() {
+    const name = nameInput.value.trim();
+    const text = textInput.value.trim();
+
+    if (name === '' || text === '') {
+      alert('Пожалуйста, заполните все поля!');
+      return;
+    }
+
+    if (name.length < 3 || text.length < 3) {
+      alert('Имя и комментарий должны содержать минимум 3 символа');
+      return;
+    }
+
+
+    addButton.disabled = true;
+    addButton.textContent = 'Добавляем...';
+
+    postComment({ name, text })
+      .then(() => {
+        console.log('Комментарий добавлен, загружаю обновленный список...');
+        return loadComments();
+      })
+      .then(() => {
+        nameInput.value = '';
+        textInput.value = '';
+        replyingTo = null;
+      })
+      .catch(error => {
+        console.error('Ошибка добавления:', error);
+        alert('Не удалось добавить комментарий: ' + error.message);
+      })
+      .finally(() => {
+        addButton.disabled = false;
+        addButton.textContent = 'Написать';
+      });
+  }
+
+  function initApp() {
+    loadComments();
+
+    addButton.addEventListener('click', addComment);
+
+    textInput.addEventListener('keypress', (event) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        addComment();
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', initApp);
+  console.log("It works!");
+</script>
+
+
+
+</html>
\ No newline at end of file
