반응형
1. 날짜 Date() 활용하기
2. ajax 로 api 불러오기
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).ready(() => {
var date = new Date();
console.log(date.getDay());
$("#current_date").append(
date.getFullYear().toString() +
"년 " +
(date.getMonth() + 1) +
"월 " +
date.getDate().toString() +
"일 " +
date.getHours() +
":00"
);
jQuery.ajax({
type: "GET",
url: "http://localhost:3300/v1/~~~~",
data: {},
datatype: "JSON",
success: function (obj) {
showList(obj.chartList, "dom-list");
},
});
jQuery.ajax({
type: "GET",
url: "http://localhost:3300/v1/~~~~~~",
data: {},
datatype: "JSON",
success: function (obj) {
showList(obj.chartList, "over-list");
},
});
$(".tabSelc").on("click", function (e) {
$(this).css("color", "red");
$(".tabSelc").not($(this)).css("color", "#000");
var target_id = $(this).attr("id");
if (target_id == "domestic-tab") {
$("#dom-list").show();
$("#over-list").hide();
} else {
$("#dom-list").hide();
$("#over-list").show();
}
});
});
function showList(dataList, type) {
dataList.sort(function (a, b) {
// 오름차순
return a.rank < b.rank ? -1 : a.rank > b.rank ? 1 : 0;
});
$.each(dataList, function (index, item) {
// 데이터 =item
$("#" + type).append(
"<div class='song' id='" +
type +
"-song" +
index +
"' style='display: flex;'></div>"
);
$("#" + type + "-song" + index).append(
"<input class='songId' type='hidden' value='" + item.id + "'/>"
);
$("#" + type + "-song" + index).append(
"<p class='rank'>" + item.rank + "</p> "
);
$("#" + type + "-song" + index).append(
"<img src='/images/" + item.imageUrl + "'>"
);
$("#" + type + "-song" + index).append(
"<p class='title' onclick='moveToDetail(" +
item.id +
");'>" +
item.title +
"</p> "
);
$("#" + type + "-song" + index).append(
"<p class='singer' style='margin-left:auto;'>" +
item.singer +
"</p> "
);
});
}
function moveToDetail(id) {
console.log("test 1234 : ");
location.href = "detail.html?id=" + id;
}
</script>
<h1 style="text-align: center">음악 차트</h1>
<h2 id="current_date" style="text-align: center"></h2>
<div id="contents" style="width: 500px; margin: auto">
<div id="tab" style="text-align: center">
<span class="tabSelc" id="domestic-tab" style="color: red"> 국내 </span>
<span class="tabSelc" id="overseas-tab"> 해외 </span>
</div>
<div id="dom-list"></div>
<div id="over-list" style="display: none"></div>
</div>
</body>
</html>
detail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).ready(() => {
var homeURL = new URL(location.href);
var urlParam = homeURL.searchParams;
var id = urlParam.get("id");
console.log(id);
jQuery.ajax({
type: "GET",
url: "http://localhost:3300/v1/chart/detail/" + id,
data: {},
datatype: "JSON",
success: function (obj) {
showDetail(obj.chart);
},
});
});
function showDetail(dataList) {
$("#title").append(dataList.title);
$("#singer").append(dataList.singer);
$("#contents").append("<div id='lyrics' style='display: flex;'></div>");
$("#lyrics").append("<p style='width: 100px;'>작사</p>");
$("#lyrics").append("<p>" + dataList.lyricist + "</p>");
$("#contents").append("<div id='melody' style='display: flex;'></div>");
$("#melody").append("<p style='width: 100px;'>작곡</p>");
$("#melody").append("<p>" + dataList.melodizer + "</p>");
$("#contents").append("<div id='genre' style='display: flex;'></div>");
$("#genre").append("<p style='width: 100px;'>장르</p>");
$("#genre").append("<p>" + dataList.genre + "</p>");
}
function moveToBack() {
location.href = "/index.html";
}
</script>
<div class="title">
<img id="back" src="/images/back_arrow.png" onclick="moveToBack();" />
<h1 id="title" style="text-align: center"></h1>
<h2 id="singer" style="text-align: center"></h2>
</div>
<div id="contents" style="width: 500px; margin: auto"></div>
</body>
</html>반응형
'프론트엔드' 카테고리의 다른 글
| 스벨트로 리스트&상세화면 구현하기 (0) | 2022.06.20 |
|---|---|
| 자바스크립트 & 제이쿼리로 리스트 구현하기 22 (0) | 2022.06.20 |
| [리액트] useState() vs useReducer() (0) | 2022.03.06 |
| Cannot find module 'node-sass' 에러 해결 ! (간단!) (0) | 2022.02.08 |
| 술 도수 변환기. 술 도수 계산기 사이트 (1) | 2021.12.23 |