22412001/widuri-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit with read working

Browse Source
This commit is contained in:
Syahdan Hafiz Ashari 2025-06-10 11:34:08 +07:00
commit 4ce9f89fea
3 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css Normal file
View File

@ -0,0 +1,7 @@
body {
background-color: white;
}
section#members-table {
width: 50%;
}

32
index.html Normal file
View File

@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>API Client</title>
<link
href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<section id="members-table"></section>
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
<script src="js/voy.js"></script>
<script>
new gridjs.Grid({
columns: ["ID", "Name", "Phone"],
sort: true,
data: async () => {
const res = await voy("http://localhost:11000/api/read", "GET");
return res.data;
},
}).render(document.getElementById("members-table"));
</script>
</body>
</html>

12
js/voy.js Normal file
View File

@ -0,0 +1,12 @@
async function voy(url, method, data = null, contentType, authorization) {
const headers = { "Content-Type": contentType };
if (authorization) headers.Authorization = authorization;
const body =
data && contentType === "application/json" ? JSON.stringify(data) : data;
return await fetch(url, { method, headers, body }).then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
});
}