https://github.com/deemon13/js-project-fffcode

This is a command project using vanilla javascript, html, css.
https://github.com/deemon13/js-project-fffcode

animate-css axios css handlebars html javascript notiflix pagination parcel sass smooth-scrolling spinner

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/deemon13/js-project-fffcode
• Owner: Deemon13
• Created: 2021-12-01T22:34:55.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-12-16T16:35:06.000Z (almost 4 years ago)
• Last Synced: 2025-03-25T10:21:40.457Z (7 months ago)
• Topics: animate-css, axios, css, handlebars, html, javascript, notiflix, pagination, parcel, sass, smooth-scrolling, spinner
• Language: JavaScript
• Homepage: https://deemon13.github.io/js-project-fffcode/
• Size: 8.14 MB
• Stars: 0
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

ключевому слову.

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