상호작용 영화 컬렉션 | 웹 개발 튜토리얼

소개

이 프로젝트에서는 HTML, CSS, 그리고 JavaScript (jQuery) 를 사용하여 영화의 상호 작용 컬렉션 웹 애플리케이션을 만드는 방법을 배우게 됩니다. 이 애플리케이션을 통해 사용자는 좋아하는 영화를 표시할 수 있으며, 좋아하는 영화 컬렉션이 생성되면 성공 메시지가 표시됩니다.

👀 미리보기

Interactive film collection demo

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

프로젝트 파일을 설정하고 편집기에서 프로젝트를 여는 방법
사용자가 빈 상태와 채워진 상태를 전환할 수 있도록 즐겨찾기 아이콘의 기능을 구현하는 방법
최소한 하나의 즐겨찾기 영화가 추가되었을 때 성공 메시지를 표시하는 컬렉션 아이콘의 기능을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

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) 을 클릭하여 숨겨집니다.