1주차에 만들었던 이무진님의 팬명록 재활용 ㅎㅎ
페이지 로딩이 완료되면, 날씨 api를 이용해서 날씨를 표시해야 하는 게 과제!
말로만 들었을 땐 엄청 어려울 것 같았는데 직접 해보니 그렇게 어렵지는 않았다 ㅎㅎㅎ
역시 백문이 불여일견이라는 말이 괜히 있는 건 아니다
원래 과제는 날씨 정보만 표기하면 되는 거였지만 날씨 아이콘까지 넣어주고 싶었던 나는 실시간 날씨에 따라 아이콘이 변하는 기능까지 추가해줬다 ㅎㅎㅎ
아이콘 색감이 너무 쨍해서 촌스럽지만 레트로라고 우기면 그만이니 넘어가고 뿌듯한 실습이었다~~~
<!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>이무진 팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
body{
background-color: gray;
}
.mytitle {
color: white;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img-lb.joynews24.com/image_joy/202012/1608537951892_1_172552.jpg");
background-size: 100%;
background-position: center 20%;
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.postbox {
border-radius: 10px;
box-shadow: 0px 0px 3px 0px black;
width: 500px;
height: 300px;
padding: 20px;
margin: 20px auto 20px auto;
background-color: black;
}
.buttons {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: right;
}
.card-body {
border-radius: 10px;
box-shadow: 0px 0px 3px 0px black;
width: 500px;
margin: 20px auto 20px auto;
background-color: white;
}
.card-body:hover{
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let url = response['url']
let temp = response['temp']
$('#icon').attr("src", url)
$('#temp').text(temp)
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>이무진 팬명록</h1>
<p><img id="icon" width="40" src="http://openweathermap.org/img/w/10d.png"/> 현재기온 : <span id="temp">00.00</span>도</p>
</div>
<div class="postbox">
<div class="mypost">
<div class="row row-cols-1 row-cols-md-1 g-4">
<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="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
</div>
<div class="buttons">
<button type="button" class="btn btn-secondary">응원 남기기</button>
</div>
</div>
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 짱이에여</p>
<footer class="blockquote-footer"> 은평구 고라니
<ite title="Source Title"></cite>
</footer>
</blockquote>
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 짱이에여</p>
<footer class="blockquote-footer"> 은평구 고라니
<ite title="Source Title"></cite>
</footer>
</blockquote>
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 짱이에여</p>
<footer class="blockquote-footer"> 은평구 고라니
<ite title="Source Title"></cite>
</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>