HTML, CSS 및 JavaScript를 사용하여 날씨 앱을 만드는 방법 - JavaScript에서 API 사용 - 날씨 앱

오늘 저는 바닐라 JavaScript 및 Open Weather API를 사용하여 구축된 간단한 날씨 앱을 만들고 있습니다. WeatherLy라고 불리며 도시 이름을 입력하자마자 전 세계 모든 도시의 현재 날씨 정보를 제공합니다.

이 JavaScript Weather API 자습서에서 배울 내용:

기본 마크업

스타일 지정

JavaScript Fetch 메서드를 사용하여 API에서 데이터 가져오기

APP용 API 선택

먼저 데이터를 사용할 수 있게 해주는 공급자를 찾아야 합니다. 운 좋게도 데이터베이스를 무료로 사용할 수 있는 놀라운 공급자 "OpenWeather"가 있습니다.

OpenWeather API를 사용하는 방법을 알아보겠습니다.

1단계: OpenWeather API에 가입

계속하다Open Weather Map

계정 만들기



무료 패키지 선택



계속하기 전에 API 키를 등록했는지 확인하세요.

2단계: 마크업 정의

다음은 기본 마크 업입니다.

<div class="view">
   <h2>WeatherLy</h2>
     <form>
       <div class="search">
         <input placeholder="Enter a Location" type="text" id="query">
         <button>Submit</button>
        </div>
     </form>
</div>

이 프로젝트에서 머티리얼 아이콘을 사용하고 있습니다.

여기에서 링크를 얻을 수 있습니다: Material Icons 👈

모든 세부 정보가 특정 태그에 추가됩니다.

<div class="details">
            <div class="img">
                <img src="" alt="weather-icon" class="icon">
            </div>
            <div class="weather">
                <div class="location">
                    <span class="material-icons">
                        place
                    </span>
                    <h3>Location </h3>
                    <span class="name"></span>
                </div>
                <div class="temperature">
                    <span class="material-icons">
                        thermostat
                    </span>
                    <h3>Temperature </h3>
                    <span class="temp"></span>
                </div>
                <div class="description">
                    <span class="material-icons">
                         air
                    </span>
                    <h3>Wind Speed </h3>
                    <span class="desc"></span>
                </div>
            </div>
</div>

스타일링은 다음과 같습니다.

]

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
    background: #17427a;
    color: #f4f4f4;
}
.view{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
h2{
    padding: 10px;
    font-size: 32px;
}
form .search{
    padding: 20px;
    display: flex;
    flex-direction: column;
}
form .search input{
    all: unset;
    padding: 10px;
    background-color: #f6f6f6;
    color: #222222;
    border-radius: 4px;
    margin-bottom: 10px;
}
form .search button{
    all: unset;
    padding: 10px 30px;
    background: linear-gradient(135deg, #2685a2 -50%, #286fe0 180%);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}
form .search button:hover{
    transform: scale(1.03);
}

세부 사항은 다음과 같습니다.

이 섹션의 데이터는 JavaScript를 사용하여 삽입됩니다.

.details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    width: 100%;
    visibility: hidden;
}

.details .img{
    margin: 10px;
    background-color: #bbbbbb;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #f4f4f444;
}

.details .weather{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px;
    width: 100%;
    justify-content: space-around;
}
.details .weather div {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.details .weather div span {
    margin: 10px;
    font-size: 32px;
}

3단계: JavaScript 추가!

HTML에서 모든 요소 선택

const btn = document.querySelector('button')
const details = document.querySelector('.details')
const name = document.querySelector(".name")
const desc = document.querySelector(".desc")
const tempC = document.querySelector(".temp")
const iconHolder = document.querySelector('.icon')
const input = document.querySelector('#query')

API 키 추가:

const api = 'Your API key goes here'

양식 제출 방지:

btn.addEventListener('click', (e)=>{
    e.preventDefault()
})

요청 수행:
먼저 입력 상자의 값을 저장하는 쿼리 변수를 만듭니다. 그런 다음 데이터를 호출하는 URL도 정의합니다.

const query = input.value
const url = `https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=${api}&units=metric`

URL에서 데이터 가져오기:
Fetch 메서드는 JSON 형식의 API에서 원시 데이터를 호출합니다.
다음으로 res.json()을 사용하여 데이터에 액세스할 수 있도록 JSON 데이터를 객체로 변환합니다

.

개체의 데이터를 변환하면 원하는 항목에 액세스할 수 있습니다.

fetch(url)
        .then((res)=>{
            return res.json();
        })
        .then((data)=>{
            const temp = data.main.temp
            const place = data.name
            const icon = data.weather[0].icon
            const speed = data.wind.speed
            const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`
            tempC.textContent = `${temp}°C`
            name.textContent = `${place}`
            desc.textContent = `${speed}`
            iconHolder.src = iconUrl
            details.style.visibility = "visible"
        })
        .catch((err)=> alert("Enter valid addresss!"))

관련 CodePen 데모는 다음과 같습니다.

여기에서 비디오 자습서를 확인할 수도 있습니다.