Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/margo-yunanova/mesto-project
Mesto - социальная сеть для обмена фотографиями
https://github.com/margo-yunanova/mesto-project
babel css html javascript oop postcss webpack
Last synced: about 2 months ago
JSON representation
Mesto - социальная сеть для обмена фотографиями
- Host: GitHub
- URL: https://github.com/margo-yunanova/mesto-project
- Owner: margo-yunanova
- Created: 2022-08-03T16:58:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T18:03:53.000Z (about 1 year ago)
- Last Synced: 2023-12-15T20:00:19.083Z (about 1 year ago)
- Topics: babel, css, html, javascript, oop, postcss, webpack
- Language: JavaScript
- Homepage: https://margo-yunanova.github.io/mesto-project/
- Size: 2.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проект: Место
Учебный проект сайта для изучения HTML, CSS, JavaScript:
## Первый этап - вёрстка и стили CSS
Для реализации адаптивности использованы медиазапросы.
Применены технологии флексбокс, БЭМ с файловой структурой nested, CSS calc.
Реализован модальный диалог с формой редактирования профиля.
## Второй этап - добавление интерактива на сайт на JavaScript
Реализовано открытие и закрытие модальных окон (в том числе отредактированы стили CSS для плавного перехода) по клику на соответствующие кнопки методом `addEventListener`.
Добавлены функции редактирования профиля и добавления новых карточек.
Первые шесть карточек загружаются с помощью Javascript из предустановленного массива и были удалены из вёрстки.
Новая карточка создаётся путём клонирования шаблона и добавляется в начало коллекции.
Обработка по умолчанию события submit отключена с помощью метода `evt.preventDefault()`.
Фотографии увеличиваются в размере при клике на них.
Добавлена возможность лайкать и удалять карточки.
## Третий этап - добавление валидации форм, сборка проекта Webpack
Реализована валидация форм с помощью регулярных выражений для текстовых полей и встроенной браузерной валидации для url-поля.
Добавлена возможность закрывать модальные окна с помощью клавиши Esc и кликом на оверлей.
Изменена навигация по проекту - js код поделён на модули, сборку кода выполняет Webpack.
Настроена минификация и транспиляция JS бабелем и минификация CSS с автоматическим добавлением вендорных префиксов postcss.
## Четвертый этап - парное программирование и ООП
На этом этапе мы изучили технику парного программирования. Этап выполнен совместно с [Aria1ink](https://github.com/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](https://margo-yunanova.github.io/mesto-project);
1. [Ссылка на макет в Figma для первого этапа](https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=28212%3A155);
1. [Ссылка на макет в Figma для второго этапа](https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5);
1. [Ссылка на макет в Figma для третьего этапа](https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1);
1. [Чеклист второго этапа](https://code.s3.yandex.net/web-developer/checklists-pdf/web-plus/checklist-4.pdf);
1. [Техзадание первого этапа](https://code.s3.yandex.net/web-plus/static/second-month/mesto-project/index.html);
1. [Техзадание второго этапа](https://code.s3.yandex.net/web-plus/static/third-month/mesto-project/index.html);
1. [Техзадание третьего этапа](https://code.s3.yandex.net/web-developer/checklists-pdf/web-plus/checklist-8.pdf);
1. [Техзадание четвертого этапа](https://code.s3.yandex.net/web-developer/checklists-pdf/web-plus/checklist-10.pdf).