커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
3-2 스파르타 피디아 영화가 뜨지 않습니다
undefined주차
북마크
최*현
댓글
4
・
추천
0
・
조회수
10
조회수
10
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.





스파르타 즉문즉답






<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>코딩클럽</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }
        .mytitle {
            background-color: green;
            height: 250px;
            width: 100%;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;
            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .mytitle > button {
                width: 200px;
                height: 50px;

                background-color: transparent;
                color:white;

                border-radius: 50px;

                border: 1px solid white;

                margin: 10px;
            }
        .mytitle > button:hover{
            border: 3px solid white;
        }
    .wrap{
        max-width: 1200px;
        width: 95%;
        margin: 20px auto 0px auto;
    }
    .mypost{
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0px auto;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;
        display: none;
    }
    .mybtn{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        margin-top: 10px;
    }
    .mybtn>button{
        margin-right: 10px;
    }
    </style>
    <script>
        function opne_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }

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

        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                success: function (response) {
                   let rows = response['movies']
                    for (let i=0; i<rows.length; i++){
                        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)
                        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}</div>
                                                <p>${star_image}</p>
                                                <p class="mycomment">${comment}</pc>
                                            </div>
                                          </div>`
                        $('#cards-box').append(temp_html)

                    }
                }
            })
        }

        // let count = 0
        // function hey(){
        //     count += 1
        //     if (count % 2 == 0){
        //         alert('짝수입니다')
        //     } else {
        //         alert('홀수입니다')
        //     }
        // }
//             let mise_list = [
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "도심권",
//     MSRSTE_NM: "중구",
//     PM10: 22,
//     PM25: 14,
//     O3: 0.018,
//     NO2: 0.015,
//     CO: 0.4,
//     SO2: 0.002,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 31,
//     ARPLT_MAIN: "O3",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "도심권",
//     MSRSTE_NM: "종로구",
//     PM10: 24,
//     PM25: 18,
//     O3: 0.013,
//     NO2: 0.016,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 39,
//     ARPLT_MAIN: "PM25",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "도심권",
//     MSRSTE_NM: "용산구",
//     PM10: 0,
//     PM25: 15,
//     O3: 0.012,
//     NO2: 0.027,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "점검중",
//     IDEX_MVL: -99,
//     ARPLT_MAIN: "점검중",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서북권",
//     MSRSTE_NM: "은평구",
//     PM10: 36,
//     PM25: 14,
//     O3: 0.019,
//     NO2: 0.018,
//     CO: 0.5,
//     SO2: 0.005,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 42,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서북권",
//     MSRSTE_NM: "서대문구",
//     PM10: 28,
//     PM25: 9,
//     O3: 0.018,
//     NO2: 0.015,
//     CO: 0.6,
//     SO2: 0.004,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 37,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서북권",
//     MSRSTE_NM: "마포구",
//     PM10: 26,
//     PM25: 8,
//     O3: 0.012,
//     NO2: 0.021,
//     CO: 0.5,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 36,
//     ARPLT_MAIN: "NO2",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "광진구",
//     PM10: 17,
//     PM25: 9,
//     O3: 0.018,
//     NO2: 0.016,
//     CO: 0.6,
//     SO2: 0.001,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 31,
//     ARPLT_MAIN: "O3",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "성동구",
//     PM10: 21,
//     PM25: 12,
//     O3: 0.018,
//     NO2: 0.017,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 33,
//     ARPLT_MAIN: "PM25",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "중랑구",
//     PM10: 27,
//     PM25: 10,
//     O3: 0.015,
//     NO2: 0.019,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 34,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "동대문구",
//     PM10: 26,
//     PM25: 9,
//     O3: 0.016,
//     NO2: 0.017,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 34,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "성북구",
//     PM10: 27,
//     PM25: 8,
//     O3: 0.022,
//     NO2: 0.014,
//     CO: 0.5,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 37,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "도봉구",
//     PM10: 25,
//     PM25: 12,
//     O3: 0.024,
//     NO2: 0.011,
//     CO: 0.3,
//     SO2: 0.002,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 41,
//     ARPLT_MAIN: "O3",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "강북구",
//     PM10: 30,
//     PM25: 15,
//     O3: 0.022,
//     NO2: 0.02,
//     CO: 0.4,
//     SO2: 0.002,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 39,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동북권",
//     MSRSTE_NM: "노원구",
//     PM10: 21,
//     PM25: 14,
//     O3: 0.017,
//     NO2: 0.016,
//     CO: 0.4,
//     SO2: 0.004,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 36,
//     ARPLT_MAIN: "PM25",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "강서구",
//     PM10: 36,
//     PM25: 16,
//     O3: 0.021,
//     NO2: 0.013,
//     CO: 0.4,
//     SO2: 0.004,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 42,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "구로구",
//     PM10: 23,
//     PM25: 10,
//     O3: 0.022,
//     NO2: 0.016,
//     CO: 0.3,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 37,
//     ARPLT_MAIN: "O3",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "영등포구",
//     PM10: 29,
//     PM25: 15,
//     O3: 0.01,
//     NO2: 0.022,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 41,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "동작구",
//     PM10: 29,
//     PM25: 15,
//     O3: 0.012,
//     NO2: 0.023,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 41,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "관악구",
//     PM10: 27,
//     PM25: 12,
//     O3: 0.012,
//     NO2: 0.022,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 37,
//     ARPLT_MAIN: "NO2",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "금천구",
//     PM10: 25,
//     PM25: 15,
//     O3: 0.015,
//     NO2: 0.02,
//     CO: 0.4,
//     SO2: 0.004,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 43,
//     ARPLT_MAIN: "PM25",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "서남권",
//     MSRSTE_NM: "양천구",
//     PM10: 0,
//     PM25: 14,
//     O3: 0.016,
//     NO2: 0.017,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "점검중",
//     IDEX_MVL: -99,
//     ARPLT_MAIN: "점검중",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동남권",
//     MSRSTE_NM: "강남구",
//     PM10: 31,
//     PM25: 16,
//     O3: 0.018,
//     NO2: 0.018,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 39,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동남권",
//     MSRSTE_NM: "서초구",
//     PM10: 34,
//     PM25: 13,
//     O3: 0.024,
//     NO2: 0.019,
//     CO: 0.3,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 41,
//     ARPLT_MAIN: "PM10",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동남권",
//     MSRSTE_NM: "송파구",
//     PM10: 25,
//     PM25: 6,
//     O3: 0.014,
//     NO2: 0.025,
//     CO: 0.4,
//     SO2: 0.003,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 42,
//     ARPLT_MAIN: "NO2",
//   },
//   {
//     MSRDT: "201912052100",
//     MSRRGN_NM: "동남권",
//     MSRSTE_NM: "강동구",
//     PM10: 24,
//     PM25: 14,
//     O3: 0.016,
//     NO2: 0.02,
//     CO: 0.4,
//     SO2: 0.002,
//     IDEX_NM: "좋음",
//     IDEX_MVL: 39,
//     ARPLT_MAIN: "PM25",
//   },
// ];
//
//             for (let i = 0; i < mise_list.length; i++) {
//                 if (mise_list[i]['IDEX_MVL'] < 40) {
//                     console.log(mise_list[i]['MSRSTE_NM'])
//                 }
//             }
        //       function hey(){
        //             alert('안녕!');
        //             }
    </script>
</head>

<body>
   <div class="mytitle">
       <h1>내 생애 최고의 영화들</h1>
       <button onclick="opne_box()"> 영화 기록하기</button>
<!--       버튼안에 onclick="hey()"-->
   </div>
    <div class="mypost" id="post-box">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="url" placeholder="name@example.com">
            <label for="floatingInput">영화URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--선택하기--</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>
   <div class= "wrap">
        <div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                <p class="card-text">여기에 내용이 들어갑니다</div>
                <p>⭐⭐⭐</p>
                <p>여기에 코멘트가 들어갑니다</p>
            </div>
          </div>
                <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                <p class="card-text">여기에 내용이 들어갑니다</div>
                <p>⭐⭐⭐</p>
                <p>여기에 코멘트가 들어갑니다</p>
            </div>
          </div>
                <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                <p class="card-text">여기에 내용이 들어갑니다</div>
                <p>⭐⭐⭐</p>
                <p>여기에 코멘트가 들어갑니다</p>
            </div>
          </div>
                <div class="col">
            <div class="card">
              <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                <p class="card-text">여기에 내용이 들어갑니다</div>
                <p>⭐⭐⭐</p>
                <p>여기에 코멘트가 들어갑니다</p>
            </div>
          </div>
            </div>
   </div>

</body>

</html>
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴