145 lines
3.4 KiB
HTML
145 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Notes App</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial;
|
|
background: #f4f4f4;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
padding: 25px;
|
|
width: 420px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
.input-box {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 20px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
background: #e9ecef;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10px;
|
|
color: green;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>Notes App</h1>
|
|
|
|
<div class="input-box">
|
|
<input type="text" id="noteInput" placeholder="Enter your note">
|
|
<button onclick="addNote()">Add</button>
|
|
</div>
|
|
|
|
<div id="status" class="status"></div>
|
|
|
|
<ul id="notesList"></ul>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const API_URL = "http://127.0.0.1:5000";
|
|
async function fetchNotes() {
|
|
try {
|
|
const res = await fetch(API_URL + "/notes");
|
|
const data = await res.json();
|
|
|
|
const list = document.getElementById("notesList");
|
|
list.innerHTML = "";
|
|
|
|
if (data.length === 0) {
|
|
list.innerHTML = "<li>No notes yet</li>";
|
|
return;
|
|
}
|
|
|
|
data.forEach(note => {
|
|
const li = document.createElement("li");
|
|
li.textContent = "ID: " + note.id + " | " + note.content;
|
|
list.appendChild(li);
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
async function addNote() {
|
|
const input = document.getElementById("noteInput");
|
|
const status = document.getElementById("status");
|
|
|
|
if (!input.value.trim()) return;
|
|
|
|
try {
|
|
await fetch(API_URL + "/notes", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
content: input.value
|
|
})
|
|
});
|
|
|
|
status.textContent = "Saved to database ✅";
|
|
|
|
input.value = "";
|
|
fetchNotes();
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
status.textContent = "Error saving ❌";
|
|
}
|
|
}
|
|
|
|
// Load notes on page load
|
|
fetchNotes();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |