# Неделя #4 Асинхронность и работа с сетью. Создание редактора cookie

# Подготовка к выполнению задания

Изучить все материалы четвертой недели курса в Личном кабинете.

# Что нужно сделать?

# Выполнить домашнее задание #6 (DOM Events)

  1. Скачайте архив с домашним заданием №6
  2. Перейдите в папку с архивом
  3. Приступаем к выполнению ДЗ №6
  4. Задание 6.1:

Функция должна добавлять обработчик fn события eventName к элементу target

Пример:

addListener('click', document.querySelector('a'), () => console.log('...')) // должна добавить указанный обработчик кликов на указанный элемент
 
function addListener(eventName, target, fn) {
}

Задание 6.2:

Функция должна удалять у элемента target обработчик fn события eventName

Пример:


removeListener('click', document.querySelector('a'), someHandler) // должна удалить указанный обработчик кликов на указанный элемент

function removeListener(eventName, target, fn) {
}

Задание 6.3:

Функция должна добавить к элементу target такой обработчик на события eventName, чтобы он отменял действия по умолчанию

Пример:

skipDefault('click', document.querySelector('a')) // после вызова функции, клики на указанную ссылку не должны приводить к переходу на другую страницу
 
function skipDefault(eventName, target) {
}

Задание 6.4:

Функция должна эмулировать событие click для элемента target

Пример:

emulateClick(document.querySelector('a')) // для указанного элемента должно быть симулировано события click

function emulateClick(target) {
}

Задание 6.5:

Функция должна добавить такой обработчик кликов к элементу target, который реагирует (вызывает fn) только на клики по элементам BUTTON внутри target

Пример:

delegate(document.body, () => console.log('кликнули на button')) // добавит такой обработчик кликов для body, который будет вызывать указанную функцию только если кликнули на кнопку (элемент с тегом button)
 
function delegate(target, fn) {
}

Задание 6.6:

Функция должна добавить такой обработчик кликов к элементу target, который сработает только один раз и удалится (перестанет срабатывать для последующих кликов по указанному элементу)

Пример:

once(document.querySelector('button'), () => console.log('обработчик выполнился!')) // добавит такой обработчик кликов для указанного элемента, который вызовется только один раз и затем удалится

function once(target, fn) {
}

export { addListener, removeListener, skipDefault, emulateClick, delegate, once };

# Задание с *

  • Создайте страницу с кнопкой.
  • При нажатии на кнопку должен создаваться div со случайными размерами, цветом и позицией на экране
  • Необходимо предоставить возможность перетаскивать созданные div при помощи drag and drop
  • Запрещено использовать сторонние библиотеки. Разрешено пользоваться только тем, что встроено в браузер

homeworkContainer - это контейнер для всех ваших домашних заданий. Если вы создаете новые html-элементы и добавляете их на страницу, то добавляйте их только в этот контейнер

Пример:

   const newDiv = document.createElement('div');
   homeworkContainer.appendChild(newDiv);
  1. Запустить тесты и убедиться, что они прошли
  2. Сделайте коммит и пуш изменений
  3. Создайте пулл реквест и отправьте его на проверку наставнику
  1. Скачайте архив с домашним заданием №7
  2. Перейдите в папку с архивом
  3. Приступаем к выполнению ДЗ №7
  4. Задание 7.1:

На странице должна быть таблица со списком имеющихся cookie. Таблица должна иметь следующие столбцы:

  • имя
  • значение
  • удалить (при нажатии на кнопку, выбранная cookie удаляется из браузера и таблицы)

Задание 7.2:

На странице должна быть форма для добавления новой cookie. Форма должна содержать следующие поля:

  • имя
  • значение
  • добавить (при нажатии на кнопку, в браузер и таблицу добавляется новая cookie с указанным именем и значением)

Если добавляется cookie с именем уже существующей cookie, то ее значение в браузере и таблице должно быть обновлено

Задание 7.3:

На странице должно быть текстовое поле для фильтрации cookie.

В таблице должны быть только те cookie, в имени или значении которых, хотя бы частично, есть введенное значение.

  • Если в поле фильтра пусто, то должны выводиться все доступные cookie
  • Если добавляемая cookie не соответствует фильтру, то она должна быть добавлена только в браузер, но не в таблицу
  • Если добавляется cookie, с именем уже существующей cookie и ее новое значение не соответствует фильтру, то ее значение должно быть обновлено в браузере, а из таблицы cookie должна быть удалена

Запрещено использовать сторонние библиотеки. Разрешено пользоваться только тем, что встроено в браузер.

  1. Запустить тесты и убедиться, что они прошли
  2. Сделайте коммит и пуш изменений
  3. Создайте пулл реквест и отправьте его на проверку наставнику

Дедлайн: понедельник следующей недели, в 12.00

# Как всё успеть?

Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.

# 🗓 Понедельник

Изучаем материалы по теме "Работа с сетью"

Выполняем домашнее задание 6

# 🗓 Вторник

Прорабатываем материалы из прикрепленных ссылок к теме "Работа с сетью"

Сдаём домашнее задание 6 на проверку.

# 🗓 Среда

Вносим правки в домашнее задание №6 после проверки его наставником.

Изучаем материалы по теме "Browser API"

# 🗓 Четверг

Выполняем домашнее задание 7

Подготовьте вопросы и запишитесь на консультацию к наставнику.

# 🗓 Пятница

Смотрим воркшоп с разбором заданий по четвертой неделе.

Сдаём домашнее задание 7 на проверку.

# 🗓 Суббота

Вносим правки в домашнее задание №7 после проверки его наставником.

← Неделя #5 Работа над ВП №1 →