Проект разрабатывается студентом курса "Яндекс-Практикум". Место- сайт, где можно делиться фотографиями.
Для работы с проектом вам понадобятся git, NodeJS
- Как установить git.
- Как установить NodeJS.
- Как установить Webpack: инструкция ниже
В командной строке перейдите в папку, где будет развернут проект. После чего скопируйте его с GitHub:
$ git clone https://github.com/bmstustudent/mesto.git
Далее переходим в папку с проектом и устанавливаем компоненты:
$ npm install
После этого нужно собрать проект:
$ npm run build
Далее можно запускать проект на локальном сервере:
$ npm run dev
$ npm run build - для компиляции. Проект собирается локально, продукты сборки сохряняются в указанной директории.
$ npm run dev - для отладки. Помимо сборки, запускает на локальном сервере с автоматической <<горячей>> перезагрузкой при детектировании изменений в исходных кодах.
$ npm run deploy - для релиза. Выкладывает релизную версию в ветку gh-pages указанного репозитория.
npm init - добаляет дефолтный конфигурационный файл package.json
npm i webpack --save-dev - устанавливает пакет webpack в проект, записывает его в зависимости для разработки
npm i webpack-cli --save-dev - устанавливает пакет интерфейса командной строки для webpack'а
npm i webpack-dev-server --save-dev - устанавливает пакет локального сервера
npm i babel-loader --save-dev - устанавливает пакет транспилятора
Дополнительные пакеты для работы с транспилятором:
npm i @babel/cli --save-dev
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev
npm i [email protected] --save
npm install --save babel-polyfill - устанавливает полифилы для транспилятора
npm i mini-css-extract-plugin --save-dev - устанавливает пакет минификатора
npm i css-loader --save-dev - устанавливает пакет CSS-загрузчика
npm i webpack-md5-hash --save-dev - устанавливает пакет подсчёта хеша
npm i postcss-loader --save-dev - устанавливает пакет подключения плагина PostCSS к Webpack'у
npm i autoprefixer --save-dev - установщик вендорных префиксов
npm i cssnano --save-dev - минификатор CSS
npm install gh-pages --save-dev - выкладывает проект на gh-pages
npm install html-webpack-plugin --save-dev - "учит" вебпак работать с HTML
npm install --save-dev cross-env - пакет для использования глобальных переменных
npm install file-loader --save-dev - плагин, позволяющий webpack'у работать с различными файлами
npm install image-webpack-loader --save-dev - загрузчик изображений
npm i style-loader --save-dev - нужен для подтягивания в финальную сборку стилей, добавленных через @import
npm install --save-dev @babel/plugin-proposal-class-properties - преобразует свойства классов
npm i optimize-css-assets-webpack-plugin --save-dev - нужен для дополнительной оптимизации CSS
npm i path --save-dev - предоставляет утилиты для работы с путями к файлам и директориям
- добавлен попап редактирования профиля
- предусмотренно переполнение содержимого в блоке
- реализованно открытие и закрытие попапа
- поля формы заполненны значениями, которые отображаются на странице
- реализованно редактирование имени и информации о себе
- при загрузке на странице есть 6 карточек, которые добавляет JavaScript
- реализованна форма добавления карточки
- возможность ставить лайк карточке
- удаление карточки
- реализованно открытие попапа с картинкой (zoom)
- валидация формы «Редактировать профиль»
- валидация формы «Новое место»
- закрытие попапа кликом на оверлей
- закрытие попапа нажатием на Esc
- принимает в конструктор её данные и селектор её template-элемента;
- содержит приватные методы, которые работают с разметкой, устанавливают слушателей событий;
- содержит приватные методы для каждого обработчика;
- содержит один публичный метод, который возвращает полностью работоспособный и наполненный данными элемент карточки.
- принимает в конструктор объект настроек с селекторами и классами формы;
- принимает вторым параметром элемент той формы, которая валидируется;
- имеет приватные методы, которые обрабатывают форму: проверяют валидность поля, изменяют состояние кнопки сабмита, устанавливают все обработчики;
- имеет один публичный метод enableValidation, который включает валидацию формы.
- классы Card и FormValidator экспортируются из соответствующих файлов, импортируются в index.js и используются в нём
- отдельные js-файлы подключены в index.html как модули
- создание класса Section, который отвечает за отрисовку элементов на странице.
- создание класса Popup, который отвечает за открытие и закрытие попапа.
- создание класса PopupWithImage, который наследует от Popup. Этот класс перезаписывает родительский метод open. В методе open класса PopupWithImage нужно вставлять в попап картинку и атрибут src изображения и подпись к картинке.
- создание класса UserInfo: отвечает за управление отображением информации о пользователе на странице.
- настроена сборка вебпаком
