- Создать адаптивную страницу под устройства с разрешением экрана от 320px до 1280px.
- Страница должна соответствовать макету дизайнера.
- Взаимодействие с редактором Figma.
- Уложиться в сроки, поставленные заказчиком.
- С помощью JavaScript настроить логику открывания поп-ап окна с возможностью редактирования профиля.
- Соблюсти все пункты технического задания.
- Структурировать файлы согласно БЭМ-методологии.
Проектная работа 6
- Подключение для всех полей ввода в формах лайв-валидации черезх JS;
- Кнопка отправки формы неактивна, если хотя бы одно из полей не проходит валидацию;
- Модальное окно закрывается по в клику любом месте вне этого окна и по нажатию на Esc
- Создать загрузку карточек из массива на страницу при её открытии.
- Добавить логику добавления карточки из диалогового окна, их удаления со страницы, нажатия кнопки Нравится.
- Применить плавное открытие и закрытие диалоговых окон.
Проектная работа 7
- Рефакторинг кода согласно принципам ООП;
- Создание двух классов для карточки и для валидации полей;
Применяемые технологии
- Основной блок страницы помещен в flex-контейнер. Блоки Profile и Images выполнены с помощью grid, что позволяет легко адаптировать элементы в случае изменения масштаба страницы.
- Открытие/закртыие попап-окна настроено с помощью перекючателя классов toggle. Информация из профиля в попап-окно прогружается с помощью добавления в элементы формы значения Value, а сохраняются данные путем свойства textContent.