#패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #11일차
댓글 목록이 표시되는 UI 만들기
UI에서 아이콘을 사용하기 위해 fontawesome을 사용한다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
cdn방식으로 사용할 것이므로 cdnjs에서 fontaswome을 검색하여 link를 index.html에 삽입한다.
https://cdnjs.com/libraries/font-awesome
font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make
cdnjs.com
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /><!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HN client</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script src="app.js" type="module"></script>
</body>
</html>뉴스목록에 tailwindcss와 fontawesome을 사용하여 UI를 만들어 보자
function newsFeed () {
const newsFeed = getData(NEWS_URL);
const newsList = [];
let template = `
<div class="bg-gray-600 min-h-screen">
<div class="bg-white text-xl">
<div class="mx-auto px-4">
<div class="flex justify-between items-center py-6">
<div class="flex justify-start">
<h1 class="font-extrabold">Hacker News</h1>
</div>
<div class="items-center justify-end">
<a href="#/page/{{__prev_page__}}" class="text-gray-500">Previous</a>
<a href="#/page/{{__next_page__}}" class="text-gray-500 ml-4">Next</a>
</div>
</div>
</div>
</div>
<div class="p-4 text-2xl text-gray-700">
{{__news_feed__}}
</div>
</div>
`;
for (let i = ((store.currentPage - 1) * 10); i < store.currentPage * 10; i++) {
newsList.push(`
<div class="p-6 bg-white mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
<div class="flex">
<div class="flex-auto">
<a href="#/show/${ newsFeed[i].id }">${ newsFeed[i].title }</a>
</div>
<div class="text-center text-sm">
<div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">${ newsFeed[i].comments_count }</div>
</div>
</div>
<div class="flex mt-3">
<div class="grid grid-cols-3 text-sm text-gray-500">
<div><i class="fas fa-user mr-1"></i>${ newsFeed[i].user }</div>
<div><i class="fas fa-heart mr-1"></i>${ newsFeed[i].points }</div>
<div><i class="fas fa-clock mr-1"></i>${ newsFeed[i].time_ago }</div>
</div>
</div>
</div>
`);
}
template = template.replace('{{__news_feed__}}', newsList.join(''));
template = template.replace('{{__prev_page__}}', store.currentPage > 1 ? store.currentPage - 1 : 1);
template = template.replace('{{__next_page__}}', store.currentPage < newsFeed.length / 10 ? store.currentPage + 1 : newsFeed.length / 10)
container.innerHTML = template
}
상태를 가져보자. 읽은 글 표시하기
'Javascript' 카테고리의 다른 글
| Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 9일차 (0) | 2021.11.09 |
|---|---|
| Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 10일차 (0) | 2021.11.08 |
| Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 8일차 (0) | 2021.11.08 |
| Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 7일차 (0) | 2021.11.07 |
| Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 6일차 (0) | 2021.11.06 |
