GlebkaF · drdic · Aug 11, 2025 · Aug 11, 2025 · Aug 11, 2025 · Aug 11, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
@@ -0,0 +1,3 @@
+tabWidth: 4
+semi: false 
+singleQuote: true
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,12 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import config from 'eslint-config-prettier'
+import plugin from 'eslint-plugin-prettier/recommended'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+    { languageOptions: { globals: globals.browser } },
+    pluginJs.configs.recommended,
+    config,
+    plugin,
+]
diff --git a/index.html b/index.html
@@ -1,71 +1,31 @@
 <!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">
+      <!-- Комментарии будут загружаться через JavaScript -->
+    </ul>
+    <div id="comments-loading" class="loading" style="display: none;">
+      Пожалуйста подождите, загружаю комментарии...
+    </div>
+    </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 type="module" src="./main.js"></script>
 
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
-</html>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,41 @@
+import { comments } from './modules/data.js';
+import { getComments } from './modules/api.js';
+import { renderComments } from './modules/render.js';
+import { initAddCommentListener } from './modules/listeners.js'; // импорт изменен
+
+const commentsList = document.querySelector('.comments');
+const commentsLoading = document.getElementById('comments-loading');
+
+// Функции для управления загрузкой комментариев
+function showCommentsLoading() {
+    commentsLoading.style.display = 'block';
+    commentsList.style.opacity = '0.3'; // Затемняем вместо скрытия
+}
+
+function hideCommentsLoading() {
+    commentsLoading.style.display = 'none';
+    commentsList.style.opacity = '1'; // Возвращаем нормальную прозрачность
+}
+
+async function loadComments() {
+    try {
+        // ПОКАЗЫВАЕМ загрузку только при СТАРТЕ приложения
+        showCommentsLoading();
+
+        comments.length = 0;
+        const freshComments = await getComments();
+        comments.push(...freshComments);
+        renderComments(); // без аргументов!
+
+    } catch (error) {
+        commentsList.innerHTML = '<div class="error">Не удалось загрузить комментарии</div>';
+    } finally {
+        // ВСЕГДА скрываем загрузку
+        hideCommentsLoading();
+    }
+}
+
+loadComments();
+initAddCommentListener(); // вызов изменен и без аргументов
+
+export { loadComments };
diff --git a/modules/api.js b/modules/api.js
@@ -0,0 +1,24 @@
+const API_BASE_URL = "https://wedev-api.sky.pro/api/v1";
+const PERSONAL_KEY = "eduard-zakharevskiy";
+const API_URL = `${API_BASE_URL}/${PERSONAL_KEY}/comments`;
+
+export async function getComments() {
+    const response = await fetch(API_URL);
+    if (!response.ok) throw new Error('Ошибка загрузки');
+    const data = await response.json();
+    return data.comments;
+}
+
+export async function addComment({ name, text }) {
+    const response = await fetch(API_URL, {
+        method: 'POST',
+        body: JSON.stringify({ name, text })
+    });
+
+    if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Ошибка сервера');
+    }
+
+    return await response.json();
+}
diff --git a/modules/data.js b/modules/data.js
@@ -0,0 +1,2 @@
+export let comments = [];
+export let replyingTo = null;
diff --git a/modules/listeners.js b/modules/listeners.js
@@ -0,0 +1,83 @@
+import { loadComments } from '../main.js'; // импортируем LoadComments
+import { comments, replyingTo } from './data.js';
+import { addComment } from './api.js';
+import { renderComments } from './render.js';
+import { escapeHtml } from './utils.js';
+
+export function initAddCommentListener() {
+    const nameInput = document.querySelector('.add-form-name');
+    const textInput = document.querySelector('.add-form-text');
+    const addButton = document.querySelector('.add-form-button');
+
+    addButton.addEventListener('click', async () => {
+        const safeName = escapeHtml(nameInput.value.trim());
+        const safeText = escapeHtml(textInput.value.trim());
+
+        if (!safeName || !safeText) {
+            if (!safeName) nameInput.classList.add('error');
+            if (!safeText) textInput.classList.add('error');
+            return;
+        }
+
+        addButton.disabled = true;
+        addButton.textContent = 'Добавляем...';
+
+        try {
+            await addComment({ name: safeName, text: safeText });
+            nameInput.value = '';
+            textInput.value = '';
+            nameInput.classList.remove('error');
+            textInput.classList.remove('error');
+            await loadComments(); // используем импортированную функцию
+        } catch (error) {
+            alert(error.message);
+        } finally {
+            addButton.disabled = false;
+            addButton.textContent = 'Написать';
+        }
+    });
+
+    nameInput.addEventListener('input', () => {
+        if (nameInput.value.trim()) nameInput.classList.remove('error');
+    });
+
+    textInput.addEventListener('input', () => {
+        if (textInput.value.trim()) textInput.classList.remove('error');
+    });
+}
+
+export function initLikeListeners() {
+    document.querySelectorAll('.like-button').forEach(button => {
+        button.addEventListener('click', (event) => {
+            const commentId = parseInt(event.target.closest('.comment').dataset.id);
+            const comment = comments.find(c => c.id === commentId);
+
+            if (comment) {
+                comment.isLiked = !comment.isLiked;
+                comment.likes += comment.isLiked ? 1 : -1;
+                renderComments();
+            }
+        });
+    });
+}
+
+export function initQuoteListeners() {
+    document.querySelectorAll('.comment').forEach(commentElement => {
+        commentElement.addEventListener('click', function (event) {
+            if (event.target.closest('.like-button')) {
+                return;
+            }
+
+            const commentId = parseInt(this.dataset.id);
+            const comment = comments.find(c => c.id === commentId);
+
+            if (comment) {
+                const textInput = document.querySelector('.add-form-text');
+                const quoteText = `> ${comment.author.name}: ${comment.text}\n\n`;
+                textInput.value = quoteText;
+                textInput.focus();
+                textInput.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    });
+}
diff --git a/modules/render.js b/modules/render.js
@@ -0,0 +1,28 @@
+import { comments } from './data.js';
+import { initLikeListeners, initQuoteListeners } from './listeners.js';
+
+export function renderComments() {
+  const commentsList = document.querySelector('.comments');
+
+  commentsList.innerHTML = comments.map(comment => `
+    <li class="comment" data-id="${comment.id}">
+      <div class="comment-header">
+        <div>${comment.author.name}</div>
+        <div>${new Date(comment.date).toLocaleString()}</div>
+      </div>
+      <div class="comment-body">
+        <div class="comment-text">${comment.text.replace(/\n/g, '<br>')}</div>
+      </div>
+      <div class="comment-footer">
+        <div class="likes">
+          <span class="likes-counter">${comment.likes}</span>
+          <button class="like-button ${comment.isLiked ? '-active-like' : ''}"></button>
+        </div>
+      </div>
+    </li>
+  `).join('');
+
+  // вызываем функции из listeners.js вместо кода здесь
+  initLikeListeners();
+  initQuoteListeners();
+}
diff --git a/modules/utils.js b/modules/utils.js
@@ -0,0 +1,8 @@
+export function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export let comments = [];
		export let replyingTo = null;