.스파르타 웹개발 종합반 3주차 - 복습

3주차에 들어가기 전에 복습을 먼저 해보자

2주차에 진행했던 영화 포스터 목록 사이트를 수정해서 영화 api 를 이용해 더 많은 포스터를 추가하자

api : http://spartacodingclub.shop/web/api/movie

사이트에 들어가자마자 리스트가 나열되어있어야 하므로 $(document).ready(function())을 이용하자

function listing() {
  				
              $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/web/api/movie",
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    console.log(rows)
                    for (let i = 0 ; i <rows.length; i++) { // api내부의 세부 요소들의 값을 가지는 변수 선언
                        let title = rows[i]['title']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']
                        let comment = rows[i]['comment']
                        
                        let star_image = '⭐'.repeat(star) // 별모양을 star 값의 수만큼 반복해서 출력한다.

                        console.log(title, desc,image,star,comment)
						
                        // 반복적으로 추가하기 위한 dom 정의
                        let temp_html = `  <div class="col">
                                                <div class="card">
                                                    <img src="${image}"
                                                         class="card-img-top" alt="...">
                                                    <div class="card-body">
                                                        <h5 class="card-title">${title}</h5>
                                                        <p class="card-text">${desc}</p>
                                                        <p>${star_image}</p>
                                                        <p class="mycomment">${comment}</p>
                                                    </div>
                                                </div>
                                            </div>`
                        //제작하는 dom 상위 안에 집어넣는다.
                        $('#card-box').append(temp_html)

                    }
                }
            })
        }

저번에 배운 ajex, jquery 에 대해서 복습하는 셈 치고 사이트의 내용을 추가해봤다.

결과 화면