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

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

Обзор

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

Интро

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

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

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

Макет

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

Картинки

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

Верстка ПР4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• [x] 11. Класс Api

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

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

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

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

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

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

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

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

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

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

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

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

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