subodh/simple-node
1
0
Fork 0
forked from gitea_admin/simple-node
Code Pull Requests Activity

frontend-public

Browse Source
This commit is contained in:
gitea_admin
2026-02-14 04:00:12 +00:00
parent a5600a63ea
commit 44644a7739
1 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/public/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Todo App</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
#todo-list { list-style: none; padding: 0; }
li { margin: 5px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
</style>
</head>
<body>
<h1>Todo List</h1>
<div id="error-message" style="color: red; margin-bottom: 10px;"></div>
<input type="text" id="todo-input" placeholder="New task...">
<button onclick="addTodo()">Add Task</button>
<ul id="todo-list"></ul>
<script src="/config.js"></script>
<script>
const API_URL = `${window.BACKEND_URL}/api/todos`;
const errorDiv = document.getElementById('error-message');
async function fetchTodos() {
try {
const response = await fetch(API_URL);
if (!response.ok) throw new Error('Failed to fetch todos');
const todos = await response.json();
const list = document.getElementById('todo-list');
list.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
li.textContent = todo.task;
list.appendChild(li);
});
errorDiv.textContent = '';
} catch (err) {
console.error(err);
errorDiv.textContent = 'Error: Could not connect to backend.';
}
}
async function addTodo() {
const input = document.getElementById('todo-input');
const task = input.value;
if (!task) return;
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ task })
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || 'Failed to add todo');
}
input.value = '';
fetchTodos();
errorDiv.textContent = '';
} catch (err) {
console.error(err);
errorDiv.textContent = 'Error: ' + err.message;
}
}
fetchTodos();
</script>
</body>
</html>