Проект: Mesto

Ссылка GitHub Pages

Mesto-project

Описание

---

• Проект является одностраничным сайтом с Блоком профиля пользователя и блоком галереи изображения. На сайте реализован функционал через JavaScript, добавляющий больше интерактива странице.

Используемые языки

---

• HTML
• CSS
• JavaScript

О проекте

---

HTML CSS

• Страница сайта полностью адаптивна под разрешение экранов с шириной в диапазоне 320...1280px.

• Адаптивность сделана при помощи (media query).

• Файловая структура выполнена по методологии БЭМ, схема организации файлов Nasted.

• Для выравнивания элементов задействован CSS Flexbox и CSS Grid Layout для выравнивания галереи карточек с изображениями.

• В проекте добавлены интерактивные элементы в виде кнопок, инпутов для ввода текста, и всплывающего окна.

• текст в профиле и в карточках при переполнении блока обрезается и к концу строки добавлено многоточие.

JS

• Имена переменных и функций написаны в camelCase

• Реализован функционал редактирования профиля и добавление картинок через модальные окна

• Карточки с картинками можно добавлять и удалять, а также им можно ставить лайки

• Добавлена возможность просмотра изображения в полном размере при нажатии на поле с картинкой в карточках

• Добавлена валидация вводимых данных, теперь при вводе неправильных данных кнопка отправки формы будет не активна до тех пор пока поля не будут исправлены

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

• Взаимодействие с сервером запрос/отправлка/изменение данных выполнены через асинхронные запросы (Promises)

• Js код теперь разделён на модули, функции выполняющие работу с модальными окнами, валидацией, добавление карточек и т.д. разделены по тематике.

• За сборку проекта отвечает бандлер webpack

• Страница при принятии данных от пользователя защищена от XSS-уязвимости

Перенос на ООП

---

• Перенос кода на ООП-парадигму был выполнент с использованием концепции парного программирования

• Работа с контекстом this

• Освоенисе синтаксиса Class

Установка

---

• Содержимое архива распаковать в свободный каталог.

• Выполнить запуск index.html.

Через git

• Клонировать репозиторий:

  git clone [email protected]:MADeit0/mesto-project.git

Будущие изменения

---

• Добавление функционала кнопкам с помощью JavaScript

• Добавление счётчиков лайков

• Добавить валидацию в инпутах

• Оптимизация кода

• добавление формы для изменения картинки профиля

• перевод на ООП

• перенос страницы на React

Авторы

---

Олег Цыпуштанов : MADeit0
Email : [email protected]

Павел Путилин : starikan123
Email : [email protected]