반응형
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="/static/js/index.js"></script>
</head>
<body>
<h1 style="text-align: center;">음악차트</h1>
<p id="date" style="text-align: center;"></p>
<span id="domestic">국내</span>
<span id="overseas">해외</span>
<table id="chartlist" style="width: 100%; table-layout:fixed;">
</table>
</body>
</html>
index.js
window.onload = function(){
let today = new Date();
let date = '${today.getFullYear()}년 ${today.getMonth()}월
${today.getDay()}일 ${today.getHours()}:00';
let p_date = document.getElementById("date");
p_date.append(date);
let domestic = document.getElementById("domestic");
let overseas = document.getElementById("overseas");
domestic.addEventListener("click", function() {
domestic.style.color = "red";
overseas.style.color = 'black';
listChart("domestic");}
);
overseas.addEventListener("click", function() {
domestic.style.color = "black";
overseas.style.color = 'red';
listChart("overseas");
});
domestic.click();
}
function listChart(country) {
fetch("http://localhost:3300/v1/chart/" + country)
.then(res => res.json())
.then(res => {
let table = document.getElementById("chartlist");
let list = res.chartList
table.innerHTML = "";
for (let i = 0; i < list.length; i++) {
let row = '< tr>
< td style='width: 20px;'>${list[i].id}< /td>
< td style='width: 200px; text-align: left;'>< image src='/static/images/${list[i].imageUrl}'< /td>
< td style='text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow:hidden'>${list[i].title}< /td>
< td style='text-align: right; white-space: nowrap; text-overflow: ellipsis; overflow:hidden'>< a href="detail.html?id=${list[i].id}">${list[i].singer}< /td>
< /tr>'
table.innerHTML += row;
}
});
}
detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="/static/js/detail.js"></script>
</head>
<body>
<h1 id="title" style="text-align: center;"></h1>
<p id="singer" style="text-align: center;"></p>
<table id="detaillist" style="width: 100%;">
</table>
</body>
</html>
detail.js
window.onload = function(){
let id = getParameterByName("id");
listChart(id);
}
function listChart(id) {
fetch("http://localhost:3300/v1/chart/detail/" + id)
.then(res => res.json())
.then(res => {
let table = document.getElementById("detaillist");
let chart = res.chart;
table.innerHTML = "";
document.getElementById("title").append(chart.title);
document.getElementById("singer").append(chart.singer);
let row = '< tr style='text-align: center'>
< td style='text-align: right'>작사< /td>
< td style='text-align: left;'>${chart.lyricist}< /td>
< /tr>
< tr>
< td style='text-align: right;'>작곡< /td>
< td style='text-align: left;'>${chart.melodizer}< /td>
< /tr>
< tr>
< td style='text-align: right;'>장르< /td>
< td style='text-align: left;'>${chart.genre}< /td>
< /tr>
< /tr>'
table.innerHTML += row;
});
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}반응형
'프론트엔드' 카테고리의 다른 글
| [번역] 마이크로 프론트엔드의 장단점 micro frontends pros and cons (0) | 2022.11.08 |
|---|---|
| 스벨트로 리스트&상세화면 구현하기 (0) | 2022.06.20 |
| 자바스크립트 & 제이쿼리로 리스트 구현하기 (0) | 2022.06.20 |
| [리액트] useState() vs useReducer() (0) | 2022.03.06 |
| Cannot find module 'node-sass' 에러 해결 ! (간단!) (0) | 2022.02.08 |