# Week2 Quiz
### Q1.
- reference:
`http://spartacodingclub.shop/sparta_api/seoulbike`
#### desired outcome
; `http://spartacodingclub.shop/ajaxquiz/02_1`
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660379026852/K2o5kFkzq.png align="left")
When the button is clicked, it shows the current status of the bikes and changes the color of the location where there are fewer than 5 bikes red.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660379079612/ozUjeGp1U.png align="left")
- To begin, create a file called `ajax02.html` and copy and paste the code below.
```
JQuery 연습하고 가기!
jQuery + Ajax의 조합을 연습하자!
2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기
모든 위치의 따릉이 현황을 보여주세요
업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.
거치대 위치
거치대 수
현재 거치된 따릉이 수
102. 망원역 1번출구 앞
22
0
103. 망원역 2번출구 앞
16
0
104. 합정역 1번출구 앞
16
0
```
- copy and paste Ajax code below under `function q1`
```
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "여기에URL을입력",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
```
```
```
- update the URL in `
```
- Do the test.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660379671397/4D9iWSmka.png align="left")
We need a row data.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660379724613/unKp7EZ1F.png align="left")
```
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660379836496/ihDprDEpZ.png align="left")
- add `for statement`
```
```
- Let's see the result in Console.
`console.log(name, rack, bike)`
```
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660380210899/YlkHBdeA2.png align="left")
- If it works well, we need to see this in the page instead of Console. For this, we need to change,
```
console.log(name, rack, bike)
```
to
```
let temp_html = ``
```
> in those back ticks, we need to add `
` to the list called `names-q1`
```
```
- To make it stop adding to the existing list, add the code below
`$('#names-q1').empty()`
```
```
#### Let's make it show the number of bikes fewer than 5 in red.
- add `class="urgent"`
```
```
Now it shows all the data in red.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660381637313/3qhLg0S12.png align="left")
- to solve it, add `let temp_html =` and `if` statement.
```
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660381828606/8MuEf3jJq.png align="left")
#### Answer.
```
JQuery 연습하고 가기!