-
Notifications
You must be signed in to change notification settings - Fork 2
/
category(concept).html
139 lines (123 loc) · 4.45 KB
/
category(concept).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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>개념 포스트잇 모음집</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/category.css" />
</head>
<body>
<div class="title"><strong>개념</strong></div>
<button
class="custom-button"
id="button1"
value="1"
onclick="fetchConceptImportance(1)">
<img src="images/Group 15.svg" alt="Button 1" />
</button>
<button
class="custom-button"
id="button2"
value="2"
onclick="fetchConceptImportance(2)">
<img src="images/Group 16.svg" alt="Button 2" />
</button>
<button
class="custom-button"
id="button3"
value="3"
onclick="fetchConceptImportance(3)">
<img src="images/Group 17.svg" alt="Button 3" />
</button>
<div class="option">
<select id="sortDropdown" onchange="toggleOptions()">
<option value="0">중요도</option>
<option value="1">오름차순</option>
<option value="2">내림차순</option>
</select>
</div>
<div class="rectangles" id="rectangleContainer">
<!-- 동적으로 생성될 엘리먼트들이 들어갈 컨테이너 -->
</div>
<div class="widget">
<a class="image-button" href="home.html"
><img src="images/home.png" alt="이미지 1"
/></a>
<a class="image-button" href="category(concept).html"
><img src="images/개념.png" alt="이미지 2"
/></a>
<a class="image-button" href="category(quiz).html"
><img src="images/퀴즈.png" alt="이미지 3"
/></a>
<a class="image-button" href="category(wronganswer).html"
><img src="images/오답.png" alt="이미지 4"
/></a>
</div>
<script>
async function toggleOptions() {
var sortDropdown = document.getElementById("sortDropdown");
var selectedValue = sortDropdown.value;
if (selectedValue == 1) {
fetchConceptSort("asc");
} else if (selectedValue == 2) {
fetchConceptSort("desc");
}
}
let clientToken; // 토큰 값을 저장할 변수
async function getToken() {
try {
const response = await fetch("http://localhost:3000/token");
if (!response.ok) {
throw new Error("네트워크 응답이 올바르지 않습니다");
}
const data = await response.json();
clientToken = data.token; // 토큰 값 설정
} catch (error) {
console.error("토큰을 가져오는 중 오류 발생:", error);
throw error;
}
}
function createRectangle(description) {
const rectangle = document.createElement("div");
rectangle.classList.add("rectangle");
// 데이터를 이용하여 엘리먼트 내용을 동적으로 생성할 수 있음
rectangle.textContent = description; // 데이터의 description으로 변경
document.getElementById("rectangleContainer").appendChild(rectangle);
}
function fetchData(endpoint, order = "", importance = "") {
const serverUrl = "http://localhost:3000";
const query = `?token=${clientToken}${order ? `&order=${order}` : ""}${
importance ? `&importance=${importance}` : ""
}`;
fetch(`${serverUrl}${endpoint}${query}`)
.then((response) => response.json())
.then((data) => {
// 가져온 데이터를 이용하여 엘리먼트 생성
const container = document.getElementById("rectangleContainer");
container.innerHTML = ""; // 기존의 자식 엘리먼트 제거
data.forEach((item) => {
createRectangle(item.description);
});
})
.catch((error) => {
console.error("데이터를 가져오는 중 오류 발생:", error);
});
}
async function fetchConceptList() {
await getToken();
fetchData("/concept-list");
}
async function fetchConceptImportance(importance) {
await getToken();
fetchData("/concept-importance", "", importance);
}
async function fetchConceptSort(order) {
await getToken();
fetchData("/concept-sort", order);
}
fetchConceptList();
</script>
</body>
</html>