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

Учебный проект сайта для изучения HTML, CSS, JavaScript:

Первый этап - вёрстка и стили CSS

Для реализации адаптивности использованы медиазапросы. Применены технологии флексбокс, БЭМ с файловой структурой nested, CSS calc. Реализован модальный диалог с формой редактирования профиля.

Второй этап - добавление интерактива на сайт на JavaScript

Реализовано открытие и закрытие модальных окон (в том числе отредактированы стили CSS для плавного перехода) по клику на соответствующие кнопки методом addEventListener. Добавлены функции редактирования профиля и добавления новых карточек. Первые шесть карточек загружаются с помощью Javascript из предустановленного массива и были удалены из вёрстки. Новая карточка создаётся путём клонирования шаблона и добавляется в начало коллекции. Обработка по умолчанию события submit отключена с помощью метода evt.preventDefault(). Фотографии увеличиваются в размере при клике на них. Добавлена возможность лайкать и удалять карточки.

Третий этап - добавление валидации форм, сборка проекта Webpack

Реализована валидация форм с помощью регулярных выражений для текстовых полей и встроенной браузерной валидации для url-поля. Добавлена возможность закрывать модальные окна с помощью клавиши Esc и кликом на оверлей. Изменена навигация по проекту - js код поделён на модули, сборку кода выполняет Webpack. Настроена минификация и транспиляция JS бабелем и минификация CSS с автоматическим добавлением вендорных префиксов postcss.

Четвертый этап - парное программирование и ООП

На этом этапе мы изучили технику парного программирования. Этап выполнен совместно с Aria1ink.

В рамках портирования проекта были созданы ES6-классы: Api.js, Сard.js , FormValidator.js, Section.js , Popup.js , PopupWithForm.js , PopupWithImage.js , UserInfo.js . Каждый класс выполняет строго одну задачу и для описания взаимодействия между классами используется слабое связываение.

Описание классов:

• В классе Apiописаны запросы к серверу.
• Класс Card создает карточку с изображением.
• Класс FormValidator настраивает валидацию полей формы: проверяет валидность поля, изменяет состояние кнопки submit, устанавливает обработчики.
• Класс Section отвечает за отрисовку карточек на странице.
• Класс Popup отвечает за открытие и закрытие попапа, по клику на иконку закрытия, оверлею, а также по клавише Esc.
• Классы PopupWithForm и PopupWithImage наследуются от класса Popup. PopupWithForm собирает данные всех полей формы и добавляет обработчик submit формы. PopupWithImage вставляет в попап изображение с подписью.
• Класс UserInfo отвечает за управление информацией о пользователе на странице.

Полезные ссылки

1. Мой проект на Github Pages;
2. Ссылка на макет в Figma для первого этапа;
3. Ссылка на макет в Figma для второго этапа;
4. Ссылка на макет в Figma для третьего этапа;
5. Чеклист второго этапа;
6. Техзадание первого этапа;
7. Техзадание второго этапа;
8. Техзадание третьего этапа;
9. Техзадание четвертого этапа.