インタラクティブな映画コレクション | Web 開発チュートリアル

はじめに

このプロジェクトでは、HTML、CSS、JavaScript（jQuery）を使って、映画のインタラクティブなコレクションを持つ Web アプリケーションを作成する方法を学びます。このアプリケーションでは、ユーザーがお気に入りの映画をマークでき、お気に入りの映画のコレクションが作成されると、成功メッセージが表示されます。

👀 プレビュー

Interactive film collection demo

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクトファイルをセットアップし、エディタでプロジェクトを開く方法
お気に入りアイコンの機能を実装し、ユーザーが中空と実心の状態を切り替えられるようにする方法
コレクションアイコンの機能を実装し、少なくとも 1 つのお気に入りの映画が追加されたときに成功メッセージを表示する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

jQuery を使って DOM を操作する
ユーザーのインタラクションとイベントを処理する
特定の条件に基づいて要素を表示および非表示にする
一定期間後に要素を自動的に非表示にするためにタイマーを使う

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルをセットアップし、エディタでプロジェクトを開きます。

エディタを開くと、次のファイルが表示されるはずです。index.html、style.css、jquery.min.js、およびimagesフォルダ。
WebIDE の右下隅にあるGo Liveボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

unfinished project structure

お気に入りアイコンの機能を実装する

このステップでは、お気に入りアイコンの機能を実装します。

index.htmlファイルで、お気に入りアイコンのコードを探します。

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

index.htmlファイルの下部の<script>セクションに、次の JavaScript コードを追加します。

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();
});

このコードは、ユーザーがお気に入りアイコンをクリックしたときに、お気に入りアイコンを中空と実心の状態で切り替えます。お気に入りアイコンがクリックされると、お気に入りアイコンが実心の場合にのみ成功ボックス（class=toast__container）要素が表示され、2 秒後にボックスが自動的に非表示になり、またはボックスの上の閉じるボタン（class=toast__close）をクリックすることでボックスが非表示になります。