과제
1주차에 완성한 팬명록에 날씨 정보를 넣어주세요!
로딩이 완료되면,날씨API을 이용해서 날씨를 표시해주세요.
<견본>
<완성>
2022년 10월20일 오후 2시 50분 기준 서울 날씨
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>5호기 - 방명록 </title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7T1QSCYzk4IruFCvrMUS5lrqo2vuRbFSycg&usqp=CAU");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.posts {
/*background-color: green;*/
max-width: 500px;
width: 95%;
margin: 10px auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
padding: 20px;
}
.mybtns{
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin-top: 10px;
}
.leave{
max-width: 500px;
width: 95%;
margin: auto auto auto auto;
/*box-shadow: 0px 0px 3px 0px grey;*/
/*padding: 20px;*/
}
.card{
max-width: 500px;
width: 95%;
margin: 10px auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
}
</style>
</head>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
console.log(response)
let temp = response['temp']
console.log(temp)
$(`#temp`).text(temp)
}
})
});
</script>
<body>
<div class="mytitle">
<h1>과학 5호기 방명록</h1>
<p>현재 기온 : <span id ="temp">00.0도 </span>도 </p>
<!-- 위에다가 .text를 이용해서 바꾸어주기-->
</div>
<div class = "posts">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"
style="height: 100px"></textarea>
<!--hrml 부분에 왜 바로 height를 넣으면 되는지 잘 모르겠다.-->
<label for="floatingTextarea">내 생각</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">튜닝 남기기</button>
</div>
</div>
<div class = "leave">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>휠 19인치가 갑입니다.</p>
<footer class="blockquote-footer">동탄 캡틴아메리카
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>뭘 모르시네.</p>
<footer class="blockquote-footer">오산 번개돌이
</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>과학 5호기가 해봤자지</p>
<footer class="blockquote-footer">G70 오너
</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
배운점
1. 서버클라이언트 통신을 위한 A-jax를 이용하여 학습을 하였다.
API는 은행창구와 같이 요청자가 누구냐에 따라서 방식이 상이하다.
요청자의 요청에 타입은 GET / POST로 대별된다.
GET 은 데이터READ 하는 경우를 의미한다
2. 이러한 통신을 위한것이 Ajax이다.
Ajax에 받아온 실시간 API값을 지난주에 완성했던 과학5호기에 반영한다
3. 파이썬 등과 다르게 자바스크립립트에서 print()는 인쇄를 의미하는 것이 흥미롭다.
콘솔에 출력하는 것인줄 알았으나, 실제로는 반복문을 쓰니 무한 인쇄 및 출력 확인 창이 발생했다.
회고
1. 정적이지 않은 방식으로 페이지를 이제 만들수 있다는 점이 신기하다.
'배움 __IL > TIL 0기' 카테고리의 다른 글
| TIL - 자료표현과 변수 [221105] (0) | 2022.11.05 |
|---|---|
| [TIL-5] AWS로 서버 구매부터 실행 후 최종 배포까지 (0) | 2022.11.02 |
| TIL - 4 POST & GET 하기 (0) | 2022.10.28 |
| TIL-3 지니뮤직의 1~50위 곡을 스크래핑 (0) | 2022.10.28 |
| TIL - 1 (0) | 2022.10.18 |