목표: html, css로 날씨 위젯 만들기
디자인은 아래의 영상을 참고하여 만들었음
1. HTML과 css로 디자인하기
완성이미지)
index.html)
<body onload="load()">
<div id="card">
<div class="icon"><img src="./icons/day.svg" id="weather_img" /></div>
<div class="detatils">
<div class="weather">
<div class="left">
<h3><span id="temperate">20</span>℃</h3>
Temperate
</div>
<div class="center">
<h3><span id="probability">30</span>%</h3>
Probability
</div>
<div class="right">
<h3><span id="wind">2.2</span>m/s</h3>
Wind speed
</div>
</div>
<div class="bottom">
Date : <span id="date">2022년08월11일01:21</span>
</div>
</div>
</div>
</body>style.css)
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg,#fbda61,#ff5acd);
}
#card{
position: relative;
width: 360px;
height: 240px;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 35px 80px rgba(0,0,0,0.15);
padding: 10px;
}
.icon{
position: absolute;
left: 50%;
top: -70px;
transform: translateX(-50%);
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0,0,0,0.25);
}
.icon img {
width: 100%;
height: 100%;
}
.bottom{
display: flex;
position: relative;
justify-content: end;
color: #aaa;
right: 10px;
bottom: 0px;
}
.weather{
display: flex;
justify-content: space-around;
margin-top: 120px;
margin-bottom: 20px;
height: 50px;
}
.weather > div {
width: 33.33333%;
text-align: center;
font-weight: 400;
color: #555;
}
.weather > div > h3 {
color: #333;
}
2. 가져온 open api 데이터를 html에 뿌리기
2.1 body태그의 onload 이벤트에 load()함수를 만들어 넘기기
let element_temperate;
let element_probability;
let element_wind;
let element_img;
let element_date;
function load() {
element_temperate = document.getElementById("temperate");
element_probability = document.getElementById("probability");
element_wind = document.getElementById("wind");
element_img = document.getElementById("weather_img");
element_date = document.getElementById("date");
navigator.geolocation.getCurrentPosition(success, error, options);
}
2.2 draw()함수를 만들어 각 요소의 text에 open api 데이터 넣기
이때 "SKY" 값과 "PTY"값은 비나 구름같은 하늘의 상태에 대한 정보로
conv_()함수를 만들어 값에 해당하는 날씨에 맞는 날씨 이미지의 파일 주소를 지정
function conv_sky(sky_code) {
let value = "day";
switch (sky_code) {
case "1": //맑음
if (base_time > 1800) {
value = "night";
} else {
value = "day";
}
break;
case "3": //구름많음
if (base_time > 1800) {
value = "cloudy-night";
} else {
value = "cloudy-day";
}
break;
case "4": //흐림
value = "cloudy";
break;
default:
value = "day";
}
return value;
}
function conv_pty(pty_code) {
let value = "없음";
switch (pty_code) {
case "1": //비
value = "rainy";
break;
case "2": //비/눈
value = "rainy-snowy";
break;
case "3": //눈
value = "snowy";
break;
case "4": //소나기
value = "shower";
break;
case "5": //빗방울
value = "raindrop";
break;
case "6": //빗방울/눈날림
case "7": //눈날림
value = "drifting-snow";
break;
default:
value = "ERROR";
}
return value;
}function draw() {
element_temperate.innerText = array_code["TMP"].value;
element_probability.innerText = array_code["POP"].value;
element_wind.innerText = array_code["WSD"].value;
let img_src = "./icons/";
if (array_code["PTY"].value == "0") {
img_src += conv_sky(array_code["SKY"].value) + ".svg";
} else {
img_src += conv_pty(array_code["PTY"].value) + ".svg";
}
element_img.src = img_src;
element_date.innerText = base_date + " " + base_time.slice(0, -2) + "시";
}마지막으로 open api로 값을 가져왔을 때 draw()를 실행시키기 위해
load_api()함수 마지막에 draw()함수를 실행
function load_api() {
fetch(url)
.then((response) => response.json())
.then((data) => {
...
console.table(array_code);
draw();
});
}'JAVASCRIPT' 카테고리의 다른 글
| javascript) 룰렛 만들기 (0) | 2022.08.20 |
|---|---|
| jfif와 jpeg(jpg)의 차이 (0) | 2022.08.17 |
| javascript) 기상청 Open API를 이용한 날씨 위젯 만들기 4 (0) | 2022.08.13 |
| javascript) 기상청 Open API를 이용한 날씨 위젯 만들기 2 (0) | 2022.08.13 |
| javascript) 기상청 Open API를 이용한 날씨 위젯 만들기 1 (0) | 2022.08.13 |