ProstoSerghei · ProstoSerghei · Jan 5, 2023
diff --git a/1.html b/1.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+
+<body>
+  <!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+  <a href="#" class="card-link">Card link</a>
+  <a href="#" class="card-link">Another link</a>
+
+  <div class="card" style="width: 18rem;">
+    <div class="card-body">
+      <h5 class="card-title" data-number="100">Card title</h5>
+      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+      <p class="card-text" data-number="50">
+        Some quick example text to build on the card title and make up the bulk of the card's
+        content.
+      </p>
+      <a href="#" id="super_link" class="card-link">Card link</a>
+      <a href="#" class="card-link" data-number="50">Another link</a>
+    </div>
+  </div>
+
+  <script>
+    "use strict";
+
+    /*
+    1. Найти по id, используя getElementById, элемент с id равным "super_link" и
+    вывести этот элемент в консоль.
+     */
+    const superLinkEl = document.getElementById('super_link');
+    console.log(superLinkEl);
+    console.log('\n');
+
+    /*
+    2. Внутри всех элементов на странице, которые имеют класс "card-link",
+    поменяйте текст внутри элемента на "ссылка".
+     */
+    const cardLinksEls = document.querySelectorAll('.card-link');
+    cardLinksEls.forEach((linkEl) => {
+      linkEl.innerHTML = 'ссылка';
+    })
+
+    /*
+    3. Найти все элементы на странице с классом "card-link", которые лежат в
+    элементе с классом "card-body" и вывести полученную коллекцию в консоль.
+     */
+    const cardBodyLnksEls = document.querySelectorAll('.card-body > .card-link');
+    cardBodyLnksEls.forEach((lnkEl) => {
+      console.log(lnkEl);
+    });
+    console.log('\n');
+
+    /*
+    4. Найти первый попавшийся элемент на странице у которого есть атрибут
+    data-number со значением 50 и вывести его в консоль.
+     */
+    const numberFromFirstEl = document.querySelector('[data-number]');
+    console.log(numberFromFirstEl);
+    console.log(numberFromFirstEl.dataset.number);
+    console.log('\n');
+
+    /*
+    5. Выведите содержимое тега title в консоль.
+     */
+    const titleDocInner = document.title;
+    console.log(titleDocInner);
+    console.log('\n');
+
+    /*
+    6. Получите элемент с классом "card-title" и выведите его родительский узел
+    в консоль.
+     */
+    const parentCardTitleEl = document.querySelector('.card-title').parentNode;
+    console.log(parentCardTitleEl);
+    console.log('\n');
+
+    /*
+    7. Создайте тег `p`, запишите внутри него текст "Привет" и добавьте созданный
+    тег в начало элемента, который имеет класс "card".
+     */
+    const myNewTag = document.createElement('p');
+    myNewTag.innerHTML = 'Привет';
+    document.querySelectorAll('.card').forEach((el) => {
+      el.insertAdjacentElement('afterbegin', myNewTag);
+    });
+
+    /*
+    8. Удалите тег h6 на странице.
+     */
+    document.querySelectorAll('h6').forEach((el) => {
+      el.remove();
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/2.html b/2.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+
+<body>
+  <!--
+Обязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+  <p class="dropdown">Привет :)</p>
+  <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+      aria-haspopup="true" aria-expanded="false">
+      Dropdown button
+    </button>
+    <div class="menu dropdown-menu" aria-labelledby="dropdownMenuButton">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+    </div>
+  </div>
+
+  <script>
+    "use strict";
+
+    /*
+    1. Ко всем элементам, имеющим класс "dropdown-item" добавить еще один класс
+    "super-dropdown", необходимо использовать методы forEach и querySelectorAll и
+    свойство classList у элементов.
+     */
+    document.querySelectorAll('.dropdown-item').forEach((el) => {
+      el.classList.add('super-dropdown');
+    });
+
+    /*
+    2. У элемента с классом btn необходимо убрать класс "btn-secondary", если он
+    присутствует у этого элемента, либо добавить, если такого класса у элемента
+    не было.
+     */
+    document.querySelectorAll('.btn').forEach((el) => {
+      el.classList.toggle('btn-secondary');
+    });
+
+    /*
+    3. Необходимо удалить класс "dropdown-menu" у элемента, у которого
+    присутствует класс "menu".
+     */
+    const allDropDownMenuEls = document.querySelectorAll('.dropdown-menu');
+    if (allDropDownMenuEls) {
+      allDropDownMenuEls.forEach((el) => {
+        let classEnabled = el.classList.contains('menu');
+        if (classEnabled) {
+          el.classList.remove('dropdown-menu');
+        }
+      });
+    }
+
+    /*
+    4. Используя метод insertAdjacentHTML добавьте после div'a с классом
+    "dropdown" следующую разметку:
+      <a href="#">link</a>
+     */
+    document.querySelector('div.dropdown').insertAdjacentHTML("afterend", '<a href="#">link</a>');
+
+    /*
+    5. У элемента с id "dropdownMenuButton" замените id на "superDropdown".
+     */
+    dropdownMenuButton.id = 'superDropdown';
+
+    /*
+    6. Добавьте атрибут data-dd со значением 3 элементу у которого существует
+    атрибут "aria-labelledby" равный "dropdownMenuButton" используя dataset.
+     */
+    document.querySelectorAll('*').forEach((el) => {
+      if (el.hasAttribute('aria-labelledby')) {
+        if (el.getAttribute('aria-labelledby') === 'dropdownMenuButton') {
+          el.dataset.dd = '3';
+        }
+      }
+    });
+
+    /*
+    7. Удалите атрибут type у элемента с классом "dropdown-toggle".
+     */
+    document.querySelector('.dropdown-toggle').removeAttribute('type');
+
+    /*
+    8. Выведите в консоль все имеющиеся атрибуты и их значения тега у которого
+    есть все два класса btn и dropdown-toggle.
+    Вывод каждого атрибута и значений должен выглядеть следующим образом (пример):
+    Атрибут "class" содержит значение "btn btn-secondary dropdown-toggle"
+     */
+    document.querySelectorAll('*').forEach((el) => {
+      let classListEl = el.classList.value.split(' ');
+      if (classListEl.includes('btn') && classListEl.includes('dropdown-toggle')) {
+        for (let attr = 0; attr < el.attributes.length; attr++) {
+          console.log(`Атрибут "${el.attributes[attr].nodeName}" содержит значение "${el.attributes[attr].nodeValue}"`);
+        };
+      }
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/3.html b/3.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Homework</title>
+</head>
+
+<body>
+  <!--
+Необязательное задание.
+
+Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
+стирать, код с решением задачи пишем под комментарием.
+-->
+
+  <p class="super_element">Привет</p>
+
+  <img src="https://placeimg.com/50/50/animals" alt="">
+  <img src="https://placeimg.com/50/50/arch" alt="">
+  <img src="https://placeimg.com/50/50/nature" alt="">
+  <img src="https://placeimg.com/50/50/people" alt="">
+  <img src="https://placeimg.com/50/50/tech" alt="">
+  <img src="https://placeimg.com/50/50/tech/grayscale" alt="">
+  <img src="https://placeimg.com/50/50/tech/sepia" alt="">
+
+  <br>
+
+  <button>Кнопка</button>
+  <button class="super_element">Кнопка с классом btn</button>
+  <button>Кнопка</button>
+
+  <br>
+
+  <textarea></textarea>
+
+  <br>
+
+  <ul>
+    <li>
+      <button>Кнопка 1</button>
+    </li>
+    <li>
+      <button>Кнопка 2</button>
+    </li>
+    <li>
+      <button>Кнопка 3</button>
+    </li>
+    <li>
+      <button>Кнопка 4</button>
+    </li>
+  </ul>
+
+  <script>
+    "use strict";
+
+    /*
+    1. Необходимо вывести сообщение в консоль "все теги прогрузились", когда все
+    теги будут созданы браузером.
+    */
+    document.addEventListener('DOMContentLoaded', () => { console.log('Все теги прогрузились.'); });
+
+    /*
+    2. Необходимо вывести сообщение в консоль "страница загрузилась", когда все
+    ресурсы страницы будут загружены.
+    */
+    window.addEventListener('load', () => { console.log('Cтраница загрузилась.'); });
+
+    /*
+    3. При клике на какой-либо тег на странице в консоль должно выводиться
+    сообщение наподобие:
+    Класс "super_element" присутствует в элементе "div".
+    сообщение должно определять присутствует или отсутствует класс "super_element"
+    у элемента, а также выводить в нижнем регистре верный тег в данной строке, по
+    которому был совершен клик.
+    Необходимо использовать делегирование.
+    */
+    document.body.addEventListener('click', event => {
+      let element = event.target;
+      if (element.classList.contains('super_element')) {
+        console.log(`Класс "super_element" присутствует в элементе "${element.tagName.toLowerCase()}".`);
+      } else {
+        console.log(`Класс "super_element" отсутствует в элементе "${element.tagName.toLowerCase()}".`);
+      }
+    });
+
+    /*
+    4. Сделайте, чтобы при наведении на textarea в консоли появлялось сообщение:
+    "Вы навели на textarea."
+     */
+    document.querySelector('textarea').addEventListener('mouseover', () => { console.log('Вы навели на textarea.'); })
+
+    /*
+    5. Необходимо повесить событие клика на тег ul. В обработчике события в
+    консоль необходимо выводить текст, который записан внутри элемента кнопки,
+    по которой был произведен клик.
+    Если клик был не по кнопке, то ничего выводить не нужно.
+    Необходимо использовать делегирование.
+     */
+    document.querySelector('ul').addEventListener('click', event => {
+      if (event.target.tagName === 'BUTTON') {
+        console.log(event.target.innerHTML);
+      }
+    });
+
+    /*
+    6. Вопрос: Почему в console.log пишется сначала текст из 5 задания и только
+    потом выводится текст из 3 задания, если мы кликаем по кнопкам в ul?
+    Ответ необходимо написать здесь же, под этим комментарием, своими словами.
+    */
+
+
+    // Происходит всплытие события. Сначала обрабатывается событие в теге 'ul', затем событие в теге 'body' (в моем случае).
+
+
+    /*
+    7. С помощью JS необходимо изменить цвет заднего фона каждого второго тега li.
+     */
+    const liEls = document.querySelectorAll('li')
+    for (let i = 0; i < liEls.length; i++) {
+      if (i % 2 !== 0) {
+        liEls[i].style.background = 'red';
+      }
+    };
+
+  </script>
+</body>
+
+</html>