Kubadaleko · Kubadaleko · Apr 2, 2022 · Apr 4, 2022 · Apr 4, 2022
diff --git a/1.html b/1.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Homework</title>
+    <style>
+      .product {
+        width: 200px;
+        padding: 10px;
+        float: left;
+        margin-right: 30px;
+        box-shadow: 0 0 4px black;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+    <div class="product">
+      <div class="productName">Товар 1</div>
+      <img src="https://picsum.photos/id/367/200/300" alt="" />
+      <button>В корзину</button>
+    </div>
+    <div class="product">
+      <div class="productName">Товар 2</div>
+      <img src="https://picsum.photos/id/425/200/300" alt="" />
+      <button>В корзину</button>
+    </div>
+    <div class="product">
+      <div class="productName">Товар 3</div>
+      <img src="https://picsum.photos/id/429/200/300" alt="" />
+      <button>В корзину</button>
+    </div>
+
+    <script>
+      "use strict";
+
+      /*
+  1. Установите всем элементам с классом "productName" размер шрифта 24px.
+   */
+
+      const elem1 = document.querySelectorAll(".productName");
+      elem1.forEach((el) => (el.style.fontSize = "24px"));
+
+      /*
+  2. Установите всем элементам с классом "product" внешний отступ справа 50px.
+   */
+
+      const elem2 = document.querySelectorAll(".product");
+      elem1.forEach((el) => el.style.marginRight = "50px");
+
+      /*
+  3. При клике на кнопку "В корзину" название кнопки должно поменяться на
+  "Добавлено" и кнопка должна стать неактивной.
+   */
+
+      const el2 = document.querySelectorAll("button");
+      for (let i = 0; i < el2.length; i++) {
+        el2[i].addEventListener("click", function () {
+          el2[i].innerText = "Добавлено";
+          el2[i].disabled = true;
+        });
+      }
+
+      /*
+  4. Создайте полную (глубокую) копию элемента с классом product, измените в
+  этой копии путь до картинки на:
+  https://picsum.photos/id/1080/200/300
+  Поставьте название товара в данной копии "Товар 4" и замените последний
+  отображенный товар на странице на созданную копию. У данной копии также
+  должен правильно работать код из 3-го задания.
+   */
+
+      const prodElem = document.querySelector(".product");
+      const prodElemClone = prodElem.cloneNode(true);
+      prodElemClone.querySelector("img").src =
+        "https://picsum.photos/id/1080/200/300";
+      prodElemClone.querySelector(".productName").textContent = "Товар 4";
+      document
+        .querySelector(".product:nth-child(3)")
+        .replaceWith(prodElemClone);
+
+      /*
+  5. По истечению 2 секунд с момента открытия страницы первый товар должен быть
+  удален из html.
+   */
+
+      const elem4 = document.querySelector(".product");
+      document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(function () {
+          elem4.remove();
+        }, 2000);
+      });
+    </script>
+  </body>
+</html>
diff --git a/2.html b/2.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Homework</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
+    />
+    <style>
+      .message {
+        width: 150px;
+        padding: 20px;
+        background: lightgoldenrodyellow;
+        border: 1px solid orange;
+        visibility: hidden;
+      }
+      .error {
+        border: 0.3rem solid red;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+    <input id="from" type="text" />
+    В инпуте написано: <span></span>
+
+    <br />
+
+    <button class="messageBtn">Показать блок</button>
+    <div class="message">Привет :)</div>
+
+    <br />
+
+    <form>
+      <label>
+        Первый инпут:
+        <input class="form-control" type="text" />
+      </label>
+      <br />
+      <br />
+      <label>
+        Второй инпут:
+        <select class="form-control">
+          <option value=""></option>
+          <option value="1">Один</option>
+          <option value="2">Два</option>
+        </select>
+      </label>
+      <br />
+      <br />
+      <button>Отправить</button>
+    </form>
+
+    <script>
+      "use strict";
+
+      /*
+  1. При изменении значения в input с id="from", значение содержащееся в нем
+  должно моментально отображаться в span. То есть при печати в input'е тег span
+  также должен меняться.
+  */
+
+    const spanElem = document.querySelector("span");  
+    document.getElementById("from").addEventListener("input", (event) => {
+    spanElem.textContent = event.target.value;
+      });
+
+      /*
+  2. При клике на кнопку с классом messageBtn необходимо элементу с классом
+  message:
+  1) добавить два класса: animate__animated и animate__fadeInLeftBig
+  2) поставить данному элементу стиль visibility в значение 'visible'.
+   */
+
+      const message = document.querySelector(".message");
+      document.querySelector("button").addEventListener("click", () => {
+        message.classList.add("animate__animated", "animate__fadeInLeftBig");
+        message.style.visibility = "visible";
+      });
+
+      /*
+  3. Необходимо при отправке формы проверить, заполнены ли все поля в этой
+  форме. Если какое-либо поле не заполнено, форма не должна отправляться, также
+  должны быть подсвечены незаполненные поля (необходимо поставить класс error
+  незаполненным полям).
+  Как только пользователь начинает заполнять какое-либо поле, необходимо,
+  при вводе в данное поле, произвести проверку:
+  Если поле пустое, необходимо данное поле подсветить (поставить класс error
+  данному полю).
+  Если поле было чем-либо заполнено, подсветку (класс error) необходимо убрать.
+   */
+
+      const formTag = document.querySelector("form");
+      const inputTags = document.querySelectorAll(".form-control");
+      formTag.addEventListener("submit", (event) => {
+        inputTags.forEach((inputTag) => {
+          if (inputTag.value === "") {
+            inputTag.classList.add("error");
+            event.preventDefault();
+          }
+        });
+      });
+
+      formTag.addEventListener("input", (event) => {
+        if (event.target.value === "") {
+          event.target.classList.add("error");
+        } else {
+          event.target.classList.remove("error");
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/3.html b/3.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+      crossorigin="anonymous"
+    />
+    <style>
+      i {
+        font-size: 50px;
+      }
+      .golden {
+        color: gold;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+    <div class="stars_container">
+      <i class="fas fa-star"></i>
+      <i class="fas fa-star"></i>
+      <i class="fas fa-star"></i>
+      <i class="fas fa-star"></i>
+      <i class="fas fa-star"></i>
+    </div>
+
+    <script>
+      "use strict";
+
+      /*
+  1. При наведении на любую из звезд, данной звезде должен ставиться класс
+  golden, также такой класс должен ставиться всем звездам до нее слева.
+  */
+
+      document.body.addEventListener("mouseover", (e) => {
+        const starsContainer = e.target;
+        if (!e.target.classList.contains('fas')) {
+          return;
+        }
+        starsContainer.classList.add("golden");
+        console.log(e.target.classList.contains);
+        let star = e.target;
+        do {
+          // красим звезду
+          star.classList.add("golden");
+          // Берем предыдущую звезду
+          star = star.previousElementSibling;
+          // Если предыдущая есть, то запускаем цикл еще раз.
+        } while (star);
+      });
+
+      // не сделал для всех звезд слева!!! Сделал аналогично через for, но опять-же
+      // без крайних звезд.... подскажите как это сделать в моем коде? Если это возможно::)))))
+
+      /*
+  2. Когда мы уводим курсор мыши от звезды, все поставленные классы из первого
+  задания должны быть удалены.
+   */
+
+      document.body.addEventListener("mouseout", (e) => {
+        const starsContainer = e.target;
+        console.log(starsContainer);
+        if (!e.target.classList.contains('fas')) {
+          return;
+        }
+        starsContainer.classList.remove("golden");
+        let star = e.target;
+        do {
+          // красим звезду
+          star.classList.remove("golden");
+          // Берем предыдущую звезду
+          star = star.previousElementSibling;
+          // Если предыдущая есть, то запускаем цикл еще раз.
+        } while (star);
+      });
+
+      /*
+  3. Когда мы переводим мышь от одной звезды к другой, у нас могут мигать
+  звезды (временно могут становиться черными). Почему так? Напишите словами.
+  Можем ли мы это исправить? Если да, то предложите решение.
+  */
+    </script>
+  </body>
+</html>