<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="0517 날씨앱.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>전 세계 날씨 검색</h1>
<select name="" id="">
<option value="seoul">서울</option>
<option value="osaka">오사카</option>
<option value="fukuoka">후쿠오카</option>
<option value="venezia">베네치아</option>
<option value="busan">부산</option>
<option value="new york">뉴욕</option>
</select>
</header>
<div class="main">
<h3 class="region">서울 중구</h3>
<p class="temp"><span>30</span>°C</p>
<img class="icon" src="data:image/png;base64,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" width="80px" alt="날씨아이콘">
<div class="detail">
<span class="feel">체감온도<span>0</span>°C</span>
<span class="wind">풍속<span>0</span>m/s</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const KEY = "47c44037a668e7569c5d4687b724255e"
const 도시이름 = document.querySelector(".region")
const 기온 = document.querySelector(".temp span")
const 체감온도 = document.querySelector(".feel span")
const 풍속 = document.querySelector(".wind span")
const 이미지 = document.querySelector(".icon")
//디폴트
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=${KEY}`)
.then(function (response) {
// 성공 핸들링
console.log(response);
도시이름.innerHTML = response.data.name
기온.innerHTML = (response.data.main.temp - 273).toFixed(1)
체감온도.innerHTML = (response.data.main.feels_like - 273).toFixed(1)
풍속.innerHTML = response.data.wind.speed
이미지.setAttribute("src", `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`)
console.log("도시 이름", response.data.name)
console.log("기온", response.data.main.temp)
console.log("체감온도", response.data.main.feels_like)
console.log("풍속", response.data.wind.speed)
})
//let API = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${KEY}`
const 셀렉 = document.querySelector("select")
셀렉.addEventListener("change", (e) => {
console.log(e)
// e.target.value에 option의 value가 들어있음
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${e.target.value}&appid=${KEY}`)
.then(function (response) {
// 성공 핸들링
console.log(response);
도시이름.innerHTML = response.data.name
기온.innerHTML = (response.data.main.temp - 273).toFixed(1)
체감온도.innerHTML = (response.data.main.feels_like - 273).toFixed(1)
풍속.innerHTML = response.data.wind.speed
이미지.setAttribute("src", `https://openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`)
console.log("도시 이름", response.data.name)
console.log("기온", response.data.main.temp)
console.log("체감온도", response.data.main.feels_like)
console.log("풍속", response.data.wind.speed)
})
.catch(function (error) {
// 에러 핸들링
console.log(error);
})
})
</script>
</body>
</html>==================================================================================================
* {margin: 0; padding: 0;}
/* 이 부분은 상단 메뉴 부분 */
.header {
background-color: rgb(80, 140, 218);
display: flex; justify-content: space-between;
padding: 20px;
}
h1 {
color: rgb(255, 255, 255);
}
select {
width: 200px;
}
.main {
position: relative; top: 400px;
display: flex; justify-content: center; align-items: center;
flex-direction: column;
}
.region {
font-size: 40pt; color: darkcyan;
}
.temp span {font-size: 60pt;}
.temp {
font-size: 30pt;
}
.detail {
display: flex;
}
.detail > span {
background-color: deepskyblue; color: white;
border-radius: 8px; padding: 5px; margin: 10px;
}