3주차_2(연습 겸 복습 수업)

index.html_openclose 열기

나홀로 메모장 api열기

http://spartacodingclub.shop/post

로딩 후 바로 실행

$(document).ready(function(){
  listing();
});

function listing() {
console.log('화면 로딩 후 잘 실행되었습니다');
}

ajax 붙여넣기

function listing() {
    $.ajax({
        type: "GET",
        url: "https://api.thecatapi.com/v1/images/search",
        data: {},
        success: function (response) {
        }
    })
}

function listing() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/post",
        data: {},
        success: function (response) {
            let rows = response['articles']
            for (let i=0; i<rows.length; i++){
                let comment = rows[i]['commet']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let title = rows[i]['title']
                let url = rows[i]['url']

                let temp_html = ``
            }
        }
    })
}

여기까지 한 후 카드를 바꿔줌

function listing() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/post",
        data: {},
        success: function (response) {
            let rows = response['articles']
            for (let i=0; i<rows.length; i++){
                let comment = rows[i]['commet']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let title = rows[i]['title']
                let url = rows[i]['url']

                let temp_html = ` <div class="card">
                                    <img class="card-img-top"
                                         src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        여기 기사 제목이 들어가죠</a>
                                        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                                        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                                    </div>
                                </div>`
            }
        }
    })
}

function listing() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/post",
        data: {},
        success: function (response) {
            let rows = response['articles']
            for (let i=0; i<rows.length; i++){
                let comment = rows[i]['commet']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let title = rows[i]['title']
                let url = rows[i]['url']

                let temp_html = ` <div class="card">
                                    <img class="card-img-top"
                                         src="${image}"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <a href="${url}" class="card-title">${title}</a>
                                        <p class="card-text">${desc}</p>
                                        <p class="card-text comment">${commend}</p>
                                    </div>
                                </div>`
                $('#cards-box').append(temp_html)
            }
        }
    })
}

<script>
    $(document).ready(function () {
       $('#cards-box').empty();
        listing();
    });


    function listing() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) {
                let rows = response['articles']
                for (let i=0; i<rows.length; i++){
                    let comment = rows[i]['commet']
                    let desc = rows[i]['desc']
                    let image = rows[i]['image']
                    let title = rows[i]['title']
                    let url = rows[i]['url']

                    let temp_html = ` <div class="card">
                                        <img class="card-img-top"
                                             src="${image}"
                                             alt="Card image cap">
                                        <div class="card-body">
                                            <a href="${url}" class="card-title">${title}</a>
                                            <p class="card-text">${desc}</p>
                                            <p class="card-text comment">${comment}</p>
                                        </div>
                                    </div>`
                    $('#cards-box').append(temp_html)
                }
            }
        })
    }