Building a simple HTML page that uses an open API to tell you today's weather.
1. Create an HTML file.
2. Type "html" + Enter to set up the basic frame.
3. With the mouse, select a region between the body tags and click "Add to Chat".
4. In the Chat area, type in what you want to build.
5. Copy and paste the code.
6. Sign up for the site it pointed you to, get an API key, and put it in.
7. Run the code in a browser.
8. Enter a more detailed prompt in the Chat screen, like the one below:
Take the previous code and 1. Use CSS so that the screen shows 'Today's weather in Suwon: {weather info}' as a centered title, and make the map appear as a card occupying the center 60% of the screen. 2. Next to the words "weather info," show an owm-weather-icon, and add code that displays the weather info and the wind speed alongside it.
Full code
<! DOCTYPE html >
< html >
< head >
< style >
body {
display : flex ;
flex-direction : column ;
align-items : center ;
}
#title {
text-align : center ;
font-size : 2em ;
margin-top : 20px ;
}
.map {
height : 60vh ;
width : 60% ;
margin : 20px 0 ;
border : 1px solid black ;
}
#hourlyForecast , #dailyForecast {
width : 60% ;
height : 60vh ;
}
.ol-attribution {
display : none ;
}
</ style >
</ head >
< body >
< div id = "title" ></ div >
< div id = "map" class = "map" ></ div >
< div id = "airPollution" ></ div >
< canvas id = "hourlyForecast" ></ canvas >
< canvas id = "dailyForecast" ></ canvas >
< script >
var apiKey = 'f770c934b0cb93b54e8c96cd14995682' ;
var city = 'Suwon,KR' ;
// 오늘의 날씨 정보 가져오기
. then ( function ( resp ) { return resp . json () })
. then ( function ( data ) {
document . getElementById ( 'title' ). innerHTML = '오늘의 수원 날씨: <img src="' + weatherIcon + '"> ' + data . weather [ 0 ]. main + ', 바람 세기: ' + data .wind. speed ;
var lat = data .coord. lat ;
var lon = data .coord. lon ;
// 대기 오염 정보 가져오기
. then ( function ( resp ) { return resp . json () })
. then ( function ( data ) {
document . getElementById ( 'airPollution' ). innerHTML = '대기 오염 지수: ' + data . list [ 0 ].main. aqi ;
})
. catch ( function () {
console . log ( "error" );
});
// 7일간의 날씨 예보 가져오기
. then ( function ( resp ) { return resp . json () })
. then ( function ( data ) {
var forecastDiv = document . getElementById ( 'forecast' );
for ( var i = 0 ; i < 7 ; i ++) {
var day = data . daily [ i ];
forecastDiv . innerHTML += '<p>Day ' + ( i + 1 ) + ': ' + day . weather [ 0 ]. main + '</p>' ;
}
// 시간당 예보 그래프 그리기
var ctx = document . getElementById ( 'hourlyForecast' ). getContext ( '2d' );
new Chart ( ctx , {
type : 'line' ,
data : {
labels : data .hourly. map (( _ , i ) => i + '시간 후' ),
datasets : [{
label : '온도 (°C)' ,
data : data .hourly. map ( h => h . temp - 273.15 ),
borderColor : 'rgb(255, 99, 132)' ,
yAxisID : 'y' ,
}, {
label : '강수 확률 (%)' ,
data : data .hourly. map ( h => h . pop * 100 ),
borderColor : 'rgb(54, 162, 235)' ,
yAxisID : 'y1' ,
}]
},
options : {
scales : {
y : {
beginAtZero : true
},
y1 : {
beginAtZero : true
}
}
}
});
// 8일간 예보 그래프 그리기
var ctx = document . getElementById ( 'dailyForecast' ). getContext ( '2d' );
new Chart ( ctx , {
type : 'line' ,
data : {
labels : data .daily. map (( _ , i ) => i + '일 후' ),
datasets : [{
label : '온도 (°C)' ,
data : data .daily. map ( d => d .temp. day - 273.15 ),
borderColor : 'rgb(255, 99, 132)' ,
yAxisID : 'y' ,
}, {
label : '강수 확률 (%)' ,
data : data .daily. map ( d => d . pop * 100 ),
borderColor : 'rgb(54, 162, 235)' ,
yAxisID : 'y1' ,
}]
},
options : {
scales : {
y : {
beginAtZero : true
},
y1 : {
beginAtZero : true
}
}
}
});
})
. catch ( function () {
console . log ( "error" );
});
// 지도 표시하기
var map = new ol. Map ({
target : 'map' ,
layers : [
new ol.layer. Tile ({
source : new ol.source. OSM ()
})
],
view : new ol. View ({
center : ol.proj. fromLonLat ([ lon , lat ]),
zoom : 10
})
});
})
. catch ( function () {
console . log ( "error" );
});
</ script >
</ body >
</ html >
