HW 2

index.html

@@ -65,72 +65,140 @@
 
   <script>
 
-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 comments = [
+      {
+        id: 1,
+        name: "Глеб Фокин",
+        date: "12.02.22 12:18",
+        text: "Это будет первый комментарий на этой странице",
+        likes: 3,
+        isLiked: false
+      },
+      {
+        id: 2,
+        name: "Варвара Н.",
+        date: "13.02.22 19:22",
+        text: "Мне нравится как оформлена эта страница! ❤",
+        likes: 75,
+        isLiked: true
+      }
+    ];
 
-function getCurrentDateTime() {
-    const now = new Date();
-    const day = String(now.getDate()).padStart(2, '0');
-    const month = String(now.getMonth() + 1).padStart(2, '0');
-    const year = String(now.getFullYear()).slice(-2);
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-
-    return `${day}.${month}.${year} ${hours}:${minutes}`;
-}
+    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');
 
-function addNewComment() {
-    const name = nameInput.value.trim();
-    const text = textInput.value.trim();
-
-    if (!name || !text) {
-        alert('Пожалуйста, заполните все поля');
-        return;
+    function getCurrentDateTime() {
+      const now = new Date();
+      const day = String(now.getDate()).padStart(2, '0');
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const year = String(now.getFullYear()).slice(-2);
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+
+      return `${day}.${month}.${year} ${hours}:${minutes}`;
     }
-
-    const newComment = `
-        <li class="comment">
+
+    function renderComments() {
+      let commentsHTML = '';
+
+      comments.forEach((comment) => {
+        commentsHTML += `
+          <li class="comment" data-id="${comment.id}">
             <div class="comment-header">
-                <div>${name}</div>
-                <div>${getCurrentDateTime()}</div>
+              <div>${comment.name}</div>
+              <div>${comment.date}</div>
             </div>
             <div class="comment-body">
-                <div class="comment-text">
-                    ${text}
-                </div>
+              <div class="comment-text">
+                ${comment.text}
+              </div>
             </div>
             <div class="comment-footer">
-                <div class="likes">
-                    <span class="likes-counter">0</span>
-                    <button class="like-button"></button>
-                </div>
+              <div class="likes">
+                <span class="likes-counter">${comment.likes}</span>
+                <button class="like-button ${comment.isLiked ? '-active-like' : ''}" data-id="${comment.id}"></button>
+              </div>
             </div>
-        </li>
-    `;
-
-    commentsList.innerHTML += newComment;
-    nameInput.value = '';
-    textInput.value = '';
-}
-
-addButton.addEventListener('click', addNewComment);
+          </li>
+        `;
+      });
+
+      commentsList.innerHTML = commentsHTML;
+
+      document.querySelectorAll('.like-button').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          const commentId = parseInt(event.target.dataset.id);
+          toggleLike(commentId);
+        });
+      });
+    }
 
-nameInput.addEventListener('input', function() {
-    console.log('Имя изменено:', this.value);
-});
+    function toggleLike(commentId) {
+      const comment = comments.find(c => c.id === commentId);
+
+      if (comment) {
+        if (comment.isLiked) {
+          comment.likes--;
+          comment.isLiked = false;
+        } else {
+          comment.likes++;
+          comment.isLiked = true;
+        }
+
+        renderComments();
+      }
+    }
 
-textInput.addEventListener('input', function() {
-    console.log('Комментарий изменен:', this.value);
-});
+    function addNewComment() {
+      const name = nameInput.value.trim();
+      const text = textInput.value.trim();
+
+      if (!name || !text) {
+        alert('Пожалуйста, заполните все поля');
+        return;
+      }
+
+      const newId = comments.length > 0 ? Math.max(...comments.map(c => c.id)) + 1 : 1;
+
+      comments.push({
+        id: newId,
+        name: name,
+        date: getCurrentDateTime(),
+        text: text,
+        likes: 0,
+        isLiked: false
+      });
+
+      renderComments();
+
+      nameInput.value = '';
+      textInput.value = '';
+    }
 
-textInput.addEventListener('keypress', function(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        addNewComment();
+    function initApp() {
+      renderComments();
+
+      addButton.addEventListener('click', addNewComment);
+
+      nameInput.addEventListener('input', function() {
+        console.log('Имя изменено:', this.value);
+      });
+
+      textInput.addEventListener('input', function() {
+        console.log('Комментарий изменен:', this.value);
+      });
+
+      textInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          addNewComment();
+        }
+      });
     }
-});
+
+    document.addEventListener('DOMContentLoaded', initApp);
 
   </script>
 </html>