66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Notes App</title>
|
|
<style>
|
|
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; }
|
|
h1 { color: #333; }
|
|
textarea { width: 100%; height: 80px; box-sizing: border-box; }
|
|
button { margin-top: 8px; padding: 8px 16px; cursor: pointer; }
|
|
ul { list-style: none; padding: 0; }
|
|
li { display: flex; justify-content: space-between; align-items: flex-start;
|
|
border-bottom: 1px solid #eee; padding: 10px 0; }
|
|
li span { flex: 1; white-space: pre-wrap; }
|
|
li small { color: #999; font-size: 0.8em; display: block; }
|
|
.del { background: #e55; color: #fff; border: none; border-radius: 4px;
|
|
padding: 4px 10px; cursor: pointer; margin-left: 12px; }
|
|
#status { color: red; margin-top: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>📝 Notes App</h1>
|
|
<textarea id="content" placeholder="Write a note..."></textarea><br/>
|
|
<button onclick="addNote()">Add Note</button>
|
|
<p id="status"></p>
|
|
<ul id="notes"></ul>
|
|
|
|
<script>
|
|
async function loadNotes() {
|
|
const res = await fetch('/api/notes');
|
|
const notes = await res.json();
|
|
const ul = document.getElementById('notes');
|
|
ul.innerHTML = notes.map(n => `
|
|
<li>
|
|
<div><span>${escHtml(n.content)}</span><small>${n.created_at}</small></div>
|
|
<button class="del" onclick="deleteNote(${n.id})">✕</button>
|
|
</li>`).join('');
|
|
}
|
|
|
|
async function addNote() {
|
|
const ta = document.getElementById('content');
|
|
const content = ta.value.trim();
|
|
if (!content) return;
|
|
const res = await fetch('/api/notes', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({content})
|
|
});
|
|
if (res.ok) { ta.value = ''; loadNotes(); }
|
|
else document.getElementById('status').textContent = 'Error adding note.';
|
|
}
|
|
|
|
async function deleteNote(id) {
|
|
await fetch('/api/notes/' + id, {method: 'DELETE'});
|
|
loadNotes();
|
|
}
|
|
|
|
function escHtml(s) {
|
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
|
|
loadNotes();
|
|
</script>
|
|
</body>
|
|
</html>
|