diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml
deleted file mode 100644
index 7e8e44c046..0000000000
--- a/.github/workflows/greetings.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: Close Pull Request
-
-on:
-  pull_request_target:
-    types: [opened]
-
-jobs:
-  run:
-    if: github.repository == 'GlebkaF/webdev-dom-homework'
-    runs-on: ubuntu-latest
-    steps:
-    - uses: superbrothers/close-pull-request@v3
-      with:
-        # Optional. Post a issue comment just before closing a pull request.
-        comment: "Привет! Сделай пожалуйста Pull Request в свой репозиторий, сейчас ты сделал PR в репозиторий Глеба. Посмотри в домашке, там на скриншоте нарисовано где выбрать свой репозиторий"
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index af063bca9b..0000000000
Binary files a/favicon.ico and /dev/null differ
diff --git a/index.html b/index.html
index 6f14ae14aa..27b4cb78c2 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,333 @@
 <!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();
+      })
+      .then((responseData) => {
+        return responseData;
+      })
+      .catch((error) => {
+        console.error('Ошибка в getComments:', error);
+        throw error;
+      });
+  }
+
+  function postComment({ name, text, forceError = false }) {
+    return fetch(`https://wedev-api.sky.pro/api/v1/${PERSONAL_KEY}/comments`, {
+      method: "POST",
+      body: JSON.stringify({
+        name: name,
+        text: text,
+        forceError: forceError
+      })
+    })
+      .then(response => {
+        console.log('Статус добавления:', response.status);
+        if (response.status === 500) {
+          throw new Error('500 - Server Error');
+        }
+
+        if (response.status === 400) {
+          throw new Error('400 - Bad Request');
+        }
+
+        if (!response.ok) {
+          return response.json().then(errorData => {
+            throw new Error(errorData.error || `Ошибка ${response.status}`);
+          });
+        }
+        return response.json();
+      })
+      .then((responseData) => {
+        return responseData;
+      })
+      .catch((error) => {
+        console.error('Ошибка в postComment: ', error);
+        throw error;
+      });
+  }
+
+
+
+
+  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 isLoading = false;
+  let commentsData = [];
+  let replyingTo = null;
+
+  let currentName = '';
+  let currentText = '';
+
+  nameInput.addEventListener('input', (event) => {
+    currentName = event.target.value;
+  });
+
+  textInput.addEventListener('input', (event) => {
+    currentText = event.target.value;
+  });
+
+  function restoreFormData() {
+    nameInput.value = currentName;
+    textInput.value = currentText;
+  }
+
+
+  function renderLoading() {
+    if (isLoading) {
+      commentsList.innerHTML = `
+      <div class="loading">
+        <div>Комментарии загружаются...</div>
+        <div class="loading-spinner">⏳</div>
+      </div>
+      `;
+    }
+  }
+
+  function renderComments() {
+    if (isLoading) {
+      return;
+    }
+    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();
+    restoreFormData();
+  }
+
+  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 addComment() {
+    const name = nameInput.value.trim();
+    const text = textInput.value.trim();
+
+    currentName = name;
+    currentText = text;
+
+    if (name === '' || text === '') {
+      alert('Пожалуйста, заполните все поля!');
+      return;
+    }
+
+    if (name.length < 3 || text.length < 3) {
+      alert('Имя и комментарий должны содержать минимум 3 символа');
+      return;
+    }
+
+    document.querySelector('.add-form').style.display = 'none';
+    const loadingElement = document.createElement('div');
+    loadingElement.className = 'add-form-loading';
+    loadingElement.textContent = 'Комментарий добавляется...';
+    document.querySelector('.add-form-row').before(loadingElement);
+
+
+    addButton.disabled = true;
+    addButton.textContent = 'Добавляем...';
+
+    postComment({ name, text, forceError: true })
+      .then(() => {
+        console.log('Комментарий добавлен, загружаю обновленный список...');
+        currentName = '';
+        currentText = '';
+        replyingTo = null;
+        return loadComments();
+      })
+      .catch(error => {
+        console.error('Ошибка добавления:', error);
+
+        if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+          alert('Кажется, у вас сломался интернет, попробуйте позже...');
+        } else if (error.message.includes('500')) {
+          alert('Сервер сломался, попробуйте позже');
+        } else if (error.message.includes('400')) {
+          alert('Неверный запрос: ' + error.message);
+        } else {
+          alert('Не удалось добавить комментарий: ' + error.message);
+        }
+      })
+      .finally(() => {
+        document.querySelector('.add-form').style.display = 'block';
+        loadingElement.remove();
+        addButton.disabled = false;
+        addButton.textContent = 'Написать';
+        restoreFormData();
+      });
+  }
+
+  function loadComments() {
+    console.log('Загружаю комментарии...');
+    isLoading = true;
+    renderLoading();
+
+    getComments()
+      .then((responseData) => {
+        console.log('Получены данные:', responseData);
+        commentsData = responseData.comments.map((comment) => ({
+          id: comment.id,
+          name: comment.autor.name,
+          date: formatDate(comment.date),
+          text: comment.text,
+          likes: comment.likes,
+          isLiked: comment.isLiked
+        }));
+      })
+      .then(() => {
+        isLoading = false;
+        renderComments();
+      })
+      .catch((error) => {
+        console.error('Ошибка загрузки:', error);
+        isLoading = false;
+        if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+          alert('Кажется, у вас сломался интернет, попробуйте позже...');
+        } else if (error.message.includes('500')) {
+          alert('Сервер сломался, попробуйте позже');
+        } else {
+          alert('Не удалось загрузить комментарии: ' + error.message);
+        }
+
+        renderComments();
+
+      });
+  }  
+  loadComments();
+  addButton.addEventListener('click', addComment);
+
+
+</script>
+
+
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index edc120f8cd..ca042106b4 100644
--- a/styles.css
+++ b/styles.css
@@ -1,137 +1,157 @@
 body {
-    margin: 0;
-  }
-
-  .container {
-    font-family: Helvetica;
-    color: #ffffff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 80px;
-    padding-bottom: 200px;
-    background: #202020;
-    min-height: 100vh;
-  }
-
-  .comments,
-  .comment {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .comment,
-  .add-form {
-    width: 596px;
-    box-sizing: border-box;
-    background: radial-gradient(
-      75.42% 75.42% at 50% 42.37%,
+  margin: 0;
+}
+
+.container {
+  font-family: Helvetica;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 80px;
+  padding-bottom: 200px;
+  background: #202020;
+  min-height: 100vh;
+}
+
+.comments,
+.comment {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.comment,
+.add-form {
+  width: 596px;
+  box-sizing: border-box;
+  background: radial-gradient(75.42% 75.42% at 50% 42.37%,
       rgba(53, 53, 53, 0) 22.92%,
-      #7334ea 100%
-    );
-    filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
-    border-radius: 20px;
-  }
-
-  .comments {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .comment {
-    padding: 48px;
-  }
-
-  .comment-header {
-    font-size: 16px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .comment-footer {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .comment-body {
-    margin-top: 32px;
-    margin-bottom: 32px;
-  }
-
-  .comment-text {
-    font-size: 32px;
-  }
-
-  .likes {
-    display: flex;
-    align-items: center;
-  }
-
-  .like-button {
-    all: unset;
-    cursor: pointer;
-  }
-
-  .likes-counter {
-    font-size: 26px;
-    margin-right: 8px;
-  }
-
-  .like-button {
-    margin-left: 10px;
-    background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    width: 22px;
-    height: 22px;
-  }
-
-  .-active-like {
-    background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
-  }
-
-  .add-form {
-    padding: 20px;
-    margin-top: 48px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .add-form-name,
-  .add-form-text {
-    font-size: 16px;
-    font-family: Helvetica;
-    border-radius: 8px;
-    border: none;
-  }
-
-  .add-form-name {
-    width: 300px;
-    padding: 11px 22px;
-  }
-
-  .add-form-text {
-    margin-top: 12px;
-    padding: 22px;
-    resize: none;
-  }
-
-  .add-form-row {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .add-form-button {
-    margin-top: 24px;
-    font-size: 24px;
-    padding: 10px 20px;
-    background-color: #bcec30;
-    border: none;
-    border-radius: 18px;
-    cursor: pointer;
-  }
-
-  .add-form-button:hover {
-    opacity: 0.9;
-  }
\ No newline at end of file
+      #7334ea 100%);
+  filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
+  border-radius: 20px;
+}
+
+.comments {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.comment {
+  padding: 48px;
+}
+
+.comment-header {
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.comment-body {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.comment-text {
+  font-size: 32px;
+}
+
+.likes {
+  display: flex;
+  align-items: center;
+}
+
+.like-button {
+  all: unset;
+  cursor: pointer;
+}
+
+.likes-counter {
+  font-size: 26px;
+  margin-right: 8px;
+}
+
+.like-button {
+  margin-left: 10px;
+  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  width: 22px;
+  height: 22px;
+}
+
+.-active-like {
+  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
+}
+
+.add-form {
+  padding: 20px;
+  margin-top: 48px;
+  display: flex;
+  flex-direction: column;
+}
+
+.add-form-name,
+.add-form-text {
+  font-size: 16px;
+  font-family: Helvetica;
+  border-radius: 8px;
+  border: none;
+}
+
+.add-form-name {
+  width: 300px;
+  padding: 11px 22px;
+}
+
+.add-form-text {
+  margin-top: 12px;
+  padding: 22px;
+  resize: none;
+}
+
+.add-form-row {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.add-form-button {
+  margin-top: 24px;
+  font-size: 24px;
+  padding: 10px 20px;
+  background-color: #bcec30;
+  border: none;
+  border-radius: 18px;
+  cursor: pointer;
+}
+
+.add-form-button:hover {
+  opacity: 0.9;
+}
+
+.loading {
+  text-align: center;
+  padding: 20px;
+  font-size: 18px;
+  color: #666;
+}
+
+.loading-spinner {
+  font-size: 24px;
+  margin-top: 10px;
+}
+
+.add-form-loading {
+  text-align: center;
+  padding: 20px;
+  font-size: 16px;
+  color: #666;
+  background: #f9f9f9;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
\ No newline at end of file
