Проект: Место

Ссылка на Gihub Pages

Описание

Проект выполнен в качестве проверочного задания в рамках учебной программы ЯндексПрактикум «Веб-разработчик», курсы 3 и 4 (спринты 4 и 5).

В проектной работе создан одностраничный сайт с возможностью редактирования профиля, добавления и удаления своих фотографий, добавления и удаления лайков всем фотографиям (в том числе и добавленными другими пользователями).

Сайт создан с использованием изученных технологий: flexbox и grid-верстки, анимации элементов, базового JavaScript, а также построения структуры классов и файлов по методологии БЭМ.

Макет

• Макет сайта в Figma
• Макет Popup в Figma (ПР.9)

История изменений

Курс 3

• Проектная работа 4. "Mesto: базовая функциональность"

  Адаптивная верстка страницы и popup редактирования профиля пользователя. С помощью JavaScript реализовано открытие и закрытие popup, загрузка в него данных пользователя со страницы и обновление данных на странице при сохранении формы.

• Проектная работа #5. "Mesto: карточки и попапы"

  Отрисовка на странице данных карточек (пока только загруженных из массива). Popup добавления карточек и просмотра картинок. Реализована возможность лайкать карточки. Удаление карточек.

• Проектная работа #6. "Mesto: валидация форм и попапы"

  Разработана валидация всех форм, улучшен UX при работе с popup (закрытие popup нажатием на Esc и кликом на оверлей).

Курс 4

• Проектная работа #7. "Mesto: ООП и разбиение на модули"

  Рефакторинг. Создание классов Card (формирование и обработка событий карточек) и FormValidator (валидация форм).

• Проектная работа #8. "Mesto: рефакторинг и сборка Вебпаком"

  Рефакторинг. Создание классов:

  • Section - отвечает за отрисовку элементов на странице.
  • Popup - отвечает за открытие и закрытие попапа.
  • PopupWithImage - наследует от Popup. Выводит в popup картинку и подпись к ней.
  • PopupWithForm - наследует от Popup. Выводит в popup формы и обрабатывает события форм.
  • UserInfo - управление отображением информации о пользователе на странице.

  Преобразование класса Card для отображения картинок в popup. Настройка сборки Вебпаком.

• Проектная работа #9. "Mesto: подключение к серверу"

  Настройка работы с API:

  • Загрузка информации о пользователе с сервера.
  • Загрузка карточек с сервера.
  • Редактирование профиля и обновление аватара пользователя с сохранением данных на сервере.
  • Добавление и удаление карточек.
  • Попап подтверждения удаления карточки (PopupWithConfirm).
  • Постановка и снятие лайка, отображение количества лайков карточек.

Доработка проекта

В рамках учебной программы, этот сайт будет несколько раз дорабатываться и переписываться, но уже в других репозиториях.

Разворачиваем проект локально

1. Склонируйте проект, перейдите в папку /mesto

   git clone git@github.com:MaxRMNK/mesto.git
   cd mesto

2. Убедитесь, что у вас устновлен Node.js с библиотекой пакетов NPM

   node -v # проверка версии Node.js
   npm -v # проверка версии NPM

3. Установите проект и его зависимости

   npm install

Команды

• Режим разработки. Проект запускается на локальном сервере: Автоматически открывается браузер с версией для разработчика на адресе localhost:8080.

  npm run dev

  Ctrl + C - выход из режима разработки.
• Сборка проекта. После выполнения команды пересоздается директория /dist с файлами проекта - index.html, main.[hash].js, main.css, а также изображениями и шрифтами.

  npm run build

• Публикация проекта на GitHub Pages. Перед публикацией сайта на GitHub автоматически запускается пересборка проекта.

  npm run deploy