- Описание
- Технологии
- Ссылка на GitHub Pages
- Change log
- Список плагинов Webpack
Описание
Учебный проект Яндекс.Практикум, проектные работы 4-8, сайт "Место": интерактивая страница, куда можно добавлять фотографии, удалять их и ставить лайки. Дизайн-макет для работы ссылка на макет в Figma
Технологии
Проект сделан по BEM Nest, адаптивная верстка CSS под мобильные устройства различных разрешений (320-1440px). На Java Script реализована логика создания экземпляров классов, связывания их вместе и запуска веб-страницы с созданными элементами.
Из технологий можно отметить использование классов, модулей, полей для ввода текста, поп-апов с формами с кастомной валидацией форм, на кнопки и прочие действия настроены слушатели событий для обработки действий пользователей.
После импорта из вспомогательных файлов, создаются экземпляры классов для каждого элемента на веб-странице: секция с карточками, поп-апы и информация о пользователе а так же экземпляр класса для валидации форм.
Кроме того, используются ф-ции для обработки и отображения введенных данных пользователем в поля форм.
Ссылка на GitHub Pages
Проект доступен по ссылке: Место
Change log
- 05.03.23 - Выполнена проектная работа 5, добавлен функционал добавления и удаления фото, предпросмотра фотографии
- 29.03.23 - Выполнена проектная работа 6, валидация форм
- 10.04.23 - Проектная 7, переход на классы и методы, использование модульной структуры JS
- 30.04.23 - Проектная работа 8: продолжение работ над переводом JS на ООП, большая часть функционала вынесена в классы, функционал JS разделен на отдельные файлы модули. Сделана настройка и сборка проекта webpack
- 08.05.23 - Проектная работа 9: добавлены новые елементы (редактирование аватара, счетчик лайков, попапы редактирования аватара и удаления элемента)
- 14.05.23 - Реализовано подключение API к серверу с данными, JSON запросы на основе которых отображаются данные на странице
Плагины webpack
-
webpack
-
webpack-cli
-
webpack-dev-server
-
@babel/core
-
@babel/preset-env
-
babel-loader
-
html-webpack-plugin
-
clean-webpack-plugin
-
css-loader
-
mini-css-extract-plugin
-
postcss-loader
-
autoprefixer
-
cssnano
-
gh-pages
-
core-js