Реализация функциональности проекта «Mesto» на JavaScript

В этом месте вы начнёте добавлять в проект Mesto функциональность на JavaScript. Продолжайте писать код в репозитории, который был создан в прошлом месяце: по истории коммитов будет видно, что вы создали этот проект от начала и до конца.

Не забудьте запушить готовую работу к себе в GitHub. Репозиторий тот же — «mesto-project». Отправить работу на проверку можно также, как и в предыдущих месяцах: в курсе «Сдача проектной работы» перейдите в интерфейс сдачи проектной работы.

1. Работа модальных окон

Открытие и закрытие модального окна

Модальное окно должно открываться по нажатию кнопки «Редактировать», а закрываться — при клике по крестику в правом верхнем углу:

Отслеживайте клик по кнопке методом addEventListener.

Поля формы

При открытии формы поля «Имя» и «О себе» должны быть заполнены теми значениями, которые отображаются на странице.

Если пользователь закрывает модальное окно нажав на крестик, то введённые значения не сохраняются. О том, как работает кнопка «Сохранить», расскажем дальше.

Редактирование имени и информации о себе

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

Вам предстоит часто разбираться в непонятном коде или незнакомой теме. Смоделируем такую ситуацию.

Специальное событие submit отправляет форму (его мы ещё не проходили). Перед вами шаблон кода, реализующий его обработку. Постарайтесь в нём разобраться. Мы оставили в коде комментарии, которые с этим помогут:


// Находим форму в DOM
const formElement = // Воспользуйтесь методом querySelector()
// Находим поля формы в DOM
const nameInput = // Воспользуйтесь инструментом .querySelector()
const jobInput = // Воспользуйтесь инструментом .querySelector()

// Обработчик «отправки» формы, хотя пока
// она никуда отправляться не будет
function formSubmitHandler (evt) {
  evt.preventDefault(); // Эта строчка отменяет стандартную отправку формы.
                        // Так мы можем определить свою логику отправки.
                        // О том, как это делать, расскажем позже.

  // Получите значение полей jobInput и nameInput из свойства value

  // Выберите элементы, куда должны быть вставлены значения полей

  // Вставьте новые значения с помощью textContent
}

// Прикрепляем обработчик к форме:
// он будет следить за событием “submit” - «отправка»
formElement.addEventListener('submit', formSubmitHandler);

Пока эта информация не сохраняется между перезагрузками страницы. Мы научимся сохранять её позже, когда подключим сайт к серверу.

2. Шесть карточек «из коробки»

При загрузке на странице должно быть 6 карточек, которые добавит JavaScript. Их названия и фотографии выберите сами или возьмите готовый массив:


const initialCards = [
{
  name: 'Архыз',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
},
{
  name: 'Челябинская область',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
},
{
  name: 'Иваново',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
},
{
  name: 'Камчатка',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
},
{
  name: 'Холмогорский район',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
},
{
  name: 'Байкал',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
}
];

Фотографии можно взять с сайта Unsplash — коллекции бесплатных изображений. Тогда не придётся думать об авторских правах.

3. Форма добавления карточки

Добавьте в проект форму добавления новой карточки. Макет найдёте в «Фигме».

Сделайте так, чтобы форма открывалась нажатием на кнопку «+» и закрывалась кликом на крестик:

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

Дайте пользователю возможность добавлять карточки:

Сделайте так, чтобы при клике на «сохранить» новая карточка попадала в начало контейнера с ними. А диалоговое окно после добавления автоматически закрывалось.

Чтобы создавать новые карточки, добавьте обработчик событий submit. Сделайте это аналогично прошлому спринту, в котором вы настраивали редактирование информации о пользователе.

5. Лайк карточки

Сделайте так, чтобы карточки можно было лайкать:

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

Добавьте карточкам иконку удаления. Должно выглядеть как в макете:

Теперь настройте, чтобы карточка удалялась при клике на эту иконку:

7. Открытие попапа с картинкой

Настройте просмотр фотографий. Пусть открываются нажатием на картинку и закрываются кликом на крестик:

Требования к вёрстке:

внешний вид попапа с картинкой как на макете;
файловая структура организована по БЭМу;
вёрстка адаптивная, без полосы прокрутки при изменении ширины окна. Максимальная ширина открытой картинки — 75vw, максимальная высота — 75vh.

8. Плавное открытие и закрытие попапов

Сделайте так, чтобы все попапы плавно открывались. Пусть проявляются из прозрачности и уходят в неё при закрытии:

Свойство display:none не позволит сделать плавное переключение между состояниями карточек. Нужно что-то придумать.

Подсказка. Если зашли в тупик, прочитайте вот этот тред на StackOverflow. Там в первом ответе вы найдёте два CSS-свойства, которые помогут.

9. Git

Вы уже знаете основы работы с Git: умеете создавать ветки и коммиты. Научимся делать это более осмысленно. Так, чтобы в релиз попадало меньше багов, разработчики не мешались друг другу, а история коммитов и ветвлений была понятной.

Работа с Git в большом проекте может выглядеть так. Горизонтальные линии — это ветки, а круги — коммиты:

Main — главная ветка репозитория. Код в ней должен быть полностью работоспособен и готов к публикации на сервере. В нашем случае публикацию будет заменять проверка ревьюера, поэтому смержьте нужные коммиты в main до отправки работы на ревью.

Develop — это основная «рабочая» ветка. Все коммиты должны быть смержены в develop, протестированы и исправлены перед тем, как попадут в main.

Features — «функциональные» ветки, их может быть сколько угодно. Такие ветки создают, чтобы реализовать небольшую единицу функциональности: шапку сайта, форму контакта, логику добавления карточки. После того как функциональность реализована, коммиты переносят в develop. А feature-ветку — удаляют.

Имена функциональных веток начинают со слова feature, а затем кратко описывают функциональность, для которой ветка создана:

feature/header;
feature/contact-form;
feature/insert-card.

Обычно сайт тестируют и отлаживают в ветке develop, а затем новые возможности переносят в main. Но иногда ошибки всё-таки всплывают, исправлять их нужно как можно скорее. Для этого предназначены ветки с приставкой hotfixes.

Hotfixes — ветки «быстрых исправлений», когда нужно что-то исправить в ветке main. В нашем случае исправлениями будут требования ревьюеров. Веток быстрых фиксов может быть сколько угодно. Их называют по имени бага с приставкой hotfix/, например:

hotfix/bem-naming;
hotfix/mobile-layout-400;
hotfix/card-duplicates.

Профессиональная работа с ветками в общем виде

Перед началом нового этапа разработки весь код из main мержат в develop.
Создают функциональную ветку feature/feature-name из develop.
Разрабатывают новую функциональность в ветке feature/feature-name.
После завершения разработки код из feature/feature-name мержат в develop.
Ветку feature/feature-name удаляют.
Если нужно реализовать что-то ещё, повторяют шаги с пункта 2.
Тестируют и исправляют всю функциональность в ветке develop, а затем мержат в main.
Работу отправляют на ревью.
По результатам ревью создают новую ветку быстрых исправлений hotfix/bug-name. В ней исправляют все проблемы, выявленные на ревью.
После завершения разработки код из hotfix/bug-name мержится в main.
Ветку hotfix/bug-name удаляют.
Если работа все ещё не принята, повторяют шаги, начиная с 9-го.

Фотографии можно брать не из макета, а с сайта https://unsplash.com — это коллекция бесплатных фотографий, которые можно использовать, не беспокоясь об авторских правах.

Заключение

Если перезагрузить страницу, карточки и лайки не сохранятся. Для этого пришлось бы писать бэкэнд. Тогда бы сайт получал карточки с сервера и там же сохранял новые. Вы же в этом месяце делали только фронтенд сайта, логику его интерактивности.

В реальных проектах так и происходит: фронтенд и бэкенд пишутся отдельно, а потом их связывают друг с другом.