웹개발종합반 2주차 - Quiz_Ajax 연습하기(1) / Quiz_Ajax 연습하기(2)
2022. 1. 2. 13:07ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
Quiz_Ajax 연습하기(1)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
</style>
<script>
function q1() {
$('#names-q1').empty() // 이게 없으면 names-ql뒤에 temp-html이 끊임없이 붙게된다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let station_name = rows[i]['stationName']
let total = rows[i]['rackTotCnt']
let current = rows[i]['parkingBikeTotCnt']
let temp_html = `
<tr>
<td>${station_name}</td>
<td>${total}</td>
<td>${current}</td>
</tr>
` // 어떤 형식으로 붙일건지
$('#names-q1').append(temp_html) // names-ql 뒤에 temp_html을 붙여넣기.
}
}
})
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- 현재 거치된 따릉이 수가 5대 미만일 경우 빨간색 진한글씨로 표시하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.lack {
color : red;
font-weight: bold;
}
</style>
<script>
function q1() {
$('#names-q1').empty() // 이게 없으면 names-ql뒤에 temp-html이 끊임없이 붙게된다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let station_name = rows[i]['stationName']
let total = rows[i]['rackTotCnt']
let current = rows[i]['parkingBikeTotCnt']
let temp_html = `` // 선택적으로 글씨를 빨간색으로 하기위해 일단 비워서 선언
if (current < 5) {
temp_html = `<tr class = "lack">
<td>${station_name}</td>
<td>${total}</td>
<td>${current}</td>
</tr>` // 70보다 크면 bad클라스에 설정된 스타일넣기
} else {
temp_html = `<tr>
<td>${station_name}</td>
<td>${total}</td>
<td>${current}</td>
</tr>` // 아니면 스타일없는 리스트에 넣기
}// 어떤 형식으로 붙일건지
$('#names-q1').append(temp_html) // names-ql 뒤에 temp_html을 붙여넣기.
}
}
})
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Quiz_Ajax 연습하기(2)
랜덤 고양이 사진 API를 이용하기
고양이 Open API
https://api.thecatapi.com/v1/images/search
리스트의 형태로 넘어온다
0번째의 url이 이미지 데이터
"jquery 이미지 변경"을 구글링 하자
https://chlee21.tistory.com/138
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시
이미지를 클릭 시 이미지 변경 예시 room image1 설명 click : 요소를 클릭했을 때 이벤트가 발생하는 함수 이미지를 클릭할 때마다 이미지가 바뀌게 되는 예제이다. 숫자형 변수에 0으로 초기화해
chlee21.tistory.com
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let image = response[0]['url'];
$('#img-cat').attr("src",image); // img-cat id안의 src 데이터를 "image"로 변경
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
</html>'코딩공부 > 스파르타코딩클럽 - 웹개발종합반' 카테고리의 다른 글
| 웹개발종합반 3주차 - 3주차 설치 / 3주차 오늘 배울 것 / 연습 겸 복습 - 나홀로메모장에 OpenAPI 붙여보기 (0) | 2022.01.02 |
|---|---|
| 웹개발종합반 2주차 - 숙제 : 쇼핑몰에 환율 정보 넣어주기 (0) | 2022.01.02 |
| 웹개발종합반 2주차 - Ajax 시작하기 / Ajax 함께 연습하기 (0) | 2022.01.02 |
| 웹개발종합반 2주차 - 서버-클라이언트 통신 이해하기 (0) | 2022.01.01 |
| 웹개발종합반 2주차 - JQuery 적용하기(나홀로메모장) / Quiz_JQuery 연습하기 (0) | 2021.12.31 |