Skip to content

Latest commit

 

History

History
99 lines (83 loc) · 8.53 KB

README.md

File metadata and controls

99 lines (83 loc) · 8.53 KB
Raw

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

Данный проект представляет собой одностраничный сайт.

Макет сайта

Расположен в онлайн-сервисе для разработки интерфесов - графическом редакторе Figma по адресам:

Как использовать

Для начала

Установка

  • Установите необходимые зависимости из package.json

Работа, запуск, деплой проекта

  • Для локального запуска введите команду npm run dev
  • Для сборки проекта введите команду npm run build
  • Для работы с gh-pages установите пакет gh-pages следующей командой npm install gh-pages --save-dev
  • Для деплоя проекта введите команду npm run deploy

Требования

Требования к верстке

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

Требования к разработке на языке JavaScript

  • Должна быть реализована возможность удаления карточек, лайка и увеличения изображения через Popup.
  • Должна быть реализована проверка на валидность полей ввода Popup с помощью встроенного API JavaScript.
  • Должна быть реализована возможность закрытия Popup с помощью нажатия клавиши Escape и клика на фон.
  • Создание карточки, форм Popup и проверка на валидность формы должна быть реализована через Классы с применением основ Объектно-ориентированного программирования.

Требования к сборке проекта

  • Проект должен быть собран с помощью пакета Node package manager (NPM) сборщика проектов Webpack.
  • При сборке проекта должна быть применена транспиляция с помощью NPM-пакета Babel (новый синтаксис JS превращается в старый, решается проблема совместимости).
  • Для того, чтобы Webpack умел работать с HTML документом должен быть установлен плагин HTMLWebpackPlugin c возможностью очищения директории с выходным проектом с помощью плагина CleanWebpackPlugin.
  • Для обработки Webpack файлов с расширением .css должны быть установлены пакеты CssLoader и MiniCSSExtractPlugin.
  • Код должен быть минифицирован (удаление пробелов, комментариев и переносов строк) с помощью пакета PostCssLoader и плагина CssNano.
  • В код должны добавляться префиксы с помощью AutoPrefixer plagin.

Применяемые технологии

Применяемые технологии верстки

  • Флекс-бокс верстка.
  • Грид таблицы.
  • Выразительные семантические теги (section, ul, footer).
  • Позиционирование элементов (относительное, фиксированное, абсолютное, z-index).
  • Относительные пути к файлам.
  • Трансформация с плавностью перехода.
  • Методология наименования классов CSS БЭМ Nested.
  • Относительные размеры блоков.
  • Вычисляемые значения (функция calc).
  • Оптимизация шрифтов (сглаживание, подгонка размера текста, рендеринг).
  • Метатег корректного масштабирования страницы (@media).
  • Подключение локального шрифта Inter через директиву @font-face.

Применяемые технологии программирования на языке JavaScript

  • Выбор элементов в Document Object Model (DOM) дереве (метод querySelector).
  • Функции открытия, закрытия и отправки формы Popup.
  • Функции удаления, лайка и увеличения изображения карточки.
  • Функции проверки на валидность полей ввода Popup.
  • Добавление в DOM-дерево карточек через шаблоны template.
  • Отмена стандартной обработки событий браузера методом события preventDefault().
  • Метод addEventListener для ослеживания событий "submit" для корректной отправки формы и события "mousedown" и "keydown" для закрытия формы.
  • Методы добавления и удаления классов css элементов через свойство classList и методы Add и Remove для отображения и скрытия формы.
  • Основы объектно-ориентированого программирования - классы при создании карточек, форм и проверки валидности полей.

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

  • Сборка проекта осуществляется с NPM пакета Webpack.
  • Настроена транспиляция с помощью NPM-пакета Babel.
  • Для работы с HTML документом установлен плагин HTMLWebpackPlugin и CleanWebpackPlugin.
  • Для работы с файлами с расширением .css должны установлены пакеты CssLoader и MiniCSSExtractPlugin.
  • Код минифицирован с помощью пакета PostCssLoader и плагина CssNano.
  • В код добавляются префиксы с помощью AutoPrefixer plagin.

API

C помощью метода fetch и промисов (Promise).

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

Итог

Сайт получился отзывчивым (резиновым и адаптивным), корректно отображается на устройствах с разрешением от 320px и есть возможность изменять данные сайта с проверкой на валидность. Проект реализован на классах и собирается с помощью сборщика Webpack. Проект взаимодействует с сервером.