2주차-12 실시간환율적용

Quiz)첫 화면부터 실시간환율 바로 적용하기

1. 먼저 실시간 환율을 적용할 API를 찾아온다

   https://api.manana.kr/exchange/rate.json

2. 설명 바로 밑에 환율정보를 넣어주기(body태그)
   기존에 없던 정보를 넣는 것으로 body 태그 안의 물품설명 밑에 적어넣기.

<p></p>태그나 <h3~h6> - 등 원하는 태그를 넣어주면 됩니다.

<h5 class="rate">달러-원 환율: <span id="now_rate">1200.5</span></h5>
span태그는 실시간 환율 정보를 불러올 시 변경해야하므로 따로 지정하는 것이며 id도 지정해줍니다.

3.실시간 환율정보 연동하기(script태그)
1) 먼저 바로 창이 뜨자마자 실시간으로 환율이 떠야하므로 바로 뜨는 JQuery적용하기
$(document).ready(function () {
get_rate() ->get_rate라는 기능이 자동실행됨을 의미.
});

2) 실시간 환율 연동정보 기능넣기

function get_rate() {
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {

         console.log(response) ->먼저 잘 작동되는지 console창 확인

위 이미지처럼 console창 안의 내용이 잘 뜨면 작동이 잘됨을 의미.
원하는 환율은 1번째의 rate=환율 값이므로

             let now_rate = response[1]['rate']; 
             //환율 api의 1번째 rate를 받아와 now_rate로 저장
             $('#now_rate').text(now_rate);
             //id가 now_rate로 지정된 곳을 now_rate값으로 변경
        }
    })
}

4. 결과확인
   원화는 환율정보가 바로 실행하자마자 값이 반영됨을 확인하면 완성~~!