Взаимодействующее веб-приложение для коллекции фильмов

Введение

В этом проекте вы научитесь создавать веб-приложение с интерактивной коллекцией фильмов с использованием HTML, CSS и JavaScript (jQuery). Приложение позволяет пользователям помечать свои любимые фильмы, и при создании коллекции любимых фильмов отображается сообщение об успехе.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать файлы проекта и открывать проект в редакторе;
• реализовывать функциональность для иконки любимого фильма, позволяющую пользователям переключаться между полосатой и实心ной состояниями;
• реализовывать функциональность для иконки коллекции, отображающую сообщение об успехе, когда добавляется хотя бы один любимый фильм.

🏆 Достижения

После завершения этого проекта вы сможете:

• манипулировать DOM с использованием jQuery;
• обрабатывать взаимодействия и события пользователя;
• отображать и скрывать элементы в зависимости от конкретных условий;
• использовать таймеры для автоматического скрытия элементов через определенный период времени.

Настройка структуры проекта

В этом шаге вы настроите файлы проекта и откроете проект в редакторе.

1. Откройте редактор, и вы должны увидеть следующие файлы: index.html, style.css, jquery.min.js и папку images.
2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
3. Откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализовать функциональность иконки избранного

В этом шаге вы реализуете функциональность для иконки любимого фильма.

1. В файле index.html найдите код для иконки любимого фильма:

<div class="card-body-option card-body-option-favorite">
  <img src="./images/hollow.svg" alt="" />
</div>

2. Добавьте следующий JavaScript-код в раздел <script> внизу файла index.html:

window.timer = null;
let flag = false;
$(".card-body-option-favorite").click(function () {
  flag = !flag;
  if (flag) {
    $(this).find("img").attr("src", "./images/solid.svg");
    $("#toast__container").show();
    timer = setTimeout(() => {
      $("#toast__container").fadeOut();
    }, 2000);
  } else {
    $(this).find("img").attr("src", "./images/hollow.svg");
  }
});

$(".toast__close img").click(function () {
  $("#toast__container").fadeOut();
});

Этот код будет переключать иконку любимого фильма между полосатым и实心ным состояниями при нажатии пользователем на иконку любимого фильма. Когда на иконку любимого фильма нажимается, элемент success box (class=toast__container) отображается только в том случае, если иконка любимого фильма实心ная, через 2 секунды бокс автоматически скрывается, или бокс скрывается при нажатии на кнопку закрытия выше бокса (class=toast__close).

3. Сохраните файл index.html.
4. Обновите браузер, чтобы увидеть итоговый результат.

Эффект выглядит так:

Поздравляем! Вы успешно завершили проект "Коллекция фильмов".

Резюме

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