Учебный проект "Место"

Проектная работа 3 - 4 курса, спринты 4 - 9 по профессии "Веб-разработчик" образовательной платформы ЯндексПрактикум поток №39, группа "Purple" старт обучения по основной программе - 14.11.2021 года

Обзор

Описание
Использовано
Процесс написания

Описание

(Изображения взяты из описаний проектных работ Яндекс.Практикум)

Место - сервис для обмена фотографиями. Пользователи сервиса могут добавлять, удалять фотографии, а так же ставить лайки понравившимся фотографиям.

Страница проекта на GitHub Pages

Использовано:

Браузерные стили сброшены через Normalize.css;
Семантическая верстка;
Файловая структура проекта организована по БЭМ-схеме Nested;
Шрифты в форматах woff и woff2;
Изображения с unsplash (для локальной версии приложения):

Iceland от пользователя Cosmic Timetraveler;
Буковель, Yaremcha, Ukraine от пользователя Maksym Tymchyk;
Iceland от пользователя Leandra Rieger;
Road trip through Arizona от пользователя Polina Kuzovkova;
Toronto, Canada от пользователя Hazwan Kosni;
Trondheim от пользователя Error 420 📷;

Сетка на flex;
Фиксированное (fixed) позиционирование для всплывашки (popup) чтоб не убегала при прокручивании страницы;
Карточки изображений формируются из массива, отрисовка при загрузке страницы;
Карточки располагаются в разметке не сверху - вниз, слева - направо, а снизу - вверх, справа налево, добаленные первыми карточки будут справа внизу, новые - слева вверху;
Адаптивное окно просмотра изображения;
Сведения об открытой для просмотра карточке берутся из разметки нажатой карточки;
Валидация форм добавки места и редактирования профиля, не прошедшие валидацию поля подсвечиваются, под ними отображается ошибка валидации;
Всплывающие окна закрываются нажатием на оверлей (затемненную область вокруг окна) или нажатием на кнопку ESC;
Модули:

Card.js - создает карточку из массива, устанавливает прослушиватели нажатия на удаление, лайк и нажатие на изображение;
FormValidator.js - включение валидации всем формам на странице;
Popup.js - конструктор всплывающих окон;
PopupWithForm.js - конструктор всплывающих окон с формой;
PopupWithImage.js - конструктор всплывающих окон с изображением;
Section.js - конструктор секций (контейнеров с однотипными элементами);
UserInfo.js - конструктор информации о пользователе - получает данные о пользователе из разметки и обновляет данные в разметке;
Api.js - конструктор интерфейса взаимодействия с сервером - получение, сохранение, удаление карточек и получение / обновление информации о пользователе и аватара пользователя;
PopupWithConfirmation.js - конструктор всплывающих окон с кнопкой подтверждения;

Настройки для работы с API и параметры для валидатора хранятся в src/utils/const.js и импортируются в index.js;

Получен опыт:

семантической HTML-разметки.
использования в верстке БЭМ-подхода.
кросс-браузерной верстки и использования вендорных CSS-префиксов.
работы с системой контроля версий Git и сервисом GitHub.
использования CSS-анимаций, фреймов, подключения шрифтов.
организации файловой стркутуры проекта по Nested Bem.
адаптивной верстки, использования медиа-запросов.
работы с макетом в Figma.
оптимизации графики
публикации проекта на GitHub Pages
работы с DOM-событиями
работы с DOM-разметкой в JavaScript
валидации форм в JavaScript
работы с API, использования HTTP-запросов

Планы по доработке:

Вывод ошибок в всплывающие окна;

Пошагово:

Спринт 4 (10.01.2022 - 13.01.2022):

Настройка проекта: gitignore, nojekyll;
Normalize.css. Установка через npm: npm install normalize.css;
Семантическая разметка;
Изображения с Unsplash и из макета Figma;
Параметры текстовых элементов - цвет, размер, междустрочный интервал;
Шапка (header) для больших разрешений;
Шапка (header) для мобильных разрешений;
Профиль (profile) для больших разрешений;
Профиль (profile) для мобильных разрешений;
Галерея (gallery) для больших разрешений;
Общий блок button для изменения прозрачности при наведении на кнопки;
Галерея (gallery) для мобильных разрешений;
Подвал (footer) для больших разрешений;
Подвал (footer) для мобильных разрешений;
Всплывашка (popup);
JS:

ф-я открытия всплывашек (с аргументом popup - элемент всплывашки, т.к. их будет несколько);
ф-я закрытия всплывашки (без аргументов, универсальная, условие на класс всплывашки, очищает поля ввода у заданных в теле функции);
ф-я получения данных пользователя (сейчас - из профиля, в будущем - из сервера);
ф-я очистки инпутов (с аргументом popup - элемент всплывашки, т.к. их будет 2 - редактирование профиля и добавление места);
ф-я кнопки лайк (сейчас просто переключает класс);
ф-я отправки введенных в всплывашку редактирования профиля данных (сейчас просто переписывает значения в профиле);

FIX: название класса меток в всплывашках;
FIX: лого в шапке тегом <img> вместо фонового изображения ссылки;
FIX: карточки в gallery оформлены неупорядоченным списком;

Спринт 5 (25.01.2022 - 30.01.2022):

Добавлена всплывашка добавления места;
Функция закрытия всплывашки теперь проверяет всплывашку и сбрасывает поля ввода, если нужно;
Добавлена всплывашка просмотра изображения;
Всплывашки плавно исчезают при открытии/закрытии;
Функция, создающая массив карточек при загрузке страницы, добавлении/удалении карточки;
Функция удаления карточки по индексу элемента DOM карточки, удаляет из массива, после чего карточки заново отрисовываются;
Функция добавления карточки, добавляет в конец массива, но так как элементы идут в обратном порядке в разметке, то новая карточка будет первой;
Правки js: карточка по шаблону template, flex-shrink для кнопки лайк, при удалении карточки она удаляется из разметки, добавляется так же прямо в разметку, галерея вернулась к grid, не используется innerHTML, инпуты в форме сбрасываются методом reset;
Правки js: удаляется весь li карточки, а не карточка, галерея все-таки флексом, иначе при удалении карточки будут дырки

Спринт 6 (31.01.2022 - 06.02.2022):

Добавлено заблокированное состояние кнопки отправки формы;
Добавлены в разметку заготовки для текстов ошибок;
Все группы поля ввода/тексты ошибок обернуты в label;
JS-библиотека для валидации форм: принимает настройки через объект, подсвечивает непрошедшие проверку поля, показывает сообщения об ошибках для каждого поля, блокирует кнопку отправки формы, если в форме не прошел валидацию хоть одно поле, валидация полей происходит во время ввода текста;
Добавлено в основной JS-скрипт: в ф-ю открытия всплывашки добавлено создание прослушивателя нажатия на ESC, в ф-ю закрытия - его удаление, в ф-ю сброса значений полей ввода формы в всплывашке, добавлена проверка наличия полей ввода, чтобы не выполнять проверку в других местах, добавлена ф-я закрывающая открытую всплывашку по нажатию ESC, добавлен прослушиватель нажатия на оверлей всплывашки, закрывающий ее;
Мелкие украшалки проекта: фав-иконки, тема для мобильных устройств;
FIX: JSDoc для комментариев и описания в js-файлах;
FIX: Отдельные функции для закрытия всплывашек;
FIX: Общая функция для прослушивателей нажатия на оверлей попапа и кнопку закрытия попапа;
FIX: Отдельные функции для включения и выключения ошибок валидируемых инпутов;
FIX: Массив с карточками вынесен в отдельный файл;
FIX: Для тайм-аута очистки полей отдельная константа;
FIX: Исправлено: addPlaceButton -> buttonAddPlace, cardTeplate -> cardTemplate, прослушиватель keydown нажатия кнопки ESC установлен на document вместо window;
FIX: Для функций likePhoto, getImage и deletePhoto вместо элемента аргументом передается событие evt;
FIX: В константе исключен лишний поиск cardElement, content уже есть в константе cardTemplate;
FIX: Упрощены прослушиватели нажатия на лайк, нажатия на изображение карточки и нажатия на кнопку удаления карточки;
FIX: Исправлено: константа clearInputsTimeout -> CLEAR_INPUTS_TIMEOUT;

Спринт 7 (02.03.2022 - 07.03.2022):

JS рефакторинг - модули, классы Card и FormValidator;
FIX: классу Card добавлены методы _likePhoto и _deletePhoto, исправлена прозрачность оверлея всплывашки просмотра изобажения карточки, исправлены курсоры интерактивных элементов, класс FormValidator в конструктор принимает элемент формы, которую нужно валидировать;
FIX: в классе Card поправлены методы _likePhoto и _deletePhoto на классовые переменные;
FIX: отдельные экземпляры класса FormValidator для каждой формы - добавления карточки и редактирования пользователя;
FIX: валидация формы при открытии попапа (после сохранения / закрытия), клонирование шаблона карточки от тега
;

Спринт 8 (19.03.2022 - 20.03.2022):

Установлены webpack, webpack-cli и webpack-dev-server, настроены сборки build и dev, настроена минификация и транспиляция JS Babel, настроена минификация CSS и автоматическое добавление вендорных префиксов, настроена обработка изображений и шрифтов;
Классы Popup, PopupWithForm, PopupWithImage, Section, UserInfo;

Спринт 9 (30.03.2022 - ...):

Добавлена библиотека gh-pages, автоматически размещающая проект на GitHub Pages, в package.json добавлен скрипт deploy, запускающий сборку (нужен SSH ключ для Git);
Добавлена разметка всплывашки удаления карточки с кнопкой подтверждения;
В разметку добавлена всплывашка редактирования аватара пользователя, а так же кнопка редактирования аватара, отображающаяся при наведении курсора на аватар;
Для кнопок без текстовых значений добавлены артибуты aria-label для улучшения доступности;
Добавлен класс Api для работы с сервером;
Карточки загружаются с сервера;
Добавлен класс PopupWithConfirmation.js для всплывашек с кнопкой подтверждения;
Изменен шаблон карточки - добавлен счетчик лайков;
Карточки добавляются / удаляются через API;
Кол-во лайков берется из свойств карточки полученных от сервера, если в поставленных лайках есть id текущего пользователя, то лайк на карточке будет активным;
Аватар берется из ответа сервера, сохраняет на сервере новый, в разметке исправлено object-fit для аватара (для не квадратных аватаров);
В разметке все изображения, которые подгружаются с сервера, заменены на битовое изображение с черным фоном, текстовые значения данных пользователя заменены на заглушки;
При отправке данных на сервер (аватар, инфо пользователя, карточка) надпись на кнопке меняется на "Сохранение...";
Настройки валидации перенесены в src/utils/const.js;

AstreyaJulia/mesto