diff --git a/index.html b/index.html
index 6f14ae14a..b8f849b19 100644
--- a/index.html
+++ b/index.html
@@ -9,55 +9,22 @@
   <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>
       <div class="add-form">
-        <input
+        <input id="name"
           type="text"
           class="add-form-name"
           placeholder="Введите ваше имя"
         />
-        <textarea
+        <textarea id="comment"
           type="textarea"
           class="add-form-text"
           placeholder="Введите ваш коментарий"
           rows="4"
         ></textarea>
         <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
+          <button id="add" class="add-form-button">Написать</button>
         </div>
       </div>
     </div>
@@ -65,7 +32,67 @@
 
   <script>
     "use strict";
-    // Код писать здесь
-    console.log("It works!");
+
+    const comments = [
+      {
+        name: "Глеб Фокин",
+        date: new Date,
+        text: "Это будет первый комментарий на этой странице"
+      },
+      {
+        name: "Варвара Н.",
+        date: new Date,
+        text: "Мне нравится как оформлена эта страница! ❤"
+      },
+    ];
+
+    const renderComments = () => {
+      const list = document.querySelector(".comments");
+
+      list.innerHTML = comments.map((comment, index) => {
+          return `
+            <li class="comment" data-index="${index}">
+          <div class="comment-header">
+            <div>${comment.name}</div>
+            <div>${comment.date.toLocaleDateString()}</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">3</span>
+              <button class="like-button"></button>
+            </div>
+          </div>
+        </li>
+        `;
+        })
+        .join("");
+    };
+
+    renderComments ();
+
+    const button = document.getElementById("add")
+    const name = document.getElementById("name");
+    const text = document.getElementById("comment");
+
+    button.addEventListener("click", () => {
+      const newComment = {
+        name: name.value,
+        date: new Date(),
+        text: text.value,
+      };
+
+      comments.push (newComment);
+
+      renderComments();
+
+      name.value = "";
+      text.value = "";
+
+    });
   </script>
 </html>
