DOM 1. Управление шаблоном из JS, события

index.html

@@ -64,8 +64,67 @@
   </body>
 
   <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
+    const commentsList = document.querySelector('.comments');
+    const nameInput = document.querySelector('.add-form-name');
+    const commentInput = document.querySelector('.add-form-text');
+    const addButton = document.querySelector('.add-form-button');
+    let originalNameColor = nameInput.style.backgroundColor;
+    let originalCommentColor = commentInput.style.backgroundColor;
+
+    nameInput.addEventListener('input', () => {
+    });
+
+    commentInput.addEventListener('input', () => {
+    });
+
+    addButton.addEventListener('click', () => {
+
+
+    if (nameInput.value === "") {
+      nameInput.style.backgroundColor = "red";
+      setTimeout(() => {
+      nameInput.style.backgroundColor = originalNameColor;
+      }, 2000);
+      return;
+    } else if (commentInput.value === "") {
+      commentInput.style.backgroundColor = "red";
+        setTimeout(() => {
+        commentInput.style.backgroundColor = originalCommentColor;
+        }, 2000);
+      return;
+    }
+
+    const name = nameInput.value.trim();
+    const commentText = commentInput.value.trim();
+
+    const currentDate = new Date();
+    const formattedDate = currentDate.toLocaleString('ru-RU', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+
+    const newComment = `
+        <div class="comment">
+            <div class="comment-header">
+                <span class="comment-name">${name}</span>
+                <span class="comment-date">${formattedDate}</span>
+            </div>
+            <div class="comment-text">${commentText}</div>
+            <div class="comment-footer">
+              <div class="likes">
+                <span class="likes-counter">0</span>
+                <button class="like-button"></button>
+              </div>
+        </div>
+    `;
+
+    commentsList.innerHTML += newComment;
+
+    nameInput.value = '';
+    commentInput.value = '';
+    });
   </script>
 </html>