Сделал, чтобы список комментариев отображался и добавлялся на сервер …

index.js

@@ -1,5 +1,16 @@
+import { updateComments } from './modules/comments.js';
 import { renderComments } from './modules/render.js';
 import { addClickBtnAddComment } from './modules/eventsBtnAddComment.js';
 
-renderComments();
-addClickBtnAddComment();
+const API = 'https://wedev-api.sky.pro/api/v1/arusskov/comments';
+
+fetch(API, { method: 'GET' })
+    .then((response) => {
+        return response.json();
+    })
+    .then((data) => {
+        updateComments(data.comments);
+        renderComments();
+    });
+
+addClickBtnAddComment(API);

modules/comments.js

@@ -1,16 +1,5 @@
-export const comments = [
-    {
-        name: 'Глеб Фокин',
-        date: '12.02.22 12:18',
-        text: 'Это будет первый комментарий на этой странице',
-        countLike: 3,
-        isActiveLike: false,
-    },
-    {
-        name: 'Варвара Н.',
-        date: '13.02.22 19:22',
-        text: 'Мне нравится как оформлена эта страница! ❤',
-        countLike: 75,
-        isActiveLike: true,
-    },
-];
+export let comments = [];
+
+export function updateComments(newComments) {
+    comments = newComments;
+}

modules/date.js

@@ -1,5 +1,5 @@
-export function getCurrentDate() {
-    let date = new Date();
+export function formatDate(dateString) {
+    let date = new Date(dateString);
     let day = String(date.getDate()).padStart(2, 0);
     let month = String(date.getMonth() + 1).padStart(2, 0);
     let year = String(date.getFullYear()).slice(-2);

modules/eventsBtnAddComment.js

@@ -1,6 +1,5 @@
 import { renderComments } from './render.js';
-import { comments } from './comments.js';
-import { getCurrentDate } from './date.js';
+import { comments, updateComments } from './comments.js';
 import { replaceSymbol } from './replace.js';
 
 let btnWrite = document.querySelector('.add-form-button');
@@ -11,7 +10,7 @@ function removeClassError(input) {
     input.classList.remove('input-error');
 }
 
-export function addClickBtnAddComment() {
+export function addClickBtnAddComment(API) {
     btnWrite.addEventListener('click', () => {
         if (inputName.value === '' || inputText.value === '') {
             if (inputName.value === '') {
@@ -24,19 +23,37 @@ export function addClickBtnAddComment() {
 
                 setTimeout(() => removeClassError(inputText), 2000);
             }
-        } else {
-            comments.push({
-                name: replaceSymbol(inputName.value),
-                date: getCurrentDate(),
-                text: replaceSymbol(inputText.value),
-                countLike: 0,
-                isActiveLike: false,
-            });
 
-            inputName.value = '';
-            inputText.value = '';
+            return;
+        }
 
-            renderComments();
+        if (inputName.value.length < 3 || inputText.value.length < 3) {
+            inputName.value.length < 3
+                ? alert('Имя не должно быть менее 3 символов')
+                : alert('Комментарий не должен быть менее 3 символов');
+            return;
         }
+
+        const newComment = {
+            text: replaceSymbol(inputText.value),
+            name: replaceSymbol(inputName.value),
+        };
+
+        inputName.value = '';
+        inputText.value = '';
+
+        fetch(API, {
+            method: 'POST',
+            body: JSON.stringify(newComment),
+        });
+
+        fetch(API, { method: 'GET' })
+            .then((response) => {
+                return response.json();
+            })
+            .then((data) => {
+                updateComments(data.comments);
+                renderComments();
+            });
     });
 }

modules/eventsComment.js

@@ -8,13 +8,12 @@ export function addClickBtnLike() {
         btnLike.addEventListener('click', (event) => {
             event.stopPropagation();
 
-            if (comments[btnLike.dataset.index].isActiveLike) {
-                comments[btnLike.dataset.index].isActiveLike = false;
-                comments[btnLike.dataset.index].countLike--;
-            } else {
-                comments[btnLike.dataset.index].isActiveLike = true;
-                comments[btnLike.dataset.index].countLike++;
-            }
+            comments[btnLike.dataset.index].isLiked
+                ? comments[btnLike.dataset.index].likes--
+                : comments[btnLike.dataset.index].likes++;
+
+            comments[btnLike.dataset.index].isLiked =
+                !comments[btnLike.dataset.index].isLiked;
 
             renderComments();
         });
@@ -28,7 +27,7 @@ export function addClickComment() {
     for (const elementComments of elementsComments) {
         elementComments.addEventListener('click', () => {
             const index = elementComments.dataset.index;
-            inputText.value = `<${comments[index].text}\n${comments[index].name}>`;
+            inputText.value = `<${comments[index].text}\n${comments[index].author.name}>`;
         });
     }
 }

modules/render.js

@@ -1,31 +1,32 @@
 import { comments } from './comments.js';
 import { addClickBtnLike, addClickComment } from './eventsComment.js';
+import { formatDate } from './date.js';
 
 export function renderComments() {
     const listComment = document.querySelector('.comments');
 
     const htmlComments = comments
         .map((comment, index) => {
             return `
-        <li data-index='${index}' class="comment">
-          <div class="comment-header">
-            <div>${comment.name}</div>
-            <div>${comment.date}</div>
-          </div>
-          <div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              ${comment.text.replaceAll('\n', '<br>')}
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">${comment.countLike}</span>
-              <button data-index="${index}" class="like-button ${comment.isActiveLike ? '-active-like' : ''}"></button>
-            </div>
-          </div>
-        </li>`;
+            <li data-index='${index}' class="comment">
+              <div class="comment-header">
+                <div>${comment.author.name}</div>
+                <div>${formatDate(comment.date)}</div>
+              </div>
+              <div>
+              </div>
+              <div class="comment-body">
+                <div class="comment-text">
+                  ${comment.text.replaceAll('\n', '<br>')}
+                </div>
+              </div>
+              <div class="comment-footer">
+                <div class="likes">
+                  <span class="likes-counter">${comment.likes}</span>
+                  <button data-index="${index}" class="like-button ${comment.isLiked ? '-active-like' : ''}"></button>
+                </div>
+              </div>
+            </li>`;
         })
         .join('');