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

별점 옆에 숫자 띄우기 + 반응형 + css

리뷰작성하는 모달창 별점 옆에 숫자가 있으면 좋겠다고 명섭님이 말하셔서 해봄.
코드 짜려고 했는데 명섭님이 별점관련해서 리뷰 카드리스트에 출력되게 하려다가 우연히 가져오셔서 나는 페이지에 띄우는 자바스크립트랑 반응형과 함께 원래 핑크색 하트였는데 노란색 하트로 교체함.

document.querySelectorAll(".star_radio").forEach((item) => {
  item.addEventListener("change", function () {
    const query = `label[for='${item.id}']`;
    const rate = document.querySelector(query).title;
    document.querySelector(".star_rating_number").innerHTML = rate;
  });
});

카드 화면에 띄우기

const addCard = () => {
  const card_box = document.querySelector(".card-container__card");
  const thisMovieReviews = Object.keys(localStorage).filter((review) =>
    // 영화 고유한 id가 들어가야함
    review.includes("123")
  );

  thisMovieReviews.forEach((CardKey) => {
    //데이터 불러오기
    const reviewCard = localStorage.getItem(CardKey);
    let reviewData = JSON.parse(reviewCard);
    //만들기
    let temp = `
    <li>
    <div class="card-container__card">
      <div class="card-container__card-first-line">
        <div>
          <figure><img src="./images/reviews_user.svg" /></figure>
          <span>${reviewData.user}</span>
        </div>
        <div class="card-container__card-rate">
          <figure><img src="./images/reviews_star.svg" /></figure>
          <span>${reviewData.rate}</span>
        </div>
      </div>
      <div class="text-area">
        <p>
          ${reviewData.comments} </p>
          
          <textarea class="text-modify"></textarea>
      </div>

      <div class="card-container__card-check-good">
        <div>
          <figure><img src="./images/reviews_good.svg" /></figure>
          <span>${reviewData.like}</span>
        </div>
        <button class="like-btn" data-key="${CardKey}">좋아요</button>
        <button class="btn_modify" type="button" data-key="${CardKey}">수정</button>
        <button class="btn_delete" data-key="${CardKey}">삭제</button>
      </div>
    </div>
  </li>
    `;
    document
      .querySelector(".card-container ul")
      .insertAdjacentHTML("beforeend", temp);
  });
};

// 각 카드 생성하고 화면에 추가하기
document.addEventListener("DOMContentLoaded", addCard());

맨처음엔 reviewData를 엉뚱한 객체를 연결했는데 명섭님이 이게 아니라고 하셔서 템플릿 문자열으로 일단 해보았다.
중간중간 어려운게 있었는데 팀원과 함께하니 척척 해결되는게 신기하고 좋았다.

암호 모달창 html css

암호 모달창이 필요해서 html과 css로 만들었다.
이건 재미있고 쉬웠다.

    <div class="check_pw">
      <p>비밀번호를 입력해주세요.</p>
      <p><input type="password" class="check_pw_input"></p>
      <button class="check_pw_btn">확인</button>
      <button class="check_pw_btn_close" type="button">취소</button>
    </div>

삭제버튼 만들기 html js

삭제버튼의 html을 만들고 명섭님이랑 자바스크립트 같이 만듬. 어휴.. 어려움 ㅠ_ㅠ

document.querySelectorAll(".btn_delete").forEach((item) => {
  item.addEventListener("click", function () {
    localStorage.removeItem(item.dataset["key"]);
    window.location.reload();
  });
});

수정버튼 js

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

혼자서 좀 해봤는데.. 어렵다 너무.. 문제는
let textModify = document.querySelector(".text-modify").value; 이부분이
두번째나 세번째 버튼을 눌러도 첫번째 textarea가 콘솔로그에 찍혔다.
저녁시간에 명섭님이 이 부분은 해결하셨다.

오늘의 한줄평 : 자바스크립트를 자랑스럽게 잘 할수 있었으면 좋겠다.