<!DOCTYPE html>
<html lang="en">
<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>
<!-- jQuery 문법을 사용하기 위한 CDN($)-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>현재 날씨는?</h1>
<div id="container"></div>
<button onclick="getData()">날씨가져오기</button>
<script>
function getData(){
$.ajax({
url : 'http://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495',
type : 'get',
success : function(res){
$('#container').append(`<p>현재온도 : ${res.main.temp}</p>`)
$('#container').append(`<p>최고온도 : ${res.main.temp_max}</p>`)
$('#container').append(`<p>최저온도 : ${res.main.temp_min}</p>`)
},
error : function(){
alert('error!')
}
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Chart js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#myChart{
width: 400px !important;
height: 400px !important;
}
</style>
</head>
<body>
<h1>현재 날씨는?</h1>
<button onclick="getData()">데이터 가져오기</button>
<div id="container"></div>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="./main.js"></script>
</body>
</html>
function getData(){
$.ajax({
url : 'http://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495',
type : 'get',
success : function(res){
$('#container').append(`<p>현재온도 : ${res.main.temp}</p>`)
$('#container').append(`<p>최고온도 : ${res.main.temp_max}</p>`)
$('#container').append(`<p>최저온도 : ${res.main.temp_min}</p>`)
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // 차트의 형태(bar, line, pie 등)
data: {
// x축 데이터
labels: ['현재온도', '최고온도', '최저온도'],
datasets: [{
label: '# of Votes',
// x축 대응 데이터
data: [res.main.temp,res.main.temp_max,res.main.temp_min],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
},
error : function(){
alert('error!')
}
})
}
