index.html
<!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>Document</title>
<link rel="stylesheet" href="./css/style.css">
<script defer src="./js/main.js"></script>
</head>
<body>
<div>
<div class="title">
<h3>Book List</h3>
</div>
<div class="yearsBtn">
<button class="btn" data-key="year" data-value="2021">
2021년도</button>
<button class="btn" data-key="year" data-value="2020">
2020년도</button>
<button class="btn" data-key="year" data-value="2019">
2019년도</button>
<button class="btn" data-key="year" data-value="2018">
2018년도</button>
</div>
<div class="tables">
<table class="table">
<tr>
<th>글쓴이</th>
<th>제목</th>
<th>년도</th>
</tr>
<tr>
<td class="writer">000</td>
<td class="title">000 000 000</td>
<td class="td_year">2000</td>
</tr>
</table>
</div>
</div>
</body>
</html>
js > main.js
function loadItems() {
return fetch('data/data.json')
.then(Response => Response.json())
.then(data => data.bookList);
}
function displayItems(bookList) {
const container = document.querySelector('.table');
container.innerHTML = "<tr><th>글쓴이</th><th>제목</th><th>년도</th></tr>"+
bookList.map(book => createHTMLString(book)).join("");
}
function createHTMLString(book) {
return `
<tr>
<td class="writer">${book.writer}</td>
<td class="title">${book.title}</td>
<td class="td_year">${book.year}</td>
</tr>
`
}
// 이벤트 설정
function setEventListerners(bookList) {
const buttons = document.querySelector('.yearsBtn');
const logo = document.querySelector('h3');
logo.addEventListener('click', () => displayItems(bookList));
buttons.addEventListener('click', event => onButtonClick(event, bookList));
}
// 버튼 클릭시 실행되는 함수
function onButtonClick(event, bookList) {
const dataset = event.target.dataset;
const key = dataset.key;
const value = dataset.value;
if(key == null || value == null) {
return;
}
const filterd = bookList.filter(book => book[key] === value);
console.log(filterd);
displayItems(filterd);
}
loadItems()
.then(bookList => {
console.log(bookList);
displayItems(bookList);
setEventListerners(bookList);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log('프로미스, finally 끝');
})
data > data.json
{
"bookList" : [
{
"writer" : "김공공",
"title" : "공공이의 일기",
"year" : "2021"
},
{
"writer" : "김일일",
"title" : "일일이의 일기",
"year" : "2021"
},
{
"writer" : "김이이",
"title" : "이이의 일기",
"year" : "2020"
},
{
"writer" : "김삼삼",
"title" : "삼삼이의 일기",
"year" : "2020"
},
{
"writer" : "김사사",
"title" : "사사의 일기",
"year" : "2019"
},
{
"writer" : "김오오",
"title" : "오오의 일기",
"year" : "2019"
},
{
"writer" : "김육육",
"title" : "공공이의 일기",
"year" : "2018"
},
{
"writer" : "김칠칠",
"title" : "공공이의 일기",
"year" : "2018"
}
]
}
css > style.css
body {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.yearsBtn button{
border: none;
outline: none;
cursor: pointer;
background-color: #222;
color: #fff;
padding: 10px 40px;
border-radius: 5px;
margin: 20px;
}
.tables table{
border-collapse: collapse;
width: 100%;
margin-top: 30px;
}
.tables table th {
border-top: 3px solid #111;
padding: 10px 0;
}
.tables table tr {
border-bottom: 1px solid #222;
}
.tables table td {
padding: 10px 0;
text-align: center;
}
