реализация кнопки лайк

index.html

@@ -21,7 +21,7 @@
           </div>
           <div class="comment-footer">
             <div class="likes">
-              <span class="likes-counter">3</span>
+              <span class="likes-counter">0</span>
               <button class="like-button"></button>
             </div>
           </div>
@@ -38,8 +38,8 @@
           </div>
           <div class="comment-footer">
             <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
+              <span class="likes-counter">0</span>
+              <button class="like-button"></button>
             </div>
           </div>
         </li>
@@ -50,7 +50,7 @@
           class="add-form-name"
           placeholder="Введите ваше имя"
         />
-        <textarea
+        <textarea 
           type="textarea"
           class="add-form-text"
           placeholder="Введите ваш коментарий"
@@ -65,7 +65,75 @@
 
   <script>
     "use strict";
-    // Код писать здесь
-    console.log("It works!");
+    // Добавление комментария
+    const nameInput = document.querySelector('.add-form-name');
+    const textInput = document.querySelector('.add-form-text');
+    const btn = document.querySelector('.add-form-button');
+    const commentsContainer = document.querySelector('.comments') || document.body;
+
+    function checkInputs() {
+        btn.disabled = !(nameInput.value.trim() && textInput.value.trim());
+    }
+
+    btn.addEventListener('click', () => {
+        const date = new Date().toLocaleString().slice(0, -3).replace(',', '');
+        const newComment = document.createElement('div');
+            newComment.classList.add('comment'); 
+
+            newComment.innerHTML = `
+                <div class="comment-header">
+                    <div>${nameInput.value}</div>
+                    <div>${date}</div>
+                </div>
+                <div class="comment-body">
+                    <div class="comment-text">
+                        ${textInput.value}
+                    </div>
+                </div>
+                <div class="comment-footer">
+                    <div class="likes">
+                        <span class="likes-counter">0</span>
+                        <button class="like-button"></button>
+                    </div>
+                </div>
+            `;
+
+            commentsContainer.appendChild(newComment);
+
+            nameInput.value = '';
+            textInput.value = '';
+            checkInputs();
+    });
+
+    nameInput.addEventListener('input', checkInputs);
+    textInput.addEventListener('input', checkInputs);
+
+    checkInputs();
+
+    // Добавление лайка
+    commentsContainer.addEventListener('click', (event) => {
+        const likeBtn = event.target.closest('.like-button');
+        if (!likeBtn) return; 
+
+        const likeBlock = likeBtn.closest('.likes');
+        const likeCount = likeBlock.querySelector('.likes-counter');
+
+        const commentData = {
+            likes: parseInt(likeCount.textContent) || 0,
+            isLiked: likeBtn.classList.contains('-active-like')
+        };
+
+        if (!commentData.isLiked) {
+            commentData.likes++;
+            commentData.isLiked = true;
+        } else {
+            commentData.likes--;
+            commentData.isLiked = false;
+        }
+
+        likeBtn.className = `like-button ${commentData.isLiked ? '-active-like' : ''}`;
+
+        likeCount.textContent = commentData.likes;
+    });
   </script>
 </html>