Skip to content

Verakhab/mesto

Repository files navigation

Mesto

Github: https://github.com/Verakhab/mesto

gh-pages: https://verakhab.github.io/mesto/

Адрес в сети: https://mesto.gq

Version: v.3.0.1

Описание Проекта

Сервис Mesto: интерактивная страница, куда можно добавлять фотографии, удалять их и ставить лайки.

Добавил возможность регистрации, входа пользователя в систему.

В этом обновлении:

Логика работы приложения: Фронтенд реализован применяя методологию программирования ООП, состоит из компонентов используемых в проекте, связанных слабым связыванием в главном файле проекта index.js.

При первом входе на сайт он информирует пользователя о необходимости войти или зарегистрироваться в системе для просмотра фотографий, после входа/регистрации отображается блок с фото, информацией о пользовотеле, кнопки возможности добавления новых фотографий, изменения инфо о пользователе введенных при регистрации, изминения аватара, альбом фотографий добавленных всеми зарегистрированными пользователями.
Если не выходить и вернуться на сайт в течении семи дней повторный вход не требуется.
В учебных заданиях было необходимо реализовать возможность добавления всех изображений в виде ссылки на изображение в сети, я изменил это на возможность добавления фото с локального устройства. Работа с файлами осуществляется посредством класса FormData. При верстке использовал теги template для работы с шаблонами карточки фотографии, попапов. При работе с формой каждое поле валидируется на лету, как и форма в целом, пока все поля не заполнены верно кнопка отправки формы на сервер не активируется о чем пользователь информируется ее цветом соответствующим цвету формы стандартным курсором и невозможностью клика по кнопке, после заполнения всех полей формы верно кнопка меняет цвет, курсор при наведении меняет форму со стандартной на форму "руки", кнопка активируется, при отправке любого запроса на сервер на кнопке попапа появляется прелоудер информирующий пользователя о том что контент находятся в процессе загрузки, в случае возникновения ошибки на сервере она отобразиться в этом же попапе под кнопкой, попап не закроется автоматически, в случае неверного ввода информации в поле ввода форм попапов ошибка проинформирует пользователя о необходимости корректного ввода инфо непосредственно под тем полем ввода где она произошла, с информацией верного ввода.

- Подключил проект Mesto к серверу.
- Добавил попапы регистрации, входа, изменения аватара, информации о необходимости войти или зарегистрироваться.
- Настроил POST, PATCH, PUT, DELETE запросы на роуты - регистрации пользователя, входа пользователя в систему, редактирование фотографии пользователя, добавление новой фотографии, удаление фотографии (можно удалить только то фото которую добавили вы), лайк, снятие лайка фотографии.
- Добавил прелоудер при отправке запросов на сервер.
- Добавил всплывающее окно при наведении на фото пользователя информирующее о возможности его изменить.
- Добавил возможность открытия добавленной фотографии.
- Добавил отображение количества поставленных фотографии лайков.
- При наведении на иконку удалить она отображается четче.

Используемые технологии: HTML, CSS, JavaScript, Webpack, Babel, PostCSS, API, AJAX, Promise, BEM, адаптивная, кроссбраузерная вёрстка.

Следующее обновление:

Стилизация полей ввода изображений в попапах, информирование пользователя о допустимых форматах файлов возможных для введения.

Локальный запуск

  1. Склонировать репозиторий
  2. Доставить отсутствющие модули npm
        npm install
    
  3. Запустить локальный сервер
        npm run dev
    

Публикация на GitHub Pages

  1. Сделать форк проекта
  2. Склонировать репозиторий
  3. Доставить отсутствующие модули npm
  4. Собрать проект
        npm run build
    
  5. Запушить собранный проект на GitHub
        npm run deploy
    

About

My project work

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published