From 87fbdd38073f7b1f7ef52faacbe79683878119c0 Mon Sep 17 00:00:00 2001
From: ASHWAGANDHUM <agq772@gmail.com>
Date: Sat, 13 Sep 2025 22:32:53 +0800
Subject: [PATCH] implement adding new comment on button click

---
 index.html | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 styles.css |  4 +++
 2 files changed, 90 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 6f14ae14aa..68beec0fe1 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 
   <body>
     <div class="container">
-      <ul class="comments">
+      <ul class="comments" id="list">
         <li class="comment">
           <div class="comment-header">
             <div>Глеб Фокин</div>
@@ -49,15 +49,17 @@
           type="text"
           class="add-form-name"
           placeholder="Введите ваше имя"
+          id="input-name"
         />
         <textarea
           type="textarea"
           class="add-form-text"
           placeholder="Введите ваш коментарий"
           rows="4"
+          id="input-text"
         ></textarea>
         <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
+          <button class="add-form-button" id="button-add">Написать</button>
         </div>
       </div>
     </div>
@@ -65,7 +67,87 @@
 
   <script>
     "use strict";
-    // Код писать здесь
-    console.log("It works!");
+    // Доступ к элементам
+    const nameEl = document.getElementById('input-name');
+    const textEl = document.getElementById('input-text');
+    const listEl = document.getElementById('list');
+    const buttonEl = document.getElementById('button-add');
+    const btnLike = document.querySelectorAll('.like-button');
+
+    buttonEl.addEventListener('click', () => {
+      // Удаление стилей в полях при вводе
+      nameEl.addEventListener('input', () => {
+        nameEl.classList.remove('error');
+      });
+
+      textEl.addEventListener('input', () => {
+        textEl.classList.remove('error');
+      });
+      // Валидация введенных данных в полях
+      if (!nameEl.value) {
+        nameEl.classList.add("error");
+      }
+      if (!textEl.value) {
+        textEl.classList.add("error");
+      }
+      if (!nameEl.value || !textEl.value)
+      return;
+
+      // Содержимое списка в исходном состоянии
+      const listOld = listEl.innerHTML;
+
+      // Шаблонные строки
+      const userName = `<div>${nameEl.value}</div>`;
+      const now = new Date();
+      const day = now.toLocaleDateString("RU-ru", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "2-digit"
+      });
+      const time = now.toLocaleTimeString("RU-ru", {
+        hour: "2-digit",
+        minute:"2-digit"
+      });
+      const userDate = `<div>${day} ${time}</div>`;
+
+      // Создание элементов
+      const liEl = document.createElement('li');
+      const divHeaderEl = document.createElement('div');
+      const divBodyEl = document.createElement('div');
+      const divTextEl = document.createElement('div');
+      const divFooterEl = document.createElement('div');
+      const divLikesEl = document.createElement('div');
+      const spanEl = document.createElement('span');
+      const btnEl = document.createElement('button');
+
+      // Стилизация элементов
+      liEl.classList.add('comment');
+      divHeaderEl.classList.add('comment-header');
+      divBodyEl.classList.add('comment-body');
+      divTextEl.classList.add('comment-text');
+      divFooterEl.classList.add('comment-footer');
+      divLikesEl.classList.add('likes');
+      spanEl.classList.add('likes-counter');
+      btnEl.classList.add('like-button');
+
+      // Вложение элементов
+      liEl.append(divHeaderEl, divBodyEl, divFooterEl);
+      divBodyEl.appendChild(divTextEl);
+      divLikesEl.append(spanEl, btnEl);
+      divFooterEl.appendChild(divLikesEl);
+
+      // Передача данных для нового комментария
+      divHeaderEl.innerHTML = userName + userDate;
+      divTextEl.textContent = `${textEl.value}`
+
+      // Добавление счетчика лайков
+      let counter = 0;
+      spanEl.textContent = counter;
+
+      // Добавление нового комментария
+      listEl.innerHTML = listOld + liEl.outerHTML;
+
+    });
+
   </script>
 </html>
diff --git a/styles.css b/styles.css
index edc120f8cd..b3754b9ab0 100644
--- a/styles.css
+++ b/styles.css
@@ -134,4 +134,8 @@ body {
 
   .add-form-button:hover {
     opacity: 0.9;
+  }
+
+  .error {
+    background-color: #ff0000;
   }
\ No newline at end of file
