위치조정 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

위치조정

undefined주차

김*연

・

추천

・

조회수

답변 완료

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

<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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>스마트가로등 페이지</title>

    <style type="text/css">
      .mytitle{
          padding: 150px;
          text-align: center;

          background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODExMjJfNzkg%2FMDAxNTQyODcyMjIxNDE0.aRx_2IE9YC7bT4ejXkdK-1Mkab0LGsdn1OIJMD5BCJ0g.f0npgzT0zUXa84N5CuLg67-kQYbuq1ylVIuBzcADU14g.JPEG.hi_nso%2Fdd.JPG&type=sc960_832");
          background-position: center 5%;
          background-size: cover;

          color: darkblue;
      }
      .btn_box{
          width: 500px;
          height: 150px;
          margin: 70px auto 0 auto;

          box-shadow: 0 0 3px 0 gray;

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
      .btn_box>button{
          margin-left: 60px;
          margin-right: 60px;
      }
      .btn btn-outline-secondary>button{
          /*???*/
      }

      div.question-box {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
      .bad {
          color: red;
      }

    </style>

    <script>
        function q1() {
          $('#names-q1').empty()
          $.ajax({
          type: "GET",
          url: "http://data.ex.co.kr/openapi/trafficapi/trafficRegion?key=0246556318&type=json",
          data: {},
          success: function(response){
            let rows = response['trafficRegion']
            for (let i=0; i<rows.length; i++){
              let gu_name = rows[i]['regionName']
              let gu_car=rows[i]['trafficAmout']
                  let temp_html=``
                  if(gu_car>1000){
                    temp_html= `<li class="bad">${gu_name}:${gu_car}</li>`
                  }else{
                    temp_html= `<li>${gu_name}:${gu_car}</li>`
                  }
              $('#names-q1').append(temp_html)

            }
          }
    })
    }
    </script>
</head>

<body>
    <div class="mytitle">
      <h1>스마트가로등</h1>
      <button type="button" class="btn btn-outline-secondary">관리페이지로 이동하기</button>
    </div>
    <div class="btn_box">
        <button type="button" class="btn btn-outline-dark">주차공간</button>
        <div class="question-box">
            <button onclick="q1()" type="button" class="btn btn-outline-dark">도로혼잡도</button>
            <ul id="names-q1"></ul>
        </div>
    </div>
</body>
</html>

미세먼지 api를 불러오는 것을 도로혼잡도로 응용해봤는데요 여기서 도로혼잡도 버튼을 누르면 그 결과가 버튼 두개가 들어있는 박스 밑으로 내려가게 하고 싶은데 어떻게 해야 하나요 ㅠㅠ

댓글 알림