* - проект прошел код-ревью

1. git clone https://elrouss.github.io/mesto.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. npm i - установить зависимости
3. npm run dev - запустить приложение в режиме разработчика (в браузере ввести ссылку http://localhost:8080/, если приложение не открылось там автоматически)

1. Верстка, реализация открытия и закрытия модального окна с возможностью редактирования данных профиля
2. Интерактивные элементы страницы: добавление и удаление карточки, лайки, открытие фотографии карточки в отдельном модальном окне, плавное открытие и закрытие попапов
3. Валидация форм, закрытие модальных кликом по оверлею и нажатием на клавишу "Escape"
4. Начало рефакторинга (переход к классам): добавление компонентов Card и FormValidator, разбиение на модули, директивы import & export
5. Завершение рефакторинга: структуризация проекта, переписывание функций под 5 новых классов (Section, Popup, PopupWithImage, PopupWithForm, UserInfo), сборка проекта Вебпаком
6. Подключение к серверу: загрузка информации о пользователе, обновление аватара, загрузка карточек (добавление и удаление), счетчик лайков, улучшение UX всех форм

Самой трудной частью этого проекта был переход от функционального подхода к классовому: это потребовало прочтения большого количества как основного учебного материала, так и дополнительного. В отдельных случаях терялся контекст (this): проблема решалась использованием стрелочных функций. Кроме того, следовало постоянно отслеживать навешивание и снятие (!) обработчиков событий, в противном случае возникали ошибки (одна из - создание одновременно нескольких карточек при сабмите формы)

Адаптивный интерфейс

Редактирование данных пользователя

Обновление аватара

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

Добавление и снятие лайка (включая счетчик лайков)

Удаление карточки с модальным окном подтверждения действия

Модальное окно с увеличенной фотографией карточки

Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")

Спиннеры загрузки

Валидация форм

1. Оптимизировать страницу для людей с ограниченными возможностями (напр., label для инпутов форм)
2. Реализовать периодическое автоматическое обновление фотогалереи (без блика)
3. Сделать сабмит форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
4. Запретить передачу пустых строк в полях форм