public.html

2026-02-14 03:59:32 +00:00
parent 00ac3d84cd
commit a5600a63ea
1 changed files with 71 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -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>