스파르타 코딩 2주차 수업에서는 자바스크립트에서 Ajax와 jQuery를 이용하여 오픈 api의 값들을 가져다 실시간 데이터 스트리밍을 만들어 보았다.
첫번째, 업데이트 버튼을 누르면 실시간 서울의 구단위 미세먼지 상태를 볼 수 있다.
이 중, 80이상인 곳은 빨간색으로 표기해준다.
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
console.log(response);
let rows = response['RealtimeCityAir']['row'];
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
if (gu_mise >= 90) {
let temp_html_bad = `<li class="bad">${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html_bad);
} else {
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html);
}
}
}
});
}
</script>
<body>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</body>
두번째, 업데이트 버튼을 누르면 서울시 따릉이의 대수 현황을 보여준다.
5대 이하로 남은 스테이션은 빨간색으로 표기해준다.
let rows = response['getStationList']['row'];
for (let i = 0; i < rows.length; i++) {
let locationID = rows[i]['stationName'];
let bikes = rows[i]['parkingBikeTotCnt'];
let rack = rows[i]['rackTotCnt'];
if (bikes <=5 ){
let temp_html_urgent = `<tr class="urgent">
<td>${locationID}</td>
<td>${rack}</td>
<td>${bikes}</td>
</tr>`
$('#names-q1').append(temp_html_urgent);
} else {
let temp_html = `<tr>
<td>${locationID}</td>
<td>${rack}</td>
<td>${bikes}</td>
</tr>`
$('#names-q1').append(temp_html);
그리고 세번째, 이건 좀 귀엽다.
버튼을 클릭하면 새로운 고양이 사진을 무한정 보여준다.
let url = response[0]['url'];
$('#img-cat').attr("src", url);
그리고 대망의 숙제 프로젝트
파란색 글씨로 쓰여있는 것은 원-달러 환율을 나타낸다.
페이지가 새로고침될 때마다 자동으로 환율을 새로고침하여 보여준다.
<script>
$(document).ready(function () {
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate'];
let temp_html = `<p>exchange rate : ${rate}원/$`
$('#exchange').append(temp_html);
}
});
}
</script>
'TIL(today i learned)' 카테고리의 다른 글
| [project][unity c#] 칵테일 퍼즐게임 만들기 (0) | 2022.08.05 |
|---|---|
| [project] 지니음악 실시간 인기 차트 스크래핑 (0) | 2022.05.29 |
| [project] 상품판매 페이지 만들기 (html/css) (0) | 2022.05.28 |
| [project] 웹 포트폴리오 JS 완주 (0) | 2022.05.28 |
| [project] 웹 포트폴리오_JS_디버깅 (0) | 2022.05.28 |
