Нам, студентам курса по программированию, было задано создать веб-страницу с использованием изученных концепций (HTML, CSS, JavaScript, Vue и др.).

Задачи/цели

Преподаватель поставил перед нами несколько задач:

  1. Использовать JavaScript или Vue для разработки веб-страницы, которая не должна быть статичной.
  1. Реализовать навыки, полученные в модуле «Концентрации» (я выбрал концепцию «Отзывчивый веб-дизайн»).
  1. Развить приобретенные навыки, используя онлайн-ресурсы, такие как Mozilla Developer, Stack Overflow и т. д.

Я решил использовать API TMDb Movie для создания Random Movie Generator (Генератор случайных фильмов — инструмент, помогающий рандомно выбрать фильм по определенным критериям, например по году выпуска, жанру или рейтингу). У меня было несколько личных приоритетов/показателей успеха для реализации этого проекта:

  1. Элементы пользовательского ввода.
  1. Анимация вращения (для имитации колеса рулетки).
  1. Ссылки на трейлеры отдельных фильмов.
  1. Готовность сделать раздел рейтинга фильмов более динамичным.

Решение

Вот как выглядит страница при первой загрузке (см. ниже). Поскольку я сосредоточился на отзывчивом веб-дизайне (и учитывая мое увлечение стилизацией), общий эстетический вид этой страницы был для меня очень важен. Я выровнял по центру поле для рулетки и весь контент внутри него, используя Flexbox, максимальные размеры ширины, отступы и т. д.

Первоначальный вид

Проблема

Одна из проблем, с которой я столкнулся при разработке первоначального вида, — небольшой div-блок Movie Card (карточка фильма), который появляется при первой загрузке страницы.

Решение 

Нужно было сделать так, чтобы div-блок Movie Card не появлялся при первом посещении страницы. Я добавил к Movie Card атрибуты «transition» (переход), «opacity» (непрозрачность) и «position» (положение), чтобы изначально скрыть поле от глаз. Затем создал для Movie Card класс «visible» (видимый), вызываемый в Javascript, чтобы этот невидимый блок стал видимым после клика.

Выбор жанра

Для выбора жанра фильма я последовательно настроил:

  • выпадающее меню (drop-down menu), чтобы пользователь мог выбрать жанр фильма для просмотра;
  • функцию fetchMovies, чтобы получать список фильмов из TMDb на основе жанра, выбранного пользователем в выпадающем меню (select id=’genre’) (TMDB — The Movie Database — популярная база данных фильмов и сериалов);
  • функцию spinRoulette для определения того, что будет отображаться в movieCard при нажатии «Spin» (кнопки кольцевого списка).

Вращающаяся анимация

Поначалу было непросто разобраться с анимацией вращения. Я воспользовался базовым кодом из упражнения, которое мы выполняли, когда только начинали изучать JavaScript. Для имитации эффекта колеса рулетки добавил анимацию вращения,  используя «rotation += 1080», чтобы при каждом нажатии кнопки «Spin» карточка фильма совершала три полных оборота. Затем применил значение «rotation» (вращение) к стилю «rotate».

Movie Card

Это была основная часть моей работы с API. Мне нужно было получить данные для следующих разделов:

  1. Movie Poster (постер фильма).
  1. Movie Title (название фильма).
  1. Rating (IMDb) (рейтинг). (IMDb — всемирная база данных кинематографии, куда входят описания, рецензии и рейтинги самых популярных картин мира).
  1. Trailer Link (ссылка на трейлер).
  1. Summary (резюме).

После того, как жанр будет выбран, сайт должен рандомизировать результаты по этому жанру. Для этого я создал случайный индекс с помощью Math.random и использовал «constant», чтобы сделать этот случайный индекс многократно используемым значением:

После этого мне пришлось продумать, как будет отображаться карточка фильма при каждом вызове функции spinRoulette.

Ссылка на трейлер

Это была одна из самых сложных частей проекта, потому что API атрибутирует ключи трейлеров как значения, а не как URL. Поэтому мне понадобилось настроить в API функцию для получения трейлера к фильму на основе идентификатора фильма.

Эта функция получает трейлер для случайного фильма по его уникальному идентификатору. Я также применил здесь константы, чтобы сохранить последовательные и многократно используемые значения для Link и Key. Кроме того, функция возвращает «null», если трейлер не доступен.

Рейтинг

Вдохновившись своим предыдущим проектом, я решил настроить раздел «Рейтинг» так, чтобы он менял цвет в зависимости от числа. Сделал так, чтобы рейтинг становился красным, если он ниже 7 (из 10), и зеленым — если выше.

Фактический код для этого был довольно прост. Я создал в CSS новый класс для раздела «Рейтинг» и применил его к общей структуре movieCard в JavaScript.

Результаты

Я вполне доволен своим сайтом кинорулетки. Мои навыки в JavaScript и стилистике значительно продвинулись. В процессе работы я освоил несколько новых концепций, которые наверняка помогут мне в будущих начинаниях в области веб-разработки.

Этот проект усилил мое увлечение веб-дизайном. При всем желании изучать JavaScript (который мне пригодится в будущем), я обожаю стилистику и дизайн.

Одним из показателей своего успеха считаю то, что сайт кинорулетки был использован в режиме реального времени людьми, которых я лично знаю. Я отправил ссылку своим коллегам, и все они воспользовались ею в выходные! Они признались, что были восхищены цветовой схемой сайта и его эффективной работой на мобильных устройствах.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Sharayah Rushing: Movie Roulette Website. 12/7/24 | by Sharayah Rushing | Dec, 2024 | Medium

Предыдущая статьяRuby on Rails  —  пишите тесты, как профессионал
Следующая статьяC++: полное руководство по перечислениям