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



Книга Создание приложения для отслеживания фильмов с помощью 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.



46   0  

Comments

    Ничего не найдено.