This is the whole js code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Manager (Vanilla JS + PHP + MySQL)</title>
<style>
body { font-family: Arial; margin: 30px; }
form { margin-bottom: 20px; }
input { padding: 5px; width: 200px; }
button { padding: 5px 10px; }
li { margin: 8px 0; }
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h2>Task Manager</h2>
<form id="taskForm">
<input type="text" id="taskInput" placeholder="Enter new task" required>
<button type="submit">Add</button>
</form>
<ul id="taskList"></ul>
<script>
const taskForm = [Link]("taskForm");
const taskInput = [Link]("taskInput");
const taskList = [Link]("taskList");
[Link]("DOMContentLoaded", loadTasks);
async function loadTasks() {
const res = await fetch("task_db.php");
const tasks = await [Link]();
[Link] = "";
[Link](addTaskToDOM);
[Link]("submit", async e => {
[Link]();
const name = [Link]();
if (!name) return;
const res = await fetch("task_db.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ name })
});
const task = await [Link]();
addTaskToDOM(task);
[Link] = "";
});
function addTaskToDOM(task) {
const li = [Link]("li");
[Link] = [Link];
[Link] = task.is_done == 1 ? "done" : "";
const checkbox = [Link]("input");
[Link] = "checkbox";
[Link] = task.is_done == 1;
[Link] = () => toggleDone([Link], [Link], li);
const span = [Link]("span");
[Link] = " " + [Link] + " ";
const del = [Link]("button");
[Link] = "❌";
[Link] = () => deleteTask([Link], li);
[Link](checkbox);
[Link](span);
[Link](del);
[Link](li);
async function deleteTask(id, li) {
await fetch(`task_db.php?id=${id}`, { method: "DELETE" });
[Link]();
async function toggleDone(id, done, li) {
await fetch("task_db.php", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: [Link]({ id, is_done: done ? 1 : 0 })
});
[Link]("done");
</script>
</body>
</html>