80 lines
2.4 KiB
HTML
80 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Items CRUD App</title>
|
|
<style>
|
|
body { font-family: Arial; padding: 2rem; }
|
|
input, button { margin: 5px; padding: 0.5rem; }
|
|
ul { list-style-type: none; padding: 0; }
|
|
li { margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Items List (CRUD)</h1>
|
|
|
|
<input type="text" id="name" placeholder="Item name" />
|
|
<input type="text" id="description" placeholder="Description" />
|
|
<button onclick="createItem()">Add Item</button>
|
|
|
|
<ul id="item-list"></ul>
|
|
|
|
<script>
|
|
const API_BASE = "http://localhost:8000/v1";
|
|
|
|
async function fetchItems() {
|
|
const res = await fetch(`${API_BASE}/items`);
|
|
const items = await res.json();
|
|
const list = document.getElementById("item-list");
|
|
list.innerHTML = "";
|
|
items.forEach(item => {
|
|
const li = document.createElement("li");
|
|
li.innerHTML = `
|
|
<strong>${item.name}</strong>: ${item.description}
|
|
<button onclick="deleteItem(${item.id})">Delete</button>
|
|
<button onclick="editItem(${item.id}, '${item.name}', '${item.description}')">Edit</button>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
async function createItem() {
|
|
const name = document.getElementById("name").value;
|
|
const description = document.getElementById("description").value;
|
|
await fetch(`${API_BASE}/items/`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name, description })
|
|
});
|
|
document.getElementById("name").value = "";
|
|
document.getElementById("description").value = "";
|
|
fetchItems();
|
|
}
|
|
|
|
async function deleteItem(id) {
|
|
await fetch(`${API_BASE}/items/${id}`, { method: "DELETE" });
|
|
fetchItems();
|
|
}
|
|
|
|
function editItem(id, currentName, currentDesc) {
|
|
const newName = prompt("New name:", currentName);
|
|
const newDesc = prompt("New description:", currentDesc);
|
|
if (newName && newDesc) {
|
|
updateItem(id, newName, newDesc);
|
|
}
|
|
}
|
|
|
|
async function updateItem(id, name, description) {
|
|
await fetch(`${API_BASE}/items/${id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name, description })
|
|
});
|
|
fetchItems();
|
|
}
|
|
|
|
|
|
fetchItems();
|
|
</script>
|
|
</body>
|
|
</html> |