[Javascript] API 받아온 후, ❶화면에 디스플레이하기 ❷카드 클릭시, alert창 띄우기 ❸css 속성 고치기

❶화면에 디스플레이하기

createElement -> appendChild -> 이후 함수 호출

 movies.forEach((movie) => {
 
 //객체분해할당해준다.
    let { poster_path, title, overview, vote_average, id } = movie;

    let movieCard = document.createElement("div");
    movieCard.className = "movie-card";
    movieCard.onclick = function () {
      alert(`ID : ${id}`);
    };

//createElement한 후 -> 바로 css 속성을 바꿔준다.
    let posterPathElement = document.createElement("img");
    posterPathElement.src = `https://image.tmdb.org/t/p/w400/${poster_path}`;
    posterPathElement.style.marginLeft = "20px";
    posterPathElement.style.marginTop = "20px";
    
    let titleElement = document.createElement("h3");
    titleElement.textContent = title;
    titleElement.style.marginLeft = "10px";
    titleElement.style.fontSize = "20px";

    let overviewElement = document.createElement("p");
    overviewElement.textContent = overview;
    overviewElement.style.marginLeft = "10px";
    overviewElement.style.marginRight = "10px";
    overviewElement.style.textAlign = "justify";

    let voteAverageElement = document.createElement("p");
    voteAverageElement.textContent = `Rating: ${vote_average}`;
    voteAverageElement.style.marginLeft = "10px";
    voteAverageElement.style.marginRight = "10px";

    let idElement = document.createElement("p");
    idElement.textContent = `id: ${id}`;
    idElement.style.marginLeft = "10px";
    idElement.style.marginRight = "10px";

//붙여준다.(1)
    movieCard.appendChild(posterPathElement);
    movieCard.appendChild(titleElement);
    movieCard.appendChild(overviewElement);
    movieCard.appendChild(voteAverageElement);
    movieCard.appendChild(idElement);

//최종적으로, HTML에 붙여준다.(2)
    let cardList = document.querySelector(".card-list");
    cardList.append(movieCard);
  });
};
showMovies();

<로직 부가설명>

-HTML에 붙일 div태그를 만든다. 클래스명도 지정해준다.

-해당 div태그에 붙일 요소들을 createElement한다.

-생성한 요소들을 div태그에 붙인다.

-최종적으로, div태그를 HTML요소에 붙인다.  => 화면에 디스플레이된다.

 

<추가공부>

1.

posterPathElement.src = `https://image.tmdb.org/t/p/w400/${poster_path}`;

 

=>posterPathElement.src : posterPathElement의 이미지경로를 `~~~`으로 바꾸라는 뜻

 

---

❷카드 클릭시, alert창 띄우기

 

 

 

❸css 속성 고치기

createElement -> 바로 밑에 .style.속성명 = ""