내일 배움단 11일 메이킹 챌린지 5일차

오늘 배운것

오늘은 API코드의 마지막 예제를 해치웠다!!!
어제 웹페이지 만들면서 만들었던 코드가 맞는 코드였다!!!!!!!
나도 할 수 있는 사람이었어ㅜ
코드가 연결되는게 굉장히 뿌듯했다.

오늘 배운 코드

<script>
            $(document).ready(function () {
                showStar();
            });

            function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for (let i = 0; i < mystars.length; i++) {
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']

                            let temp_html =`<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#"token interpolation">${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#"token interpolation">${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html)
                        }
                    }
                });
            }

            function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload()
                    }
                });
            }

            function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload()
                    }
                });
            }

        </script>

오늘 한 일

오늘은 도시 위치에 핀버튼 이미지를 띄우고 클릭이 가능하게 만드는 코드를 작성했다.
우리가 배경화면 이미지를 백그라운드로 설정해놔서 원래 실행하려던 이미지맵 코드가 사용 불가능!!
그래서 구글을 헤엄쳐서 꼼수 방법을 배웠다!
그 멋진 코드로 해결해냈다!!

내일 할 일

1. static에 있는 이미지를 html에 가져오기
   (따로 css를 작성해야하나?)
2. api코드 연결 확인하기