GlebkaF · EkaterinaVishnevskaya · Jul 3, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 13, 2025
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
@@ -0,0 +1,3 @@
+tabWidth: 4
+semi: false 
+singleQuote: true
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import config from "eslint-config-prettier";
+import plugin from "eslint-plugin-prettier/recommended";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  config,
+  plugin,
+];
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Проект "Комменты"</title>
@@ -8,42 +8,7 @@
 
   <body>
     <div class="container">
-      <ul class="comments">
-        <li class="comment">
-          <div class="comment-header">
-            <div>Глеб Фокин</div>
-            <div>12.02.22 12:18</div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Это будет первый комментарий на этой странице
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">3</span>
-              <button class="like-button"></button>
-            </div>
-          </div>
-        </li>
-        <li class="comment">
-          <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <ul class="comments"></ul>
       <div class="add-form">
         <input
           type="text"
@@ -63,9 +28,5 @@
     </div>
   </body>
 
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
+  <script type="module" src="index.js"></script>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,7 @@
+import { initAddCommentListener } from "./modules/initListeners.js";
+import { renderComments } from "./modules/renderComments.js";
+
+("use strict");
+
+renderComments();
+initAddCommentListener();
diff --git a/modules/comments.js b/modules/comments.js
@@ -0,0 +1,16 @@
+export let comments = [
+  {
+    name: "Глеб Фокин",
+    text: "Это будет первый комментарий на этой странице",
+    time: "12.02.22 12:18",
+    isLiked: false,
+    likes: 3,
+  },
+  {
+    name: "Варвара Н.",
+    text: "Мне нравится как оформлена эта страница! ❤",
+    time: "13.02.22 19:22",
+    isLiked: true,
+    likes: 75,
+  },
+];
diff --git a/modules/initListeners.js b/modules/initListeners.js
@@ -0,0 +1,62 @@
+import { renderComments } from "./renderComments.js";
+import { sanitizeHTML } from "./sanitizeHTML.js";
+import { comments } from "./comments.js";
+
+const nameField = document.querySelector(".add-form-name");
+const commField = document.querySelector(".add-form-text");
+
+export const initAddCommentListener = () => {
+  const button = document.querySelector(".add-form-button");
+  button.addEventListener("click", () => {
+    const date = new Date();
+    const month = date.getMonth();
+    const year = date.getFullYear() % 100;
+    const day = date.getDate();
+    const hour = date.getHours();
+    const minutes = date.getMinutes();
+    const name = sanitizeHTML(nameField.value);
+    const commText = sanitizeHTML(commField.value);
+    if ((name == "") | (commText == "")) {
+      alert("Вы не ввели имя или ваш комментарий пуст");
+      return;
+    }
+    const dateStr = `${(day < 10 ? "0" : "") + day}.${(month < 10 ? "0" : "") + month}.${(year < 10 ? "0" : "") + year}  ${(hour < 10 ? "0" : "") + hour}:${(minutes < 10 ? "0" : "") + minutes}`;
+    const newComm = {
+      name: name,
+      text: commText,
+      time: dateStr,
+      isLiked: false,
+      likes: 0,
+    };
+    comments.push(newComm);
+    nameField.value = "";
+    commField.value = "";
+    renderComments();
+  });
+};
+
+export const initCommentElementListener = () => {
+  const commentsElements = document.querySelectorAll(".comment");
+  for (const commentElement of commentsElements) {
+    commentElement.addEventListener("click", () => {
+      const comm = comments[commentElement.dataset.index];
+      commField.value += `\n${comm.name}: ${comm.text}\n`;
+    });
+  }
+};
+
+export const initLikeListener = () => {
+  const likeButtons = document.querySelectorAll(".like-button");
+  likeButtons.forEach((likeButton) => {
+    likeButton.addEventListener("click", () => {
+      event.stopPropagation();
+      const index = likeButton.dataset.index;
+      const comm = comments[index];
+
+      comm.likes = comm.isLiked ? comm.likes - 1 : comm.likes + 1;
+      comm.isLiked = !comm.isLiked;
+
+      renderComments();
+    });
+  });
+};
diff --git a/modules/renderComments.js b/modules/renderComments.js
@@ -0,0 +1,34 @@
+import { comments } from "./comments.js";
+import {
+  initLikeListener,
+  initCommentElementListener,
+} from "./initListeners.js";
+
+export const renderComments = () => {
+  const list = document.querySelector(".comments");
+  list.innerHTML = comments
+    .map((comment, index) => {
+      console.log("It works!");
+      return `<li class="comment" data-index="${index}"">
+        <div class="comment-header">
+            <div>${comment.name}</div>
+            <div>${comment.time}</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 data-index="${index}" class="like-button ${comment.isLiked ? "-active-like" : ""}"></button>
+            </div>
+          </div>
+          </li>`;
+    })
+    .join("");
+
+  initLikeListener();
+  initCommentElementListener();
+};
diff --git a/modules/sanitizeHTML.js b/modules/sanitizeHTML.js
@@ -0,0 +1,3 @@
+export const sanitizeHTML = (value) => {
+  return value.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+};
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/eslint b/node_modules/.bin/eslint
diff --git a/node_modules/.bin/eslint-config-prettier b/node_modules/.bin/eslint-config-prettier
diff --git a/node_modules/.bin/js-yaml b/node_modules/.bin/js-yaml
diff --git a/node_modules/.bin/loose-envify b/node_modules/.bin/loose-envify
diff --git a/node_modules/.bin/node-which b/node_modules/.bin/node-which
diff --git a/node_modules/.bin/prettier b/node_modules/.bin/prettier
diff --git a/node_modules/.bin/resolve b/node_modules/.bin/resolve
diff --git a/node_modules/.bin/semver b/node_modules/.bin/semver
diff --git a/node_modules/.bin/tsc b/node_modules/.bin/tsc
diff --git a/node_modules/.bin/tsserver b/node_modules/.bin/tsserver