제이쿼리 이용해서 새로운 카드를 생성하는 코드 짜기

목표

중앙에 있는 카드에 정보를 입력하면 아래와 같이 새로운 정보 카드가 추가되는 기능 구현

카드를 추가하는 함수 makecard()

  function makecard() {
    let image = $("#url").val();
    let title = $("#title").val();
    let star = $("#star").val();
    let comment = $("#comment").val();

    let temp_html = `
  <div class="col">
    <div class="card h-100">
      <img
        src="${image}"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">${title}</h5>
        <p class="card-text">${star}</p>
        <p class="card-text">${comment}</p>
      </div>
    </div>
  </div>
  `;
    $("#card").append(temp_html);
  }

1. 네 개의 변수 설정: 영화 포스터 url, 영화 제목, 별점, 코멘트

2. 새로운 카드에 들어갈 정보를 담는 변수 temp_html 설정: 원래 카드 HTML 코드를 그대로 긁어온 다음, 새로운 정보가 들어갈 자리에 ${}를 넣는다.

3. ${"#card"}.append(temp_html)을 통해 새로운 카드를 추가한다.

문제 및 해결방법

<select class="form-select" id="star">
  <option selected>Choose Star</option>
  <option value="1">⭐</option>
  <option value="2">⭐⭐</option>
  <option value="3">⭐⭐⭐</option>
  <option value="4">⭐⭐⭐⭐</option>
  <option value="5">⭐⭐⭐⭐⭐</option>
</select>

별점이 별 아이콘이 아니라 숫자가 나오게 된다.이는 value값에 별 모양 아이콘이 아니라 숫자가 있기 때문이다.

<select class="form-select" id="star">
  <option selected>Choose Star</option>
  <option value="⭐">⭐</option>
  <option value="⭐⭐">⭐⭐</option>
  <option value="⭐⭐⭐">⭐⭐⭐</option>
  <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
  <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>

따라서 이를 해결하기 위해 value값에 별 아이콘을 넣으면 된다. 다른 방법들도 많지만 이게 가장 직관적인 방법!