Movie예매 프로그램 - 미리보기, 찜하기

[berryberrybin]

기능(1) 미리보기 기능

• 미리보기를 클릭하면 영화의 예고편 동영상을 오른쪽에서 확인 할 수 있음

$(function () {
   $("[name=vplay]").click(function () {
      $("video").attr({ src: $(this).val(), autoplay: "autoplay" });
   });
});

[berryberrybin]

기능(2) 찜하기 기능

• 찜하기 버튼을 누르면 localStorage에 저장함

  $(function () {
  $("[name=vplay]").click(function () {
    $("[name=cartinsert]").click(function () {
       let key = $(this).attr("id");
       let value = $(this).attr("value");
       localStorage.setItem(key, value);
    });
  });

• 찜하기List를 누르면 화면이 변함 <li class="selected"><a href="cartList.html">찜 LIST</a></li>

• 찜한 상품의 이미지, 상품번호, 이름, 가격을 목록으로 볼 수 있음

• 총 가격을 가장 하단에 계산하여 보여줌

$(function () {
   function refreshPage(){
   // localStorage에 저장된 모든 정보를 가져와서 화면 구성하기
      let str="";
      let totalPrice=0;
         for(i=0; i<localStorage.length;i++){
            let key = localStorage.key(i);
            let value = localStorage.getItem(key);
            let arr=value.split(",");

            str+=`<tr>`;
            str+=`<td><img src='${arr[1]}' class='poster'></td>`;
            str+=`<td>${key}</td>`;
            str+=`<td>${arr[0]}</td>`;
            str+=`<td>${arr[2]}</td>`;
            str+=`<td><button id='${key}' name='deleteItem'>삭제</button></td>`;
            str+=`</tr>`;

            // 가격 계산하기
            totalPrice+=parseInt(arr[2]);
            }

         $("#content").html(str);
         $("#price").html("주문가격 : "+ totalPrice+"원");
         }
});

[berryberrybin]

기능(3) 삭제하기 기능

• 찜한 상품 목록에서 삭제하기 버튼을 누르면 삭제가 됨

$(function () {
   $(document).on("click","[name=deleteItem]",function (){
      if(confirm("정말 삭제하시겠습니까?"))
         refreshPage(); //화면 재갱신
      }
   })
})