GlebkaF · SaraLeya · Mar 8, 2023 · Mar 8, 2023 · Mar 9, 2023 · Mar 9, 2023
diff --git a/index.html b/index.html
@@ -2,12 +2,13 @@
 <html>
   <head>
     <title>Проект "Комменты"</title>
+    <meta charset="utf-8" />
     <link rel="stylesheet" href="styles.css" />
   </head>
 
   <body>
     <div class="container">
-      <ul class="comments">
+      <ul class="comments" id="comments">
         <li class="comment">
           <div class="comment-header">
             <div>Глеб Фокин</div>
@@ -32,7 +33,7 @@
           </div>
           <div class="comment-body">
             <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
+              Мне нравится как оформлена эта страница!
             </div>
           </div>
           <div class="comment-footer">
@@ -47,23 +48,91 @@
         <input
           type="text"
           class="add-form-name"
+          id="name"
           placeholder="Введите ваше имя"
         />
         <textarea
           type="textarea"
           class="add-form-text"
+          id="textarea"
           placeholder="Введите ваш коментарий"
           rows="4"
         ></textarea>
         <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
+          <button class="add-form-button" id="button">Написать</button>
         </div>
       </div>
     </div>
   </body>
-
+  <style>
+    .error {
+      background-color: blanchedalmond;
+    }
+  </style>
+
   <script>
-    // Код писать здесь
-    console.log("It works!");
+    console
+    const button = document.getElementById("button");
+    const comments = document.getElementById("comments");
+    const name = document.getElementById("name");
+    const textarea = document.getElementById("textarea");
+
+    button.addEventListener("click", () => {
+
+let myTime;
+  let myDate = new Date();
+  let day = myDate.getDate();
+  let month = myDate.getMonth();
+  let year = myDate.getFullYear();
+  let hour = myDate.getHours();
+  let minute = myDate.getMinutes();
+
+  if (day < 10) {
+    day = "0" + day;
+  }
+  if (month < 10) {
+    month = "0" + month;
+  }
+  if (minute < 10) {
+    minute = "0" + minute;
+  }
+
+  myTime = day + "." + month + "." + year + " " + hour + ":" + minute;
+
+ textarea.classList.remove("error");
+      name.classList.remove("error");
+
+if (name.value === "") {
+  name.classList.add("error");
+  return;
+}
+if (textarea.value === "") {
+  textarea.classList.add("error");
+  return;
+ } 
+const oldComments = comments.innerHTML;
+comments.innerHTML = oldComments + 
+`<li class="comment">
+          <div class="comment-header">
+            <div>${name.value}</div>
+            <div>${myTime}</div>
+          </div>
+          <div class="comment-body">
+            <div class="comment-text">
+          ${textarea.value}
+         </div>
+       </div>
+       <div class="comment-footer">
+         <div class="likes">
+           <span class="likes-counter"></span>
+           <button class="like-button"></button>
+         </div>
+       </div>
+     </li>
+`;
+textarea.value = "";
+name.value = "";
+    });
+
   </script>
-</html>
+</html>
diff --git a/practic.html b/practic.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+    <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Книжки</title>
+  </head>
+
+  <body>
+    <div id="books">Заглушка</div>
+    <button id="show-button">Посмотреть книги</button>
+  </body>
+
+  <script>
+    const books = [
+      {
+        title: "Искусство программирования",
+        price: 1300,
+      },
+      {
+        title: "Тихо!",
+        price: 700,
+      },
+      {
+        title: "Ночной дозор",
+        price: 980,
+      },
+    ];
+
+    let totalPrice = 0;
+
+    for (let a of books){
+        totalPrice += a.prise;
+    }
+
+    console.log(totalPrice);
+
+    /* Допишите код: используйте цикл for...of, чтобы посчитать общую стоимость книг в массиве books */
+
+    // Должен выводить в консоль 2980
+   /* console.log(totalPrice)
+
+    /* Допишите код: используйте методы массива map + join, чтобы получить строчку — список всех книг через запятую */
+   /* const booksList = ...; */
+
+    // Должен выводить строку "Искусство программирования, Тихо!, Ночной дозор"
+   /* console.log(booksList)
+
+    /*
+     * Допишите код:
+     * Используйте document.getElementById, innerHtml и addEventListener,
+     * чтобы при клике на кнопку текст «Заглушка» на странице изменялся на
+     * «Искусство программирования, Тихо!, Ночной дозор = 2980 рублей»
+     * */
+    /* const buttonElement = document.getElementById('show-button');
+    ... */
+  </script>
+</html>