From ff1b2e91c46796cbab32c1dab67cb0b67028d118 Mon Sep 17 00:00:00 2001
From: golubevNikita <vulivercushe.premedu@gmail.com>
Date: Thu, 12 Dec 2024 22:13:22 +0300
Subject: [PATCH] completed-hw1

---
 index.html                              | 273 ++++++++++++++++++------
 styles.css                              |   4 +
 this.beforeGitHubPuplication/JS.js      | 101 +++++++++
 this.beforeGitHubPuplication/index.html |  50 +++++
 this.beforeGitHubPuplication/styles.css | 147 +++++++++++++
 5 files changed, 515 insertions(+), 60 deletions(-)
 create mode 100644 this.beforeGitHubPuplication/JS.js
 create mode 100644 this.beforeGitHubPuplication/index.html
 create mode 100644 this.beforeGitHubPuplication/styles.css
diff --git a/index.html b/index.html
index 6f14ae14a..b98ebf8be 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,224 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Проект "Комменты"</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-
-  <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>
+<head>
+ <title>Проект "Комменты"</title>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="container">
+    <ul data-js-comment-container class="comments">
+      <!-- <li class="comment">
+        <div class="comment-header">
+          <div>Глеб Фокин</div>
+          <div>12.02.22 12:18</div>
+        </div>
+        <div data-js-text-area class="comment-body">
+          <div class="comment-text">
+            Это будет первый комментарий на этой странице
           </div>
-        </li>
-        <li class="comment">
-          <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span data-js-like-counter class="likes-counter">3</span>
+            <button data-js-like-button data-js-button-index="0" class="like-button"></button>
           </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
-            </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 data-js-text-area class="comment-text">
+            Мне нравится как оформлена эта страница! ❤
           </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
-            </div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span data-js-like-counter class="likes-counter">75</span>
+            <button data-js-like-button data-js-button-index="0" class="like-button -active-like"></button>
           </div>
-        </li>
-      </ul>
-      <div class="add-form">
-        <input
-          type="text"
-          class="add-form-name"
-          placeholder="Введите ваше имя"
-        />
-        <textarea
-          type="textarea"
-          class="add-form-text"
-          placeholder="Введите ваш коментарий"
-          rows="4"
-        ></textarea>
-        <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
         </div>
+      </li> -->
+    </ul>
+
+    <div class="add-form">
+      <input
+        data-js-name-input
+        type="text"
+        class="add-form-name"
+        placeholder="Введите ваше имя"
+      />
+
+      <textarea
+        data-js-comment-input
+        type="textarea"
+        class="add-form-text"
+        placeholder="Введите ваш коментарий"
+        rows="4"
+      ></textarea>
+
+      <div class="add-form-row">
+        <button data-js-add-button class="add-form-button">Написать</button>
       </div>
     </div>
-  </body>
+  </div>
+</body>
+
+<script>
+
+const commentInput = document.querySelector('[data-js-comment-input]');
+const nameInput = document.querySelector('[data-js-name-input]');
+const addCommentButton = document.querySelector('[data-js-add-button]');
+
+const commentContainer = document.querySelector('[data-js-comment-container]');
+const commentText = document.querySelector('[data-js-text-area]');
+const commentLikeCounter = document.querySelector('[data-js-like-counter]');
+
+const commentsArray = [
+  {
+    commentHeader: {
+      himself: 'Варвара Н.',
+      commentDateAndTime: '13.02.22 19:22',
+    },
+
+    commentBody: {
+      commentText: 'Мне нравится как оформлена эта страница! ❤',
+    },
+
+    commentFooter: {
+      likes: {
+        likesCounter: 75,
+        likeButton: true,
+      },
+    },
+  },
+
+  {
+    commentHeader: {
+      himself: 'Глеб Фокин',
+      commentDateAndTime: '12.02.22 12:18',
+    },
+
+    commentBody: {
+      commentText: 'Это будет первый комментарий на этой странице',
+    },
+
+    commentFooter: {
+      likes: {
+        likesCounter: 8,
+        likeButton: false,
+      },
+    },
+  },
+];
+
+function renderCommentEl(itemEl, indexEL) {
+  return `<li class="comment" data-js-comment-el-index="${indexEL}">
+    <div class="comment-header">
+      <div>${itemEl.commentHeader.himself}</div>
+      <div>${itemEl.commentHeader.commentDateAndTime}</div>
+    </div>
+    <div class="comment-body">
+      <div data-js-text-area class="comment-text">${itemEl.commentBody.commentText}</div>
+    </div>
+    <div class="comment-footer">
+      <div class="likes">
+        <span data-js-like-counter
+        class="likes-counter">${itemEl.commentFooter.likes.likesCounter}</span>
+        
+        <button data-js-like-button data-js-button-index="${indexEL}"
+        class="like-button${itemEl.commentFooter.likes.likeButton 
+        ? " -active-like" 
+        : ""}"></button>
+      </div>
+    </div>
+  </li>`;
+};
+
+function canILike() {
+  const commentLikeButtons = document.querySelectorAll('[data-js-like-button]');
+  for (const commentLikeButtonEL of commentLikeButtons) {
+    commentLikeButtonEL.addEventListener("click", () => {
+      const likeIndex = commentLikeButtonEL.dataset.jsButtonIndex;
+
+      if (commentsArray[likeIndex].commentFooter.likes.likeButton) {
+        commentsArray[likeIndex].commentFooter.likes.likeButton = false;
+        commentsArray[likeIndex].commentFooter.likes.likesCounter -= 1;
+      } else {
+        commentsArray[likeIndex].commentFooter.likes.likeButton = true;
+        commentsArray[likeIndex].commentFooter.likes.likesCounter += 1;
+      };
+
+      commentRender();
+    });
+  };
+};
+
+function commentRender() {
+  const commentsHtml = commentsArray.map((item, index) => renderCommentEl(item, index)).join("");
+  
+  commentContainer.innerHTML = commentsHtml;
+
+  canILike();
+}
+
+commentRender();
+
+addCommentButton.addEventListener("click", (event) => {
+  commentInput.classList.remove("main__input_empty");
+  nameInput.classList.remove("main__input_empty");
+
+  let newDateObject = new Date();
+  correctedYear = String(newDateObject.getFullYear()).split("").slice(-2).join("");
+
+  const commentDate = `${newDateObject.getDate()}.${newDateObject.getMonth()}.${correctedYear}
+  ${newDateObject.getHours()}:${newDateObject.getMinutes()}`
+
+  if (commentInput.value === "" && nameInput.value === "") {
+      commentInput.classList.add("main__input_empty");
+      nameInput.classList.add("main__input_empty");
+      return;
+  };
+
+  if (commentInput.value === "") {
+      commentInput.classList.add("main__input_empty");
+      return;
+  };
+
+  if (nameInput.value === "") {
+      nameInput.classList.add("main__input_empty");
+      return;
+  };
+
+  const newCommentsArray = {
+    commentHeader: {
+      himself: nameInput.value,
+      commentDateAndTime: commentDate,
+    },
+
+    commentBody: {
+      commentText: commentInput.value,
+    },
+
+    commentFooter: {
+      likes: {
+        likesCounter: 0,
+        likeButton: false,
+      },
+    },
+  };
+  
+  commentsArray.push(newCommentsArray);
+  commentInput.value = "";
+  nameInput.value = "";
+  
+  commentRender();
+});
 
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
+</script>
 </html>
diff --git a/styles.css b/styles.css
index edc120f8c..cec646d62 100644
--- a/styles.css
+++ b/styles.css
@@ -134,4 +134,8 @@ body {
 
   .add-form-button:hover {
     opacity: 0.9;
+  }
+
+  .main__input_empty {
+    background-color: rgb(255,164,148);
   }
\ No newline at end of file
diff --git a/this.beforeGitHubPuplication/JS.js b/this.beforeGitHubPuplication/JS.js
new file mode 100644
index 000000000..9d13aa1d3
--- /dev/null
+++ b/this.beforeGitHubPuplication/JS.js
@@ -0,0 +1,101 @@
+
+const commentInput = document.querySelector('[data-js-comment-input]');
+const addCommentButton = document.querySelector('[data-js-add-button]');
+
+const commentContainer = document.querySelector('[data-js-comment-container]');
+const commentText = document.querySelector('[data-js-text-area]');
+const commentLikeCounter = document.querySelector('[data-js-like-counter]');
+
+const commentsArray = [
+    {text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit',
+        likeState: {
+            isLike: false,
+            likeCount: 10,
+        }
+    },
+
+    {text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, praesentium?',
+        likeState: {
+            isLike: true,
+            likeCount: 3,
+        }
+    },
+
+    {text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur quas earum obcaecati molestiae?',
+        likeState: {
+            isLike: false,
+            likeCount: 8,
+        }
+    },
+];
+
+function renderCommentEl(itemEl, indexEL) {
+    return `<div class="main__comment" data-js-comment-el-index="${indexEL}">
+    <p class="main__text-comment" data-js-text-area>${itemEl.text}</p>
+    <div class="main__like-container">
+    <input type="checkbox" ${itemEl.likeState.isLike 
+        ? "checked='true'"
+        : ""}
+    class="main__like-button${itemEl.likeState.isLike === true 
+        ? " main__like-button_color-on"
+        : " main__like-button_color-off"}" data-js-like-button data-js-button-index="${indexEL}">
+        </input>
+    <span class="main__like-counter" data-js-like-counter>${itemEl.likeState.likeCount}</span>
+    </div>
+    </div>`;
+};
+
+function canILike() {
+    const commentLikeButtons = document.querySelectorAll('[data-js-like-button]');
+    for (const commentLikeButtonEL of commentLikeButtons) {
+        commentLikeButtonEL.addEventListener("click", () => {
+
+            const likeIndex = commentLikeButtonEL.dataset.jsButtonIndex;
+            const htmlLikeEL = document.querySelector(`[data-js-button-index="${likeIndex}"]`);
+
+            if (htmlLikeEL.getAttribute('checked')) {
+                htmlLikeEL.removeAttribute('checked');
+                commentsArray[likeIndex].likeState.isLike = false;
+                commentsArray[likeIndex].likeState.likeCount -= 1;
+            } else {
+                htmlLikeEL.setAttribute('checked', 'true');
+                commentsArray[likeIndex].likeState.isLike = true;
+                commentsArray[likeIndex].likeState.likeCount += 1;
+            };
+
+            commentRender();
+        });
+    };
+};
+
+function commentRender() {
+    const commentsHtml = commentsArray.map((item, index) => renderCommentEl(item, index)).join("");
+    
+    commentContainer.innerHTML = commentsHtml;
+    
+    canILike();
+}
+
+commentRender();
+
+addCommentButton.addEventListener("click", () => {
+    commentInput.classList.remove("main__input_empty");
+    
+    if (commentInput.value === "") {
+        commentInput.classList.add("main__input_empty");
+        return;
+    };
+    
+    const newCommentsArray = { 
+        text: commentInput.value,
+        likeState: {
+            isLike: false,
+            likeCount: 0,
+        },
+    };
+  
+    commentsArray.push(newCommentsArray);
+    commentInput.value = "";
+    
+    commentRender();
+});
diff --git a/this.beforeGitHubPuplication/index.html b/this.beforeGitHubPuplication/index.html
new file mode 100644
index 000000000..7463a231a
--- /dev/null
+++ b/this.beforeGitHubPuplication/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>4-nd course DOM</title>
+    <link rel="stylesheet" href="styles.css"/>
+</head>
+
+<body class="center">
+    <header class="header">
+        <h1 class="header__title">Комментарии</h1>
+    </header>
+
+    <main class="main">
+        <div class="main__add-content-container">
+            <input type="text" class="main__input" data-js-comment-input/>
+            <button type="button" class="main__button" data-js-add-button>
+                Добавить комментарий
+            </button>
+        </div>
+
+        <div class="main__comment-container" data-js-comment-container>
+            <!-- ориентировочный элемент комментария -->
+
+            <!-- <div class="main__comment" data-js-comment-el-index="">
+                <p class="main__text-comment" data-js-text-area>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                    Consequuntur numquam nemo perferendis exercitationem.
+                </p>
+    
+                <div class="main__like-container">
+                    <input type="checkbox" value="false" class="main__like-button" data-js-like-button data-js-button-index="">
+                    </input>
+    
+                    <span class="main__like-counter" data-js-like-counter>
+                        0
+                    </span>
+                </div>
+            </div> -->
+        </div>
+    </main>
+
+</body>
+
+<script src="JS.js"></script>
+
+</html>
diff --git a/this.beforeGitHubPuplication/styles.css b/this.beforeGitHubPuplication/styles.css
new file mode 100644
index 000000000..9361c5c7e
--- /dev/null
+++ b/this.beforeGitHubPuplication/styles.css
@@ -0,0 +1,147 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Montserrat", sans-serif;
+}
+
+.center {
+    padding-right: calc(50% - 600px);
+    padding-left: calc(50% - 600px);
+}
+
+.header__title {
+    margin: 30px;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.main__add-content-container {
+    box-sizing: border-box;
+    display: flex;
+    gap: 5px;
+    margin: 20px;
+}
+
+.main__input {
+    box-sizing: border-box;
+    width: 250px;
+    height: 60px;
+    margin-bottom: 30px;
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    border: 2px solid tomato;
+    border-radius: 10px;
+    background-color: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.main__input_empty {
+    background-color: bisque;
+}
+
+.main__button {
+    box-sizing: border-box;
+    border: 2px solid tomato;
+    border-radius: 10px;
+    height: 60px;
+    width: 150px;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: bisque;
+    text-align: center;
+    cursor: pointer;
+    padding: 10px;
+}
+
+.main__comment {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 5px;
+    border: 2px solid tomato;
+    border-radius: 10px;
+    width: 400px;
+    height: 150px;
+    padding: 10px;
+    margin: 20px;
+}
+
+.main__text-comment {
+    text-align: left;
+}
+
+.main__like-container {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    gap: 5px;
+    align-items: center;
+    border: 2px solid tomato;
+    border-radius: 10px;
+    width: 110px;
+    height: 50px;
+    text-align: center;
+    align-self: flex-end;
+    padding: 5px;
+    background-color: bisque;
+}
+
+.main__like-button {
+    box-sizing: border-box;
+    border-color: transparent;
+    border-radius: 10px;
+    width: 50px;
+    height: 36px;
+    cursor: pointer;
+    background-color: transparent;
+    appearance: none;
+}
+
+.main__like-button::after, .main__like-button::before {
+    position: absolute;
+    content: "";
+    width: 15px;
+    height: 30px;
+    border: 1px solid;
+    border-color: grey;
+    background-color: grey;
+    border-radius: 40% 40% 0 0;
+}
+
+.main__like-button_color-off::after, .main__like-button_color-off::before {
+    border-color: grey;
+    background-color: grey;
+}
+
+.main__like-button_color-on::after, .main__like-button_color-on::before {
+    border-color: red;
+    background-color: red;
+}
+
+.main__like-button::after {
+    left: 27px;
+    top: 6px;
+    transform: rotate(45deg);
+}
+
+.main__like-button::before {
+    left: 16px;
+    top: 6px;
+    transform: rotate(-45deg);
+}
+
+.main__like-counter {
+    display: block;
+    color: black;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    letter-spacing: 0px;
+    padding-right: 10px;
+}
