Этот сервис называется Mesto. Он представляет собой интерактивную страницу, где пользователи могут добавлять/удалять свои фотографии удивительных мест России. Здесь каждый может поделиться своими лучшими моментами и увидеть интересные работы других людей (понравившуюся карточку можно лайкнуть и видеть, скольким пользователям это изображение тоже приглянулось).
В данном проекте используются такие технологии:
- HTML (HyperText Markup Language) используется для создания структуры документа и контента на веб-странице (расположения логотипа, блока с профилем и блока с карточками пользователей).
- CSS (Cascading Style Sheets) применяется для управления внешним видом и стилем элементов HTML, включая шрифты, цвета, отступы, размеры и другие визуальные аспекты. Благодаря этой технологии страница принимает приятный вид.
- JS (JavaScript) позволяет добавить интерактивность и динамику к веб-сайтам, обрабатывая события, такие как клик мыши или изменение данных формы, и выполняет различные функции на стороне клиента без необходимости перезагрузки страницы.
- Webpack используется для облегчения процесса сборки, оптимизации и модульной организации JavaScript-кода. Основные задачи, которые помог решить Webpack:
- Модульность: Webpack позволил разбить код на отдельные модули, что делает проект легче для поддержики и масштабирования.
- Компиляция и оптимизация: Он компилирует и минифицирует код, что уменьшило размер файлов и ускорило загрузку страницы.
- Управление зависимостями: Поддержки библиотек через системы менеджеров пакетов, таких как npm или yarn. Webpack позволил создать эффективный и масштабируемый сервис.
- Babel используется для транспиляции современного синтаксиса JavaScript в совместимый с большинством браузеров формат.
- Поддержка новых возможностей JavaScript: Позволило использовать последние версии языка, такие как ES6, ES7 и далее, не переживая, что не все браузеры ещё полностью поддерживают эти спецификации.
- Преобразование синтаксиса: Преобразование современных конструкций, такие как arrow functions, в старый синтаксис, который понимают все браузеры.
- Минимизация кода: Помогает минимизировать размер транспилированного кода.
С помощью данной веб-страницы, можно загружать свои карточки. Для этого достаточно нажать на кнопку + и в открывшемся окне ввести название и ссылку на изображение для карточки.
Свои карточки можно удалить. Для этого добавлена иконка удаления (корзинка), при клике по ней выбранная карточка удаляется со страницы.
Они открываются по нажатию кнопок «Редактировать» и «+» и при нажатии на картинку, а закрываются — при клике по крестику в правом верхнем углу,кликом на оверлей и нажатием на Esc.
При открытии формы поля «Имя» и «О себе» заполнены теми значениями, которые отображаются на странице, но их можно изменить, введя свои значения в поля ввода. После изменений и нажатия кнопки «Сохранить» информация на странице обновится, а попап автоматически закроется. ! Если поля формы (не только редактирования информации о себе, но и других форм) будут заполнены неправильно, то сохранить такую информацию не получится и под полем, где были введены невалидные данные, появится красный текст ошибки.
Чтобы сменить аватар, необходимо навести указатель мыши на аватар, на котором появится иконка редактирования. После клика по ней — открывается форма. В ней одно поле — ссылка на новый аватар.
Карточки других пользователей можно лайкать.Если лайкнуть карточку, сердечко поменяет цвет.
Нажав на картинку, она откроется в отдельном окошке, чтобы её было можно посмотреть поближе. Посмотреть сервис