2주차 과제

JQuery와 Ajax로 환율API를 사용하여 홈페이지 주소 입력시 환율이 바로 보여지게 하기(1주차 과제 화면에 기능 추가)

(1) script부분

//홈페이지 주소 입력시 바로 환율정보 보여주는 기능
$(document).ready(function () {
    exchange();
})

function alarm() {
    alert('주문이 완료 되었습니다!');
}

//환율 API에서 환율정보 가지고 오기
function exchange() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {
            let dollar = response.rate;
            temp_html = `<p>달러-원 환율 : ${dollar}</p>`;
            $('#exchange-dollar').append(temp_html);
        }
    })
}

(2) 나머지(body,style)

div태그에 id="exchange-dollar" class="doller"로 명시하여

.dollar {
    color : blue;
    font-size: 1.5em;
    font-weight: bold;
}

로 꾸며주었다.

(3) 최종 화면

(4) 느낀점

JQuery와 Ajax는 처음 다뤄봤는데 자바스크립트랑 동일 선상이라는 느낌을 많이 받아서 크게 이해하기 어려운 부분은 없었던 거 같다. 그래도 강좌에서 배운 부분은 극히 일부분이라고 생각하고 나중에 다른 자료를 찾아서 조금 더 공부를 할 예정이다. API 정보를 가지고 올때 객체 정보를 잘 파악해서 어떤 값을 가지고 와야하는지 헤메지 않도록 반복 연습 잊지 말기!