Cделал поиск и рендер фильмов по ключевому слову - всё прошло гладко. Отображение трейлера по айдишнику при клике по кнопке на карточке - было 2 сложных, скорее непонятных момента, по началу всё никак не получалось подключиться к кнопке, которая была с hbs и потом поиск по айдишнику, помог совет сразу писать id в api).
В проекте используется функция запроса на API и функция рендера страницы с полученных данных. При переключении страниц происходит запрос на API и строится страничка. Также при переключении страниц в пагинации происходит скролл к началу страницы для удобства пользования. Начиная с 4-й страницы отображается расширенная пагинация, которая позволяет пользователю перейти на первую страницу, на текущую +50, а также на последнюю. Начиная с 60-й страницы пользователю предлогается перейти на страницу текущая -50. Так же на каждой странице есть возможность перейти на 1-ю и последнюю страницу. Пользователю так же интерфейс предлогает менять страницы по одной вперед и назад с помощью стрелочек.
Занимался разметкой и стилизацией шапки, в работе использовал HTML, SASS.
Для удобства пользователя на странице сайта была добавлена стрелка для возврата на начало страницы. Кнопка появляется при скроле вниз по странице, при нажатии на которую происходит автоматический скролл на начало страницы. При разработке кнопки использовал HTML, SASS, JS. Button QUEQUE, работал над стилизацией ховера кнопок и логикой работ кнопок.
Делал верстку и открытие закрытие модального окна по нажатию на карточку фильма. Самое сложное было связать js с hbs шаблонизатором.
Добавил стили, сделал шаблон используя библиотеку hendlebars. Сделал функцию отображения карточки фильма, которая принимает два параметра: это масив объектов фильмов взятых с API service и второй параметр масив объектов с жанрами, функция возвращает уже готовый экземпляр фильма, который передаётся в функцию отрисовки карточки.
При клике на кнопку «My Library» открывается страничка фильмов, сохранённых в local-storage. Фильмы отсортированы методом sort в алфавитном порядке и маркированы закладками разного цвета, в зависимости от их категории (ключа, под которым они хранятся) просмотренные, или поставленные в очередь на просмотр. В хедере форма поиска заменяется кнопками, по клике на которые отображают фильмы по данным категориям. Шаблон кнопок реализован с помощью библиотеки Handlebars. При повторном клике на кнопку отображается все сохранённые фильмы. Реализована очистка библиотеки по категориям. При клике на кнопку очистки, открывается диалоговое окно для подтверждения действия. Кнопки стилизованы css анимащией. Для стилизации диалогового окна была использована библиотека Sweetalert и подобраны цвета соответственно общей стилистике сайта. При пустом хранилище пользователь видит сообщение, анимированное с использование setInterval. При работе были использованы HTML, SASS, JS. Изображения оптимизированы и использованы с учетом ретины.
Сверстала контейнер главной страницы для правильного позиционирования карточек фильмов. Задача была реализована с помощью CSS, был описан класс с набором необходимых стилей, CSS-свойств grid. Данный класс добавляем к тегу div, в котором рендерим fetch запрос, таким образом происходит позиционирование карточек. По клику на кнопки в карточке фильм добавляется в local storage. Эта задача была реализована через JS, с помощью метода локального хранилища setItem сохраняем фильм по id для последующего его получения в библиотеке фильмов. Работа в команде получилась интересной и насыщенной, единственное, что у меня вызывало сложности - это работа нескольких человек в одном файле, когда было необходимо брать данные из чужих функций или же дописывать функционал поверх чужого кода. В целом, все получилось лучше, чем я предполагала.
Фильтр по жанрам & году выпуска фильма, сортировка по рейтингу и популярности + модалка с нашей командой(Rostislav Kulik)
При клике на кнопку Home отображается главная страница - реализована с помощью функции toMainPage() которая делает запрос на сервер и возвращает массив объектов с описанием фильмов. При клике на кнопку Home обработчиком события вызывается функция onHandleClick() в которой уже и происходит вызов основной функции.
При нажатии на логотип отображается главная страница - реализация аналогична предыдущей, так же вызывается функция toMainPage(), отличие в том, что функция onHandleClick()вызывается при клике на логотип.
Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложил на плечи маленького но сильного лоадера. Использовал лоадер в виде прогресс-бара,тонкая цветная полоска в самом верху страницы, прямо под панелью браузера. Реализовал лоадер через установку плагина Nprogress. Перед запросом вызывается функция start(), после выполнения запроса вызывается функция done(). Анимация модалки реализована с помощью правила @keyframes. Переход осуществляется через три кадра. Обьеденил анимацию свойст opacity,transform и трансформацию елемента с помощью translate, skew и skale.