- Верстка макета Figma "Путешествие по России".
- Создание файловой структуры CSS по методологии БЭМ.
- Использование технологии Grid Layout.
- Разработка интерфейса для разных устройств.
- Использование медиазапросов.
- Внешний вид сайта соответствует макету: Figma.
- Файловая структура организована по БЭМу.
- Вёрстка адаптивная: ширина зоны с содержимым должна меняться вместе с шириной окна браузера. При этом не должна появляться горизонтальная полоса прокрутки. Минимальная ширина: 300px (одна карточка в ряд).
- Максимальная: 1280px (три карточки в ряд).
- Открытие и закрытие попапа.
- При открытии формы поля «Имя» и «О себе» должны быть заполнены теми значениями, которые отображаются на странице.
- Редактирование имени и информации о себе.
- Форма добавления карточки.
- Лайк карточки.
- Удаление карточки.
- Открытие попапа с картинкой.
- Плавное открытие и закрытие попапов.
- Валидация формы «Редактировать профиль».
- Валидация формы «Новое место».
- Закрытие попапа кликом на оверлей.
- Закрытие попапа нажатием на Esc.
- Принимает в конструктор её данные и селектор её template-элемента.
- Содержит приватные методы, которые работают с разметкой, устанавливают слушателей событий.
- Содержит приватные методы для каждого обработчика.
- Содержит один публичный метод, который возвращает полностью работоспособный и наполненный данными элемент карточки.
- Принимает в конструктор объект настроек с селекторами и классами формы.
- Принимает вторым параметром элемент той формы, которая валидируется.
- Имеет приватные методы, которые обрабатывают форму: проверяют валидность поля, изменяют состояние кнопки сабмита, устанавливают все обработчики.
- Имеет один публичный метод enableValidation, который включает валидацию формы.
- Первым параметром конструктора принимает объект с двумя свойствами: items и renderer. Свойство items — это массив данных, которые нужно добавить на страницу при инициализации класса. Свойство renderer — это функция, которая отвечает за создание и отрисовку данных на странице.
- Второй параметр конструктора — селектор контейнера, в который нужно добавлять созданные элементы.
- Содержит публичный метод, который отвечает за отрисовку всех элементов. Отрисовка каждого отдельного элемента должна осуществляться функцией renderer.
- Содержит публичный метод addItem, который принимает DOM-элемент и добавляет его в контейнер.
- Принимает в конструктор единственный параметр — селектор попапа.
- Содержит публичные методы open и close, которые отвечают за открытие и закрытие попапа.
- Содержит приватный метод _handleEscClose, который содержит логику закрытия попапа клавишей Esc.
- Содержит публичный метод setEventListeners, который добавляет слушатель клика иконке закрытия попапа.
- Кроме селектора попапа принимает в конструктор колбэк сабмита формы.
- Содержит приватный метод _getInputValues, который собирает данные всех полей формы.
- Перезаписывает родительский метод setEventListeners. Метод setEventListeners класса PopupWithForm должен не только добавлять обработчик клика иконке закрытия, но и добавлять обработчик сабмита формы.
- Перезаписывает родительский метод close, так как при закрытии попапа форма должна ещё и сбрасываться.
- Принимает в конструктор объект с селекторами двух элементов: элемента имени пользователя и элемента информации о себе.
- Содержит публичный метод getUserInfo, который возвращает объект с данными пользователя. Этот метод пригодится когда данные пользователя нужно будет подставить в форму при открытии.
- Содержит публичный метод setUserInfo, который принимает новые данные пользователя и добавляет их на страницу.
- Свяжите класс Card c попапом. Сделайте так, чтобы Card принимал в конструктор функцию handleCardClick. Эта функция должна открывать попап с картинкой при клике на карточку.
- Установка webpack, webpack-cli и webpack-dev-server.
- Настройка двух сборок: build и dev. Создание соответствующих скриптов в package.json. Скрипт build должен пересоздавать папку dist с собранным проектом. Скрипт dev запускать проект на локальном сервере.
- Настройка минификации и транспиляцию JS бабелем. Из index.html уберать теги script с подключением скриптов. Вебпак должен собирать весь JavaScript в один файл и автоматически добавлять в HTML тег script со ссылкой на него.
- Настройка обработки CSS: в HTML больше не должно быть тега link со ссылкой на CSS-файл. За обработку и подключение CSS должен отвечать Webpack.
- Настройка минификации CSS и автоматическое добавление вендорных префиксов.
- Настройка обработки изображений и шрифтов.
- Настройка обработки HTML: если в HTML есть ссылки на локальные картинки, при сборке всё должно работать.
- Принимает в конструктор её данные и селектор её template-элемента.
- Содержит приватные методы, которые работают с разметкой, устанавливают слушателей событий.
- Содержит приватные методы для каждого обработчика.
- Содержит один публичный метод, который возвращает полностью работоспособный и наполненный данными элемент карточки.
- Принимает в конструктор объект настроек с селекторами и классами формы.
- Принимает вторым параметром элемент той формы, которая валидируется.
- Имеет приватные методы, которые обрабатывают форму: проверяют валидность поля, изменяют состояние кнопки сабмита, устанавливают все обработчики.
- Имеет один публичный метод enableValidation, который включает валидацию формы.