Проект: "Mesto"

Обзор

• Интро
• Методы
• Инструменты

Интро

Это студенческий проект Яндек.Практикума курса "Web-разработчик плюс" "Меsto". На текущем этапе в проекте реализовано взаимодействие с сервером.

Методы

Сайт выполнен по макету в Figma.

• [Ссылка на макет в Figma](https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1, https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1, https://code.s3.yandex.net/web-developer/project-6/JavaScript.Sprint-6.fig и https://www.figma.com/file/PSdQFRHoxXJFs2FH8IXViF/JavaScript-9-sprint?node-id=0%3A1)

Таблицы стилей .css распределены в файловой структуре каталога blocks согласно методологии БЭМ Nested. Шрифты с открытым доступом Inter расположены в Vendor. Проект прошёл валидацию. В вёрстке страницы использованы методы flex и grid.

New!

Функционал реализован с помощью JavaScript:

• От соответствующего клика крываются три модальных окна (редактирования профиля, добавления новой карточки, увеличенного изображения места)
• При загрузке размещаются 6 предустановленных карточек с местами
• На каждой карточке работает кнопка liked и удаления
• Все попапы закрываются от клика на кнопку Х
• Реализованы переходы для плавных изменений состояний интерактивных элементов

New! New!

• Код разделен на разные модули: validate.js, card.js, modal.js, utils.js с инициализацией в index.js
• Улудшен UX при работе с попапами (модальные окна закрываются кликом по оверлею или клавишей 'Escape')
• Добавлена валидация всех форм
• Создано инфраструктурное окружение с помощью Webpack
• Настроена минификация и транспиляция JS-бабелем
• Произведен рефакторинг в файлах html, css, js в связи с включением модульности и сборки Webpack

New! New! New!

Методами запросов к серверу GET, PATCH, POST, DELETE, PUT реализована дополнительная функциональность:

• Загрузка карточек с сервера
• Загрузка информации о пользователе с сервера
• Редактирование профиля с загрузкой информации о пользователе на сервер
• Добавление новой карточки на странице с отправкой данных карточки на сервер
• Отображение количества лайков карточки
• Удаление карточки (собственного размещения)
• Постановка и снятие лайка
• Обновление аватара пользователя с новым попапом
• Улучшенный UX форм (кнопка submit меняет состояние в течение получения ответа)
• Предусмотрены возможности обрабатки ошибок запросов
• Попап подтверждения удаления карточки

New! New! New! New!

В командном спринте проект портирован на ООП.

Инструменты

Изображения оптимизированы на ресурсе: https://tinypng.com/. Файл .nojekyll размещен с целью корректной публикации в pages на GitHub. Файл .editorconfig содержит установки VS Code. Используются webpack , webpack-cli и webpack-dev-server. Файлы package.json и webpack.config.js содержат скрипты для настройки среды Webpack. В файле .gitignore прописаны строки: node_modules и dist для push на GitHub. Использован инструментарий вкладки браузера Network для просмотра запросов и дебагинга.

• [Ссылка на "Mesto" в GitHub Pages] (https://vasaykh2.github.io/mesto-project/)