/js-project-fffcode

This is a command project using vanilla javascript, html, css.

Primary LanguageJavaScript

Адаптивная фронтенд часть приложения просмотра базы данных описаний кинофильмов и поиска по ключевому слову.

API.

Использован публичный API сервиса The Movie Database (TMDB), возвращающий массив описаний популярных за день кинофильмов. Реализована возможность поиска по ключевому слову

Используемые свойства: poster_path - ссылка на постер фильма. title - название фильма. vote_average/vote_count - данные рейтинга. popularity - популярность. original_title - оригинальное название. overview - краткое описание. id - id в базе данных. genre_ids/genresName - данные жанров фильма. release_date - дата выпуска.

БИБЛИОТЕКИ.

Для запросов на сервер использована библиотека axios.

Для отображения нескольких страниц фильмов использована библиотека tui-pagination.

Для построения карточки фильма в модальном окне использована библиотека handlebars.

Для уведомлений использована библиотека notiflix.

Для скроллинга на странице использован smooth-scroll.

ИНТЕРФЕЙС.

По умолчанию при старте на странице отображаются 20 популярных за день фильмов. Реализована пагинация для переходов между страницами с популярными фильмами

Форма, в которой пользователь будет вводить строку для поиска в текстовое поле, а при сабмите формы необходимо выполняется HTTP-запрос.

При каждом новом поиске выводится уведомление в котором написано сколько всего нашли изображений.

Если ничего подходящего найдено небыло, выводится уведомление о нулевом результате.

The Movie Database (TMDB) поддерживает пагинацию. В каждом ответе приходит 20 объектов. Реализована пагинация как для главной страницы, так и для страниц запроса, библиотеки с просмотренными, библиотеки с поставленными в очередь на просмотр

При небольшом прокручивании вниз появляется стрелка для плавной прокрутки в конец страницы.

При нахождении внизу страница и начале прокручивании вверх появляется кнопка для плавной прокрутки к началу страницы.

Реализована фильтрация по жанрам фильмов.

Присутствует трехпозиционный переключатель темы приложения: темная, светлая, пользовательская (определяет тему браузера/системы и применяет).

При клике на постере фильма открывается модальное окно с более полной информацией о фильме.

Добавление/удаление фильмов в библиотеки (просмотренные и очередь) выполняется в модальном окне при помощи операций с local storage.

В модальном окне есть возможно сть просмотреть трейлер фильма при наличии ссылки на трейлер в базе дынных.

СБОРЩИК ПРОЕКТА

Использован сборщик Parcel