From f32995d9824c38e11089a3d3d5a654e999e19d49 Mon Sep 17 00:00:00 2001
From: chip777 <chip777@yandex.ru>
Date: Sun, 6 Feb 2022 20:41:22 +0300
Subject: [PATCH] lesson5

---
 1.html |  92 ++++++++++++++++++++++++++++++++++++++
 2.html |  99 ++++++++++++++++++++++++++++++++++++++++
 3.html | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 330 insertions(+)
 create mode 100644 1.html
 create mode 100644 2.html
 create mode 100644 3.html
diff --git a/1.html b/1.html
new file mode 100644
index 0000000..6fe44cc
--- /dev/null
+++ b/1.html
@@ -0,0 +1,92 @@
+<!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" и
+  вывести этот элемент в консоль.
+   */
+  
+   console.log(document.getElementById('super_link'));
+
+  /*
+  2. Внутри всех элементов на странице, которые имеют класс "card-link",
+  поменяйте текст внутри элемента на "ссылка".
+   */
+  
+   document.querySelectorAll('.card-link').forEach(elem => { elem.textContent='ссылка'} );
+
+  /*
+  3. Найти все элементы на странице с классом "card-link", которые лежат в
+  элементе с классом "card-body" и вывести полученную коллекцию в консоль.
+   */
+  
+   document.querySelector('.card-body').querySelectorAll('.card-link').forEach(elem => { console.log(elem); } );
+
+  /*
+  4. Найти первый попавшийся элемент на странице у которого есть атрибут
+  data-number со значением 50 и вывести его в консоль.
+   */
+
+  console.log(document.querySelector('[data-number = "50"]'));
+
+  /*
+  5. Выведите содержимое тега title в консоль.
+   */
+
+   console.log(document.title);
+
+  /*
+  6. Получите элемент с классом "card-title" и выведите его родительский узел
+  в консоль.
+   */
+
+  console.log(document.querySelector('.card-title').parentElement);
+
+  /*
+  7. Создайте тег `p`, запишите внутри него текст "Привет" и добавьте созданный
+  тег в начало элемента, который имеет класс "card".
+   */
+
+  const p = document.createElement('p');
+  p.textContent = 'Привет';
+  const card = document.querySelector('.card');
+  card.prepend(p);
+  /*
+  8. Удалите тег h6 на странице.
+   */
+
+   document.querySelector('h6').remove();
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/2.html b/2.html
new file mode 100644
index 0000000..d1b1985
--- /dev/null
+++ b/2.html
@@ -0,0 +1,99 @@
+<!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 => {
+    //console.log(el.classList);
+    el.classList.add('super-dropdown');
+  })
+
+  /*
+  2. У элемента с классом btn необходимо убрать класс "btn-secondary", если он
+  присутствует у этого элемента, либо добавить, если такого класса у элемента
+  не было.
+   */
+
+   document.querySelector('.btn').classList.toggle('btn-secondary');
+
+  /*
+  3. Необходимо удалить класс "dropdown-menu" у элемента, у которого
+  присутствует класс "menu".
+   */
+
+   document.querySelector('.menu').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".
+   */
+
+   document.querySelector('#dropdownMenuButton').id='superDropdown';
+
+  /*
+  6. Добавьте атрибут data-dd со значением 3 элементу у которого существует
+  атрибут "aria-labelledby" равный "dropdownMenuButton" используя dataset.
+   */
+
+  document.querySelector('[aria-labelledby=dropdownMenuButton]')
+  .dataset.dd=3;
+
+  /*
+  7. Удалите атрибут type у элемента с классом "dropdown-toggle".
+   */
+
+  document.querySelector('.dropdown-toggle').removeAttribute('type');
+
+  /*
+  8. Выведите в консоль все имеющиеся атрибуты и их значения тега у которого
+  есть все два класса btn и dropdown-toggle.
+  Вывод каждого атрибута и значений должен выглядеть следующим образом (пример):
+  Атрибут "class" содержит значение "btn btn-secondary dropdown-toggle"
+   */
+
+   const attr = document.querySelector('.btn.dropdown-toggle').attributes;
+   for (let i = 0; i < attr.length; i++) {
+      console.log(` Атрибут ${attr[i].name} содержит значение ${attr[i].value}`);
+   }
+   
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/3.html b/3.html
new file mode 100644
index 0000000..5e010c5
--- /dev/null
+++ b/3.html
@@ -0,0 +1,139 @@
+<!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',function () {
+    console.log('все теги прогрузились');
+  });
+
+  /*
+  2. Необходимо вывести сообщение в консоль "страница загрузилась", когда все
+  ресурсы страницы будут загружены.
+  */
+
+  window.addEventListener('load',function () {
+    console.log('страница загрузилась');
+  });
+
+
+  /*
+  3. При клике на какой-либо тег на странице в консоль должно выводиться
+  сообщение наподобии:
+  Класс "super_element" присутствует в элементе "div".
+  сообщение должно определять присутствует или отсутвтует класс "super_element"
+  у элемента, а также выводить в нижнем регистре верный тег в данной строке, по
+  которому был совершен клик.
+  Необходимо использовать делегирование.
+  */
+
+  
+  document.addEventListener('click',event => {
+    let present = false;
+    //console.dir(event.target);
+    for (const el of event.target.classList) {
+        if (el === 'super_element') {present = true; }
+        
+    }
+    const elem = event.target.tagName.toLowerCase();
+    if (present) {
+          console.log(`Класс "super_element" присутствует в элементе ${elem}`);
+        } else {
+          console.log(`Класс "super_element" отсутствует в элементе ${elem}`);
+        };
+  });
+
+  /*
+  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.innerText);
+  });
+  /*
+  6. Вопрос: Почему в console.log пишется сначала текст из 5 задания и только
+  потом выводится текст из 3 задания, если мы кликаем по кнопкам в ul?
+  Ответ необходимо написать здесь же, под этим комментарием, своими словами.
+  */
+
+  // Видимо приоритет вызова функции зависит от того насколько функция  обработчика далеко  
+  // от элемента по которому вызвано событие, чем ближе, тем выше приоритет
+  /*
+  7. С помощью JS необходимо изменить цвет заднего фона каждого второго тега li.
+   */
+
+   document.querySelectorAll('li:nth-child(2n)').forEach(el => {
+    el.setAttribute('style','background-color:green');
+    //console.log(el.innerHTML);
+  });
+
+</script>
+</body>
+</html>
\ No newline at end of file
