🤪 자기소개 페이지 만들기 - 3

오늘은 Kingth Quiz 라고 간단한 카드 형태로 나에 대한 질문과 답변을 만들어 보았다.

• 질문에 대한 답변을 배열과 객체로 작성

const data = [
    {
      question: "저는 몇살 일까요?",
      anwser: "1993년에 태어난 28살입니다.",
    },
    {
      question: "저의 혈액형은 무엇일까요?",
      anwser: "O형 입니다.",
    },
    ]

• 배열의 각 인덱스에 접근하는 방법은?
  data[index]
• 객체의 각 속성에 접근하는 방법은?
  data[index].question
  data[index].answer

• DOM(Document Object Model)을 이용한 HTML 문서 조작

 for (let i = 0; i < data.length; i++) {
    const $quizCard = document.createElement("div");
    $quizCard.classList.add("quiz-card");
    $quizCard.id = i;
    $quizCard.innerText = data[i].question;
    $quizBoard.appendChild($quizCard);
  }

위 코드는 카드 한장을 만들고 그 안에 질문을 작성해서 HTML문서에 보이도록 작성한 것이다.
HTML에서 작성해도 되는 부분이지만 현재 페이지에서는 질문이 6가지가 있다.
그러면 카드를 6장 만드는 HTML구문을 작성해야한다.
그 반복작업을 줄이기 위해 javascript에서 위 구문을 for으로 6개의 element를 만들어줬다.

• 질문에 대한 Click Event 발생시 답변을 보여주도록 만듬

  for (let i = 0; i < $quizCard.length; i++) {
    $quizCard[i].addEventListener("click", () => {
      if ($quizCard[i].classList.contains("answer")) {
        $quizCard[i].classList.remove("answer");
        $quizCard[i].textContent = data[i].question;
        $quizCard[i].classList.add("click");
      } else {
        $quizCard[i].classList.add("answer");
        $quizCard[i].textContent = data[i].anwser;
        $quizCard[i].classList.remove("click");
      }
    });
  }