Hw 2

index.html

@@ -66,6 +66,111 @@
   <script>
     "use strict";
     // Код писать здесь
+
+    const nameInput = document.querySelector(".add-form-name");
+    const commentInput = document.querySelector(".add-form-text");
+    const addButton = document.querySelector(".add-form-button");
+    const commentsList = document.querySelector(".comments");
+
+    let comments = [
+      {
+        name: "Глеб Фокин",
+        date: "12.02.22 12:18",
+        text: "Это будет первый комментарий на этой странице",
+        likes: 3,
+        isLiked: false,
+      },
+      {
+        name: "Варвара Н.",
+        date: "13.02.22 19:22",
+        text: "Мне нравится как оформлена эта страница! ❤",
+        likes: 75,
+        isLiked: true,
+      }
+    ]
+
+    function getCurrentFormattedDate() {
+      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}`;
+    }
+
+
+    function renderComments() {
+      commentsList.innerHTML = "";
+
+      comments.forEach((comment, index)=>{
+        const commentHTML = `
+      <li class="comment">
+        <div class="comment-header">
+          <div>${comment.name}</div>
+          <div>${comment.date}</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">${comment.text}</div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">${comment.likes}</span>
+            <button class="like-button ${comment.isLiked ? "-active-like" : ""}" data-index="${index}"></button>
+          </div>
+        </div>
+      </li>`;
+    commentsList.innerHTML += commentHTML;
+      })
+
+      addLikeListeners(); 
+
+      function addLikeListeners (){
+        const likeButtons = document.querySelectorAll(".like-button");
+
+        likeButtons.forEach((button)=>{
+          button.addEventListener("click", () =>{
+            const index = button.dataset.index;
+            const comment = comments[index];
+            if(comment.isLiked){
+              comment.likes --;
+              comment.isLiked = false;
+            } else {
+              comment.likes ++;
+              comment.isLiked = true;
+            }
+            renderComments();
+          })
+        })
+      }
+    }
+
+    addButton.addEventListener("click", () => {
+      const name = nameInput.value.trim();
+      const comment = commentInput.value.trim();
+
+      if (!name || !comment) {
+        alert("Пожалуйста, введите имя и комментарий.");
+        return;
+      }
+
+      comments.push({
+      name: name,
+      date: getCurrentFormattedDate(),
+      text: comment,
+      likes: 0,
+      isLiked: false,
+      });
+
+      nameInput.value = "";
+      commentInput.value = "";
+      renderComments();
+      });
+
+    renderComments();
+
+
     console.log("It works!");
+
   </script>
 </html>