インタラクティブな映画コレクション Web アプリ

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

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

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

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

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

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

2. 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）をクリックすることでボックスが非表示になります。

3. index.htmlファイルを保存します。
4. ブラウザを更新して、完成した結果を確認します。

この効果は次のようになります。

おめでとうございます！「映画のコレクション」プロジェクトを正常に完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習することができます。