From f3bbf0b8f13489f0691e63d7e777ed08d4d9c8f4 Mon Sep 17 00:00:00 2001
From: Kubadaleko <7757535@mail.ru>
Date: Sat, 2 Apr 2022 10:11:21 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=BC=D0=B0=D1=88=D0=BD=D1=8F?=
 =?UTF-8?q?=D1=8F=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 1.html |  98 ++++++++++++++++++++++++++++++++++++
 2.html | 119 +++++++++++++++++++++++++++++++++++++++++++
 3.html | 155 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 372 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..5fd9dd0
--- /dev/null
+++ b/1.html
@@ -0,0 +1,98 @@
+<!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",
+  поменяйте текст внутри элемента на "ссылка".
+   */
+
+  const div = document.querySelectorAll('.card-link');
+  div.innerText = 'ссылка';
+  console.log(div);
+
+  /*
+  3. Найти все элементы на странице с классом "card-link", которые лежат в
+  элементе с классом "card-body" и вывести полученную коллекцию в консоль.
+   */
+
+  console.log(document.querySelector('.card-body .card-link'));
+  
+  /*
+  4. Найти первый попавшийся элемент на странице у которого есть атрибут
+  data-number со значением 50 и вывести его в консоль.
+   */
+
+  console.log(document.querySelector('[data-number ="50"]'));
+
+  /*
+  5. Выведите содержимое тега title в консоль.
+   */
+
+  console.log(document.title);
+
+  /*
+  6. Получите элемент с классом "card-title" и выведите его родительский узел
+  в консоль.
+   */
+  
+  const elem1 = document.querySelector('.card-title');
+  console.log(elem1.parentNode);
+  
+
+  /*
+  7. Создайте тег `p`, запишите внутри него текст "Привет" и добавьте созданный
+  тег в начало элемента, который имеет класс "card".
+   */
+  
+  const cardElem = document.querySelector('.card'); 
+  cardElem.insertAdjacentHTML('beforebegin', '<p>Привет</p>');
+  
+
+  /*
+  8. Удалите тег h6 на странице.
+   */
+
+  const h6El = document.querySelector('h6');
+  h6El.remove();
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/2.html b/2.html
new file mode 100644
index 0000000..9c6a918
--- /dev/null
+++ b/2.html
@@ -0,0 +1,119 @@
+<!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 у элементов.
+   */
+
+  const allSel = document.querySelectorAll('.dropdown-item');
+  allSel.forEach(el => el.classList.add('super-dropdown'));
+
+
+  /*
+  2. У элемента с классом btn необходимо убрать класс "btn-secondary", если он
+  присутствует у этого элемента, либо добавить, если такого класса у элемента
+  не было.
+   */
+
+  const btnElem = document.querySelector('.btn');
+  btnElem.classList.toggle('btn-secondary');
+
+
+  /*
+  3. Необходимо удалить класс "dropdown-menu" у элемента, у которого
+  присутствует класс "menu".
+   */
+  
+  const menuElem = document.querySelector('.menu');
+  menuElem.classList.remove('dropdown-menu');
+
+  /*
+  4. Используя метод insertAdjacentHTML добавьте после div'a с классом
+  "dropdown" следующую разметку:
+    <a href="#">link</a>
+   */
+
+  const dropdownElem = document.querySelector('.dropdown');
+  dropdownElem.insertAdjacentHTML('afterend', '<a href="#">link</a>');
+
+
+  /*
+  5. У элемента с id "dropdownMenuButton" замените id на "superDropdown".
+   */
+
+  const dropdownMenuButton = document.getElementById('dropdownMenuButton');
+  dropdownMenuButton.id = 'superDropdown';
+
+
+  /*
+  6. Добавьте атрибут data-dd со значением 3 элементу у которого существует
+  атрибут "aria-labelledby" равный "dropdownMenuButton" используя dataset.
+   */
+
+  const productEl = document.querySelector('[aria-labelledby = "dropdownMenuButton"]');
+  productEl.dataset.dd = '3';
+
+  // Почему у Вас dropdownMenuButton - в двойных ковычках? Почему пишет ошибку если поставить одинарные? 
+  // Почему без ковычек все ок и можно ли ковычки не ставить? 
+  // Равно и тут - productEl.dataset.dd = 3; 3 в ковычки нужно? 
+
+
+  /*
+  7. Удалите атрибут type у элемента с классом "dropdown-toggle".
+   */
+
+  document.querySelector('.dropdown-toggle').removeAttribute('type');
+
+
+  /*
+  8. Выведите в консоль все имеющиеся атрибуты и их значения тега у которого
+  есть все два класса btn и dropdown-toggle.
+  Вывод каждого атрибута и значений должен выглядеть следующим образом (пример):
+  Атрибут "class" содержит значение "btn btn-secondary dropdown-toggle"
+   */
+
+// Не могли-бы разьяснить данный пример подробнее? Я у Вас посмотрел в решении, но 
+// понял не все.
+
+// Это из Вашего решения - 
+// const attributes = document
+//     .querySelector('.btn.dropdown-toggle')
+//     .attributes;
+
+//   for (const attribute of attributes) {
+//     console.log(`Атрибут "${attribute.name}" содержит значение "${attribute.value}"`);
+//   }
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/3.html b/3.html
new file mode 100644
index 0000000..274bba2
--- /dev/null
+++ b/3.html
@@ -0,0 +1,155 @@
+<!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('страница загрузилась');
+  });
+
+
+  /*
+  3. При клике на какой-либо тег на странице в консоль должно выводиться
+  сообщение наподобии:
+  Класс "super_element" присутствует в элементе "div".
+  сообщение должно определять присутствует или отсутвтует класс "super_element"
+  у элемента, а также выводить в нижнем регистре верный тег в данной строке, по
+  которому был совершен клик.
+  Необходимо использовать делегирование.
+  */
+
+  // Смотрю Ваше решение и все понимаю вроде
+  
+  // document.addEventListener('click', event => 
+  // тут вешаем слушателя клика на весь документ
+  // {
+  //   const containStr = event.target.classList.contains('super_element')
+  //     ? 'присутствует' : 'отсутствует';
+  // тут получаем в переменную и одновременно проверяем есть ли 'super_element'
+
+  //   console.log(`Класс "super_element" ${containStr} в элементе "${event.target.tagName.toLowerCase()}".`);
+  // });
+  // тут выводим результат клика в консоль
+  
+  // - это вроде как хорошо, но если его не посмотреть, 
+  // то не могу написать свое. Это плохо...(
+  
+
+
+  /*
+  4. Сделайте, чтобы при наведении на textarea в консоли появлялось сообщение:
+  "Вы навели на textarea."
+   */
+
+  const el = document.querySelector('textarea');
+  el.addEventListener('mouseover' , event => {
+    console.log('Вы навели на textarea');
+  });
+
+
+  /*
+  5. Необходимо повесить событие клика на тег ul. В обработчике события в
+  консоль необходимо выводить текст, который записан внутри элемента кнопки,
+  по которой был произведен клик.
+  Если клик был не по кнопке, то ничего выводить не нужно.
+  Необходимо использовать делегирование.
+   */
+
+  document.querySelector('ul').addEventListener('click' , event => {
+  if(event.target.tagName !== 'BUTTON')
+  return;
+  console.log(event.target.textContent);
+  });
+
+
+  /*
+  6. Вопрос: Почему в console.log пишется сначала текст из 5 задания и только
+  потом выводится текст из 3 задания, если мы кликаем по кнопкам в ul?
+  Ответ необходимо написать здесь же, под этим комментарием, своими словами.
+  */
+
+  // Это связано с погружением, в 3 задании обработка всего документа а в 5 конкретного 
+  // тэга. Поэтому сначала пишется текст из 5 задания и только
+  // потом выводится текст из 3 задания.
+
+
+  /*
+  7. С помощью JS необходимо изменить цвет заднего фона каждого второго тега li.
+   */
+
+  const liElem = document.querySelectorAll('ul li:nth-child(even)');
+  liElem.forEach(element => element.style.background = 'red');
+
+  // Но сначала я написал следующее - 
+  // document.querySelector('li:nth-child(even)').style.background = 'red';
+  // Не сработало потому-что я в данном случае получаю только один тэг? 
+  
+
+
+</script>
+</body>
+</html>
\ No newline at end of file
