{창} 사전 과제 - 웹개발 종합반 2주차
javascript를 더 쉽게 사용할 수 있는 jQuery와, ajax를 통해 서버 통신을 하는 법까지 다뤘다.
1주차 과제로 만들었던 팬명록 페이지에, 서울시의 날씨 정보를 api로 실시간으로 받아와 출력하는 것을 추가했다. 여기에 추가로 처음에는 댓글이 하나도 없다가, 댓글을 달 때마다 밑으로 쌓이는 것을 추가했다.
댓글 카드를 만드는 html을 코드를 jQuery 문법으로 append 하도록 했는데 왜인지 부트스트랩 스타일이 적용이 되질 않는다. 흠.. 시간이 없으니 일단 넘어가본다..
<!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>웹개발 종합반 | 2주차 과제</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
position: relative;
width: 100%;
margin: 0;
padding-top:15%;
padding-bottom:15%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbizaL4%2FbtqDah57DaS%2F8IWOjkHjJKKefOEpDekaC0%2Fimg.gif");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 3% auto 0px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 1%;
}
.mybutton {
margin-top: 2%
}
.myquote {
max-width: 500px;
width: 95%;
margin: 3% auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
padding: 1%;
}
</style>
<script>
function showInput() {
let nickname = $("#nickname").val()
let comment = $("#comment").val()
let temp_html = `
<div class="myquote">
<div className="card">
<div className="card-body">
<blockquote className="blockquote mb-0">
<p>${nickname}</p>
<footer className="blockquote-footer"><p>${comment}</p></footer>
</blockquote>
</div>
</div>
</div>`
$('#quotespace').append(temp_html)
}
</script>
<script>
$(document).ready(function weather() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp_html = `${response['temp']}`
$('#temp').append(temp_html)
}
})
});
</script>
</head>
<body>
<div class="mytitle">
<h1>스텔라장 팬명록</h1>
<p>현재기온 : <span id="temp"></span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nickname" placeholder="닉네임">
<label for="nickname">닉네임</label>
</div>
<div class="form-floating">
<textarea type="text" class="form-control" id="comment" placeholder="응원댓글"></textarea>
<label for="comment">응원댓글</label>
</div>
<div class="mybutton">
<button type="button" onclick="showInput()" class="btn btn-dark">응원 남기기</button>
</div>
</div>
<div id="quotespace">
</div>
</body>
</html>
홈텐딩하는 데이터사이언티스트 - 스파르타 중입니다
temp_html 안에 class를 className으로 잘못 적어서 스타일 적용이 안되었다..