Add js

index.html

@@ -64,8 +64,87 @@
   </body>
 
   <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
+    const inputName = document.querySelector(".add-form-name");
+    const commentText = document.querySelector(".add-form-text");
+    const btnAddComment = document.querySelector(".add-form-button");
+    const commentsList = document.querySelector(".comments");
+    const btnLike = document.querySelector(".like-button");
+    const likesCounter = document.querySelector(".likes-counter");
+    const likesActive = document.querySelector("-active-like");
+
+    const newTime = () => {
+      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 = () => {
+        const name = inputName.value.trim();
+        const text = commentText.value.trim();
+
+        if (!name || !text) {
+          alert('Заполните все поля!');
+          return;
+        }
+
+        const temlateComment = document.querySelector('.comment');
+        const clonedComment = temlateComment.cloneNode(true);
+
+        clonedComment.querySelector('.comment-header div:first-child').textContent = name;
+        clonedComment.querySelector('.comment-header div:last-child').textContent = newTime();
+        clonedComment.querySelector('.comment-text').textContent = text;
+        clonedComment.querySelector('.likes-counter').textContent = "0";
+
+        clonedComment.querySelector('.like-button').classList.remove('-active-like');
+
+        commentsList.appendChild(clonedComment);
+
+        const likeButton = clonedComment.querySelector('.like-button');
+        likeButton.addEventListener('click', toggleLike);
+
+        inputName.value = "";
+        commentText.value = "";
+      };
+
+    btnAddComment.addEventListener('click', newComment);
+    inputName.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        newComment();
+      }
+    })
+    commentText.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' && event.ctrlKey) {
+        newComment();
+      }
+    })
+
+    const toggleLike = (event) => {
+      const likeButton = event.target;
+      const likesCounter = likeButton.closest('.comment').querySelector('.likes-counter');
+
+    const isActive = likeButton.classList.contains('-active-like');
+    let count = parseInt(likesCounter.textContent);
+
+    if (isActive) {
+
+        likeButton.classList.remove('-active-like');
+        count--;
+    } else {
+
+        likeButton.classList.add('-active-like');
+        count++;
+    }
+
+    likesCounter.textContent = count;
+    }
+
+    document.querySelectorAll('.like-button').forEach(button => {
+    button.addEventListener('click', toggleLike);
+});
+
   </script>
 </html>