Проект: Место

ПР №4-9 в Я.Практикуме. К. Чистов

Обзор

• Интро
• Стек
• Макет
• Картинки
• Верстка
• Поп-ап и обработка формы
• Чек-лист
• Доработки

Интро

• Проект "Место" - интерактивная фотогалерея путешественника
• Приложение на GH Pages

Стек (Что будем использовать)

• HTML, CSS (БЭМ, Nested, адаптив Flex + Grid)
• JavaScript (позже React, WebPack и т.п.)

Макет

• Figma для ПР4
• Figma для ПР5
• Figma для ПР6
• Figma для ПР9

Картинки

• Взяты из макета в Фигме и UnSplash.
• Оптимизируем через TinyPNG, чтобы ускорить загрузку сайта.

Верстка ПР4

• Файловая структура по БЭМ.
• Вёрстка адаптивная
• Мин. ширина: 320px. Макс.: 1280px (три карточки).
• Поп-ап редактирования профиля
• Размер текстовых полей в профиле в моб. версии
• Оттипографить текст
• Чек-лист ПР4

Разработка ПР5

• 6 карточек «из коробки» и Unsplash
• Рендеринг исходных карточек
• Форма добавления карточки Взять в Figma
• Добавление карточки
• Лайк карточки
• Урна и Удаление карточки
• Открытие попапа с картинкой и закрытие по кнопке
• Плавное открытие и закрытие попапов
• Чек-лист ПР5

Разработка ПР6

• Валидация формы «Редактировать профиль» см. макет в Figma
• Валидация формы «Новое место»
• Закрытие попапа кликом на оверлей
• Закрытие попапа нажатием на Esc
• Учесть требования к коду валидации форм
• Чек-лист ПР6

Рефакторинг ПР7

• 1. Класс Card
• 2. Экземпляры класса Card
• 3. Класс FormValidator
• 4 Экземпляры класса FormValidator
• 5 Разбить JS на модули (3 js-файла)
• 6. Установка локального сервера через VSCode Live Serve
• 7. Проверка по Чек-листу ПР7

Рефакторинг ПР8

• 1. Класс Section
• 2. Класс Popup
• 3. Класс PopupWithImage
• 4. Класс PopupWithForm
• 5. Класс UserInfo
• 6. Класс Card
• 7. Файл .gitignore
• 8. Связь классов передачей в конструктор функции - колбэка
• 9. Сборка Вебпаком
• 10. Чек-лист ПР8

Подключение к серверу ПР9

• 0. Получить токен

• 1. Загрузка информации о пользователе с сервера

• 2. Загрузка карточек с сервера

• 3. Редактирование профиля

• 4. Добавление новой карточки

• 5. Отображение количества лайков карточки

• 6. Попап удаления карточки

• 7. Удаление карточки

• 8. Постановка и снятие лайка

• 9. Обновление аватара пользователя

• 10. Улучшенный UX всех форм

• 11. Класс Api

• 12. Проверять качество ответа (res.ok, res.status)

• 13. Учитывать возможность возврата ошибки сервером

• 13. Обрабатывать ошибки в .catch

• 14. Network для просмотра запросов

• Чек-лист ПР9

BackLog Доработки по ПР

• ПР5+ Документация по JSDOC

• ПР6: Придумать решение с rest массива (...)

• ПР7: все замечания отработаны

• ПР8: все замечания отработаны

• ПР9: правки по ревью (см. issues)

• Проверить БЭМ и форматирование (Shift + Option + F.)

• Страница приложения