공부 및 일상기록

[Javascript] 날씨 api를 이용하여 날씨 입력 본문

개발/Javascript

[Javascript] 날씨 api를 이용하여 날씨 입력

낚시하고싶어요 2022. 9. 8. 14:09

먼저 입력할 html을 만든다.

<body>
    <div>
        <h1>여기에 만들어 보자!</h1>
        <p>현재 기온 : <span id="wether"></span></p>
    </div>
</body>

이렇게 먼저 구성을 해본다.

 

다음은 오픈 api를 이용하여 데이터를 받아온다. 여기서는 스파르타코딩클럽에서 제공한 날씨 api를 사용한다.

<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/jeonju",
            data: {},
            success: function (response) {
                console.log(response)
                let city = response['city']
                let temp = response['temp']
                let icon = response['icon']
                let temp_html = `<img src="${icon}"> ${city} ${temp}`
                $("#wether").append(temp_html)
            }
        })
    });
</script>

icon의 경우 이미지 파일이기 때문에 이미지 코드를 입력 했다.

 

jQuery 임포트가 꼭 필요하다.

'개발 > Javascript' 카테고리의 다른 글

[Javascript] JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?  (1) 2022.09.23
[Javascript] 숫자를 별점으로 변환하기  (0) 2022.09.08
[Javascript] 로딩 후 실행  (0) 2022.09.08
[Javascript] 배열자료형, 딕셔너리 자료형  (0) 2022.09.05
[Javascript] 변수  (0) 2022.09.05
'개발/Javascript' Related Articles more