[html + css + js] 공공기온 API 활용 - ajax

사용 기능

- 화면 접속 성공시 alert 창 띄울 수 있도록 함

- 기온 API 활용하여 온도 데이터 불러와서 화면에 동적으로 띄움

- 정적인 온도가 대치됨

- 나머지는 기존에 만들어놓은 김승민 랩퍼 팬명록에서 구현하였음

스파르타 웹개발 개발 일지 작성으로 인하여 글 작성

사용한 코드

사용한 코드는 아래와 같음

<!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>1주차 숙제</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

</head>
<style>
  * {
    font-family: 'Gowun Dodum', sans-serif;
  }

  #mytitle {
    background-color: green;

    width:100%;
    height: 250px;
    
    color: white;

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://file.namu.moe/file/17a23b19305d0841bea89155d541c4d7f8117255ec2dbca20469b0ba3a71155b88896cb501dafff4fe6b04e59b382b82");
    background-position: center;
    background-size: auto;

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

  .mypost {
    max-width: 500px;
    width: 95%;
    margin: 20px auto 20px auto;

    box-shadow: 0px 0px 3px 0px black;
    padding: 20px;
  }
  
  .mypost > button {
    margin-top: 15px;
  }

  .mycards {
    width: 95%;
    max-width: 500px;
    margin: auto;
  }
  .mycards > .card {
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>

<script>
  $(document).ready(function(){
    alert("로딩 성공!")
  })

  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
      data: {},
      success: function(response){
          $('#temp').text(response['temp'])
        }
      })
});
  /* $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function(response) {
      let rows = response['RealtimeCityAir']['row']
      for (let i = 0; i < rows.length ; i++){
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']
        console.log(gu_name, gu_mise)
      }
    }
  }) */
</script>

<body>

  <div id="mytitle">
    <h1>김승민 팬명록</h1>
    <p>현재 기온 : <span id="temp">1도</span>도</p>
  </div>

  <div class="mypost">
    <div class="form-floating mb-3">
      <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">닉네임</label>
    </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>
    <button type="button" class="btn btn-dark">응원 남기기</button>
  </div>

  <div class="mycards">
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

코드에 관한 질문은 언제든지 댓글 바랍니다.

저작자표시

'🗝️소프트웨어 > 📗JavaScript' 카테고리의 다른 글

[Ajax, Flask] 버킷리스트 웹 페이지 만들기 (0)	2022.09.23
[ajax] post, get 방식 이용한 웹사이트 만들기 (0)	2022.09.22
[Vue.js] 문법 기초 2편(props, v-bind, v-on, router, axios) (0)	2022.09.18
[Vue.js] 문법 기초 1편(props, v-bind, v-on, router, axios) (0)	2022.09.18
자바스크립트 객체 개념 총정리 (0)	2022.08.11

'🗝️소프트웨어 > 📗JavaScript' 카테고리의 다른 글

티스토리툴바