https://developer.nytimes.com/docs/articlesearch-product/1/overview
https://developer.nytimes.com/docs/articlesearch-product/1/overview
developer.nytimes.com
우리는 위 링크 API를 이용하여 아래와 같은 요구사항을 만족하는 뉴스검색기를 만들어 보자.
일단 html을 이용하여 기본 틀을 만들어봅니다.
작성시 유의할점은 여러개의 속성이 있다면 class를 이용합니다.
<!DOCTYPE html>
<html lang="ko">
<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>Search News</title>
<script src="./main.js" type="module"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div>
<button id="clipedNews">Clip된 뉴스만 보기</button>
</div>
<input type="text" />
<div id="searchHistoryBox">
<p id="introduceKey">recent Keywords...</p>
<div id="recentKeyword"></div>
</div>
<div id="searchResult">
</div>
</body>
</html>
아직은 전혀 결과물과 똑같지 않은 모습입니다. 자 이제 CSS를 사용하여 꾸며봅시다.
* {
margin: 0;
padding: 0;
}
#searchResult{
margin-top:0px;
}
#searchHistoryBox{
display : none;
border-bottom : 1px solid black;
}
input {
width : 100%;
margin: 3px;
border-top: 1px black;
border-left: 1px black;
border-right: 1px black;
}
CSS까지 적용한 후의 모습입니다. 얼추 비슷해져가네요
다음 게시글에선 api 토큰을 발급받는방법과 api를 이용하여 기사를 받아오는 법을 게시해보겠습니다.
'JS' 카테고리의 다른 글
| 클로저 문제 정답 (0) | 2022.08.07 |
|---|---|
| 클로저 문제 (0) | 2022.08.07 |
| 함수형 프로그래밍 3탄 (0) | 2022.07.19 |
| 함수형 프로그래밍 2탄 (3) | 2022.07.15 |
| 함수 표현식과 선언식 (0) | 2022.07.15 |