2024.01.11 팀 프로젝트 2

에러가 너무 많아서 지친다..

 

오늘 밤새 css까지 마치고 내일은 기필코 코드를 뜯어내 공부하리라.

괜히 처음 프로젝트 이쁘게 만들고 싶은 마음에 욕심냈더니
내가 만드는게 아니라 chat gpt가 다 만들어줬다.

공부량이 만만치 않아..

 

다음엔 욕심안내고 심플하게 필요한 기능만을 내스스로 만들어 보는 것으로 하자. 

일단 이번엔 시간이 없으니.. 2틀밤 꼴딱 세우기 쉽네 ? ^^

 

closeModal.js


class CloseButton {
  constructor(modal) {
    this.closeButton = document.getElementById("close");
    this.modal = modal;
    this.addEventListeners();
  }

  addEventListeners() {
    this.closeButton.addEventListener("click", (event) => {
      event.preventDefault();
      this.closeModal();
    });
  }

  closeModal() {
    const modal = document.getElementById("myModal");
    modal.style.display = "none";

    document.querySelectorAll(".getstar .star").forEach((star) => {
      star.checked = false;
    });

    document.getElementById("reviewform").reset();
    modal.querySelectorAll(".staricon.filled").forEach((icon) => {
      icon.classList.remove("filled");
    });
    modal
      .querySelectorAll(".aspect-item.active, .emotion-item.active")
      .forEach((item) => {
        item.classList.remove("active");
      });
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const modalInstance = new Modal();
  new CloseButton(modalInstance);
});

 

 

pushLocalstorage.js


function getSelectedStars() {
  const checkedStar = document.querySelector(".getstar .star:checked");
  if (!checkedStar) {
    return "";
  }
  const score = parseInt(checkedStar.id.replace("star", ""), 10);
  return "⭐".repeat(score / 2) + ` ${score}점`;
}

function getSelectedAspects() {
  return Array.from(document.querySelectorAll(".aspects .aspect-item.active"))
    .map((el) => `#${el.textContent}`)
    .join(", ");
}

function getSelectedEmotions() {
  return Array.from(document.querySelectorAll(".emotions .emotion-item.active"))
    .map((el) => `#${el.textContent}`)
    .join(", ");
}

function saveReview() {
  const reviewData = {
    name: document.getElementById("name").value,
    password: document.getElementById("password").value,
    impressions: document.getElementById("impressions").value,
    stars: getSelectedStars(),
    aspects: getSelectedAspects(),
    emotions: getSelectedEmotions(),
    date: new Date().toLocaleDateString("ko-KR"),
  };

  let reviews = JSON.parse(localStorage.getItem("reviews")) || [];
  reviews.push(reviewData);
  localStorage.setItem("reviews", JSON.stringify(reviews));

  updateReviewList();
  closeModal();
}

document.addEventListener("DOMContentLoaded", function () {
  const modalInstance = new Modal();
  const extendedCloseButton = new ExtendedCloseButton(modalInstance);

  const submitButton = document.getElementById("submit");
  submitButton.addEventListener("click", (event) => {
    event.preventDefault();
    saveReview();
    extendedCloseButton.closeModal();
  });
});

function updateReviewList() {
  const reviewList = document.getElementById("reviewlist");
  const reviews = JSON.parse(localStorage.getItem("reviews")) || [];
  const reviewListUl = reviewList.querySelector("ul");
  reviewListUl.innerHTML = "";

  reviews.forEach((review) => {
    const li = document.createElement("li");
    li.innerHTML = `
      ${review.stars}<br>
      <strong>${review.name}</strong> ${review.impressions}<br>
      <em>${review.aspects}</em> - <em>${review.emotions}</em> - <span>${review.date}</span>
    `;
    reviewListUl.appendChild(li);
  });
}

 

 

이런 에러가 났다.

pushLocalstorage.js:43 Uncaught ReferenceError: ExtendedCloseButton is not defined at HTMLDocument.<anonymous> (pushLocalstorage.js:43:31)

 

ReferenceError로 ExtendedCloseButton이 정의되지 않았다고 한다. 

다시 정의해줄께.. 미안하다.. 

 

closeModal은  함수로 선언했다가 겹치는 부분이 많아서 CloseButton class의 매소드로 바꿨더니 하하 

 

document.addEventListener("DOMContentLoaded", function () {
  const modalInstance = new Modal();
  const extendedCloseButton = new ExtendedCloseButton(modalInstance);

  const submitButton = document.getElementById("submit");
  submitButton.addEventListener("click", (event) => {
    event.preventDefault();
    saveReview();
    extendedCloseButton.closeModal();
  });
});

⬇️

document.addEventListener("DOMContentLoaded", function () {
  const modalInstance = new Modal();
  const closeButton = new CloseButton(modalInstance);

  const submitButton = document.getElementById("submit");
  submitButton.addEventListener("click", (event) => {
    event.preventDefault();
    saveReview();
    closeButton.closeModal();
  });
});