Feature/likes toggle

index.html

@@ -65,7 +65,136 @@
 
   <script>
     "use strict";
-    // Код писать здесь
-    console.log("It works!");
+
+    // Массив с данными комментариев
+    const 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 renderComments() {
+      const commentsList = document.querySelector('.comments');
+      commentsList.innerHTML = '';
+
+      comments.forEach((comment, index) => {
+        const commentElement = document.createElement('li');
+        commentElement.className = 'comment';
+
+        // Определяем класс для иконки лайка на основе булевого значения
+        const likeButtonClass = comment.isLiked ? 'like-button -active-like' : 'like-button';
+
+        commentElement.innerHTML = `
+          <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="${likeButtonClass}" data-index="${index}"></button>
+            </div>
+          </div>
+        `;
+
+        commentsList.appendChild(commentElement);
+      });
+
+      // Добавляем обработчики для кнопок лайков
+      addLikeHandlers();
+    }
+
+    // Функция добавления обработчиков для лайков
+    function addLikeHandlers() {
+      const likeButtons = document.querySelectorAll('.like-button');
+
+      likeButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+          const index = parseInt(button.dataset.index);
+          const comment = comments[index];
+
+          if (comment.isLiked) {
+            // Убираем лайк
+            comment.likes -= 1;
+            comment.isLiked = false;
+          } else {
+            // Ставим лайк
+            comment.likes += 1;
+            comment.isLiked = true;
+          }
+
+          // Перерисовываем все комментарии
+          renderComments();
+        });
+      });
+    }
+
+    // Функция добавления нового комментария
+    function addComment(name, text) {
+      if (!name.trim() || !text.trim()) {
+        alert('Пожалуйста, заполните все поля!');
+        return;
+      }
+
+      const currentDate = new Date();
+      const formattedDate = currentDate.toLocaleDateString('ru-RU') + ' ' + 
+                           currentDate.toLocaleTimeString('ru-RU', {hour: '2-digit', minute: '2-digit'});
+
+      // Добавляем новый комментарий в массив
+      const newComment = {
+        name: name,
+        date: formattedDate,
+        text: text,
+        likes: 0,
+        isLiked: false
+      };
+
+      comments.push(newComment);
+
+      // Перерисовываем все комментарии
+      renderComments();
+
+      // Очищаем форму
+      document.querySelector('.add-form-name').value = '';
+      document.querySelector('.add-form-text').value = '';
+    }
+
+    // Обработчик для кнопки "Написать"
+    document.querySelector('.add-form-button').addEventListener('click', () => {
+      const name = document.querySelector('.add-form-name').value;
+      const text = document.querySelector('.add-form-text').value;
+      addComment(name, text);
+    });
+
+    // Обработчик для Enter в текстовом поле
+    document.querySelector('.add-form-text').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && e.ctrlKey) {
+        const name = document.querySelector('.add-form-name').value;
+        const text = document.querySelector('.add-form-text').value;
+        addComment(name, text);
+      }
+    });
+
+    // Инициализация при загрузке страницы
+    document.addEventListener('DOMContentLoaded', () => {
+      renderComments();
+    });
   </script>
 </html>