# Неделя #4 Асинхронность и работа с сетью. Начинаем работать над ВП №1

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

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

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

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

1. 1. Склонируйте форкнутый репозиторий
2. Переключитесь на ветку с домашним заданием git checkout 6-dnd
3. Приступаем к выполнению ДЗ №6
4. Повторите действия начиная с пункта 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);

3. Для того, чтобы протестировать сделанную работу - запускаем тесты с помощью команды npm run test. Все доступные команды указаны в описании к сборке на GitHub и package.json

4. После выполнения создаем Pull Request в Github. Ссылку отправляем наставнику на проверку.

# Выполнить домашнее задание #7 (Создать редактор cookie с возможностью фильтрации)

1. Склонируйте форкнутый репозиторий
2. Переключитесь на ветку с домашним заданием git checkout 7-cookie
3. Приступаем к выполнению ДЗ №7
4. Повторите действия начиная с пункта 4 алгоритма работы с ДЗ

Задание 7.1:

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

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

Задание 7.2:

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

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

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

Задание 7.3:

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

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

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

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

3. Для того, чтобы протестировать сделанную работу - запускаем тесты с помощью команды npm run test. Все доступные команды указаны в описании к сборке на GitHub и package.json

4. После выполнения создаем Pull Request в Github. Ссылку отправляем наставнику на проверку.

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

# Начинаем работать над ВП №1 (для тех кто справился с ДЗ №6-7)

Посмотреть стрим от наставника Loftschool Ольги Болотовой: Использование API Яндекс.Карт на сайте

Посмотреть подключение Yandex-карт от преподавателя Владимира Сабанцева

Макет для выпускного проекта доступен по ссылке

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

# Реализовать выпускной проект №1

1. Создайте приложение, которое отображает яндекс-карту на всю страницу. На карте можно выбирать объекты и оставлять отзывы о них.

2. Добавьте возможность реагировать на клики по карте. При клике на карту - открывайте балун с формой для отзыва (саму форму будем оживлять дальше)

Результат:

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

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

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

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

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

# 🗓 Вторник

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

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

# 🗓 Среда

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

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

# 🗓 Четверг

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

Подготовьте вопросы и запишитесь на консультацию к наставнику (тариф "Уютный").

# 🗓 Пятница

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

Работаем над выпускным проектом №1

# 🗓 Выходные

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

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