Создание приложения для отслеживания фильмов с помощью HTML, CSS и JavaScript

После успешного завершения курса программной инженерии я вновь обратился к основам JavaScript. В процессе пересмотра возможностей этого языка заново открыл для себя MovieVerse  —  веб-приложение, созданное мной вместе с однокурсником.

MovieVerse  —  это удобная платформа, позволяющая пользователям без труда изучать обширную коллекцию постеров к фильмам. Функция быстрого просмотра информации о фильме помогает пользователям решить, стоит ли добавлять его в свой список просмотра.

Создание этого проекта позволило мне продемонстрировать свои знания JavaScript. В сегодняшней статье, возвращаясь к процессу реализации MovieVerse, я покажу, как использовал HTML, CSS и JavaScript.

Общий обзор

MovieVerse  —  это одностраничное приложение, состоящее из трех основных разделов:

• Панель списка просмотра для добавления и удаления фильмов.
• Галерея постеров к фильмам.
• Карточка фильма, отображающая подробную информацию о выбранном фильме.

Когда пользователь нажимает на постер, на экране появляется карточка фильма, содержащая такую информацию, как название, дата выхода, описание и продолжительность. Кроме того, пользователь может отметить фильм как “просмотренный” (“watched”) или “понравившийся” (“liked”).

HTML для создания базовой структуры

HTML обеспечивает общую структуру и контейнеры для контента приложения. В файле index.html определены три ключевых раздела:

<section class="watchlist-container"></section>
<section class="movie-posters"></section>
<section class="movie-card"></section>

Каждый раздел использует семантические элементы HTML5 и располагается в макете сетки с помощью CSS Grid.

CSS для стилизации

В файле index.css применяются стили для создания визуальных эффектов:

• Градиенты фона и эффекты свечения стратегически использовались для привлечения внимания пользователя.
• Применение модулей Flexbox и Grid для макета сыграло решающую роль в эффективной организации контента.
• Для обеспечения комфортного просмотра страницы задействовались пользовательские свойства цветов и интервалов.

Кроме того, для повышения интерактивности были использованы переходы и эффекты наведения курсора, что позволило сделать работу с приложением более интересной и динамичной:

.title {
  /* Эффект свечения текста */
  text-shadow: 0 0 10px #fff, 0 0 20px rgba(131, 58, 180, 1);
}
.movie-posters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.watchbutton {
  transition: ease-in-out 0.3s;
}
.btn-two::after {
  transition: all 0.5s;
}

Это способствует созданию привлекательного и отзывчивого пользовательского интерфейса без излишнего JavaScript-кода.

Написание кода на JavaScript для разработки функциональности

Суть приложения заключается в обработке интерактивности и логики данных. Для реагирования на различные действия пользователя, такие как клики, наведение курсора и двойные клики, были стратегически грамотно реализованы слушатели событий.

Чтобы обеспечить четкое разграничение при удалении элемента из списка просмотра, я выбрал событие двойного клика, обеспечивающее осознанное действие. Такой осознанный выбор повышает удобство работы пользователя и предотвращает случайное удаление.

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

poster.addEventListener('click', () => {
  // Показать карточку фильма
});

title.addEventListener('dblclick', () => {
  // Удалить из списка просмотра
});

Получаем данные с локального JSON-сервера и используем полученные данные для наполнения страницы соответствующей информацией.

fetch('/api/movies')
  .then(res => res.json())
  .then(movies => {
    
      movies.forEach(movie => {
      
        // Создание постера 
        const poster = document.createElement('img');
        poster.src = movie.poster;
        // Добавление в галерею
        gallery.appendChild(poster);
      });
    });

Используя манипуляции с DOM, динамически обновляем элементы пользовательского интерфейса полученными данными.

function createMovieCard(film) {

  movieCard.innerHTML = '';

  title.textContent = film.title;
  
  movieCard.append(title, description, buttons);
}

Обновление данных облегчается с помощью запросов PATCH. Эти запросы используются для изменения статуса фильма, переключая булево выражение для отражения таких атрибутов, как “просмотренный” (“watched”) и “понравившийся” (“liked”).

// Добавить фильм
fetch('/api/watchlist', {
  method: 'POST',
  body: {movieId: id}
});

// Удалить фильм
fetch(`/api/watchlist/${id}`, {
  method: 'DELETE'
});

Результат: работающее приложение для просмотра фильмов

Используя HTML, CSS и JavaScript, мне удалось создать интерактивное приложение для просмотра фильмов, обладающее следующими основными функциональными возможностями:

• Динамическое получение и отображение данных о фильмах.
• Обновление пользовательского интерфейса в реальном времени на основе взаимодействия с пользователем.
• Гладкое управление персистентными данными списка просмотра.

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

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

Полный код проекта доступен на GitHub.

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

• 9 проектов, которые помогут стать фронтенд-мастером в 2023 году
• Веб-скрейпинг с нуля на Python: библиотека Beautiful Soup
• Создаем YouTube видео из кода

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

---

Перевод статьи Evan D’Almeida: Building a Movie Tracking App using HTML, CSS, and JavaScript