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

Описание проекта

Место - это интерактивная страница, на которой пользователи могут делиться фотографиями, удалять их и ставить лайки.

Обзор

Страница состоит из следующих разделов:

• Хэдер, в котором размещен логотип сервиса.
• Краткая информация о пользователе и заглавное изображение профиля.
• Фотогалерея, выполненная в виде мозаики из карточек. Вверху каждой карточки размещена кнопка для ее удаления, внизу - кнопка "Мне нравится".
• Футер с информацией об авторских правах.

На странице также имеется 4 изначально скрытых модальных окна:

• Форма для установки нового изображения пользователя. Открыть форму можно нажав на установленное на текущий момент изображение.
• Форма для редактирования раздела с информацией о пользователе. Форма открывается нажатием расположенной в разделе кнопки. При открытии в поля формы вносятся текущие пользовательские данные. Подтверждение изменений обновляет содержимое и заголовок страницы и закрывает форму.
• Форма для добавления в галерею нового изображения. Кнопка для открытия формы находится в разделе с информацией о пользователе. После внесения названия и ссылки на изображение и нажатия на кнопку "Создать" карточка с новым изображением добавляется в начало фотогалереи.
• Окно для просмотра изображения в большом размере. Окно открывается при нажатии на любое изображение в галерее.

Стек технологий:

• HTML5;
• CSS3:
  • Flexbox;
  • Grid Layout;
  • Positioning;
  • Adaptive UI;
  • Media Queries;
• Методология БЭМ;
• Файловая структура Nested БЭМ;
• JavaScript:
  • Стиль CamelCase;
  • Объектно-ориентированное программирование;
  • Промисы (Promise);
  • Асинхронность и оптимизация;
  • API (Application Programming Interface);
• Webpack;
• Семантическая верстка.

Функционал:

1. Редактирование аватара и профиля;
2. Добавление фотографии и лайков;
3. Удаление фотографии и лайков;
4. Открытие фотографии в полном размере;
5. Валидация формы «Редактировать профиль»
   • оба поля обязательные;
   • поле «Имя» от 2 до 40 символов;
   • поле «О себе» от 2 до 200 символов;
6. Валидация формы «Новое место»
   • оба поля обязательные;
   • поле «Название » от 2 до 40 символов;
   • поле «Ссылка» проверяет, что ввели именно ссылку
7. Закрытие попапов кликом на оверлей и клавишей Esc
8. Применена стандартная валидация через HTML и CSS
9. Настроена сборка webpack-ом

Проектная работа этого спринта - подключение проекта Mesto к серверу.

1. Загрузка информации о пользователе с сервера
2. Загрузка карточек с сервера
3. Редактирование профиля
4. Добавление новой карточки
5. Отображение количества лайков карточки
6. Попап удаления карточки
7. Постановка и снятие лайка
8. Обновление аватара пользователя
9. Улучшенный UX всех форм

Языки:

JavaScript

Figma

Ссылка на макет в Figma

Картинки

Использована программа Оптимизатор картинок для более быстрой загрузки сайта

🔥 Ссылка на проект:

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