[프로젝트2] 영화검색 사이트 업그레이드(3)

수정기능 제작

수정기능이 필요했다.
어제 이어서 코드를 수정했다.
명섭님이 먼저 암호창을 만들어 주셨고 뒤를 이어서 수정코드를 입력했다.

    //수정할 대상의 Key를 가져오기
    const key = item.dataset.key;
    // 해당 Key에 저장된 데이터 가져오기
    const reviewCard = localStorage.getItem(key);
    let reviewData = JSON.parse(reviewCard);
    //textarea 변수 저장 textarea 클래스명 : .text-modify
    let textModify = itemTextArea.value;
    //textarea에 담은 데이터를 reviewData.text에 저장함
    reviewData.comments = textModify;
    localStorage.setItem(key, JSON.stringify(reviewData));
    console.log("reviewData.text는" + reviewData.comments); //첫번째 입력값만 됨
    console.log("reviewData는" + reviewData);
    console.log("item.dataset[key]는" + item.dataset["key"]); //각각 맞게 찍힘
    window.location.reload();
  });
});

비밀번호창 취소 누르면 사라지게하기

비밀번호창에서 취소를 누르면 사라지게 하는 기능도 필요했다.

//취소버튼 누르면 다닫히기
document.querySelectorAll(".btn_cancel").forEach(function (item) {
  item.addEventListener("click", function () {
    //closest https://developer.mozilla.org/ko/docs/Web/API/Element/closest
    let parentBox = item.closest(".card-container__card");
    //console.log(parentBox);
    parentBox.querySelector(".text-modify").style.display = "none";
    parentBox.querySelector(".btn_confirm").style.display = "none";
    parentBox.querySelector(".btn_cancel").style.display = "none";
    parentBox.querySelector(".btn_modify").style.display = "block";
    parentBox.querySelector(".btn_delete").style.display = "block";
  });
});

비밀번호창 어둡게 하기
div박스를 하나 만들어서 꽉채우고 반투명하게 만들었다.

.check_pw_frame {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

네비 뒤로가기 버튼 생성

검색창이 의미 없어서 대신 뒤로가는 버튼으로 위치를 바꾸었다.

리뷰 하단 버튼 css

버튼을 각각 이쁘게 수정함

.check_pw .check_pw_btn,
.check_pw_btn_close {
  padding: 10px 20px;
  border-radius: 3px;
  background-color: #ff7591;
  color: #fff;
  font-size: 2rem;
  border: none;
  margin: 0 5px;
}
.check_pw .check_pw_btn:hover {
  background-color: #fff;
  color: #ff7591;
  font-weight: bold;
}
.check_pw .check_pw_btn_close:hover {
  background-color: #fff;
  color: #ff7591;
  font-weight: bold;
}