HTML - 웹문서
배운걸 응용해서 웹문서 api 도 다뤄보았다. content(간략한 글내용과), title 그리고 url 주소가 포함되었다. class box를 줘서 보기편하게해주었다. 이전, 다음 버튼이있고 다른 문서를 검색해볼수도있다. 뭔가 부실하고 고칠점많아보이지만 대충기능을 구현했다. 더추가해볼수있도록 하겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹검색</title>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<style>
.box{
color: white;
border: 2px solid #FFD662;
margin: 20px;
padding: 10px;
}
</style>
</head>
<body>
<div id = "page">
<div id ="top">
<h1>웹검색</h1>
</div>
<div id ="center">
<div id ="webInfo">
<center style="color: white; margin-top:4px;">
<input type "text" placeholder="검색어" id="query" value="쇼펜하우어">
검색수: <span id ="total"></span>개
</center>
</div>
<div id ="webs"></div>
<script id="temp" type="text/x-handlebars-template">
<div class="box">
<div class ="contents"></div>
<div class ="title"></div>
<div class ="url"></div>
</div>
</script>
<div id = "buttons">
<button id ="prev">이전</button>
<span id ="curpage" style="color: white;">1</span>
<button id ="next">다음</button>
</div>
</div>
<div id ="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
let page=1;
let query =$("#query").val();
getBooks();
$("#query").on("keydown",function(e){
if(e.keyCode==13){
page=1;
query=$("#query").val();
getBooks();
}
});
$("#prev").on("click", function(){
page--;
getBooks();
});
$("#next").on("click", function(){
page++;
getBooks();
});
function getBooks(){
$.ajax({
type: "get",
dataType: "json",
url :"https://dapi.kakao.com/v2/search/web",
headers : {"Authorization":"KakaoAK 193051f169ac39caccb56939e29dd9a5"}, //아무나사용하지못하도록(생성한사람만사용가능)
data:{"query" : query, "size":5, "page":page},
success:function(data){
let template = Handlebars.compile($("#temp").html());
$("#webs").html(template(data));
$("#total").html(data.meta.pageable_count);
$("#curpage").html(page);
if(page==1){
$("#prev").attr("disabled", true);
}else {
$("#prev").attr("disabled", false);
}
let is_end=data.meta.is_end;
if(is_end){
$("#next").attr("disabled", true);
}else {
$("#next").attr("disabled", false);
}
}
});
};
</script>
</html>
댓글남기기