This is a simple web-based To-Do List application implemented in Go. The application supports adding, updating, and deleting tasks. It uses an HTML template for rendering the user interface and stores tasks in a JSON file.
- View the list of tasks
- Add a new task
- Update an existing task
- Delete a task
- Tasks are persisted in a JSON file
- Go 1.16 or later
git clone <repository-url>
cd <repository-directory>No additional dependencies need to be installed.
.
├── main.go
├── tasks.json
├── templates
│ ├── index.templ
│ └── todo.templ
├── static
│ └── script.js
└── README.md
Ensure a tasks.json file exists in the root directory. This file is used to store the tasks. If it doesn't exist, it will be created upon starting the application.
Example content of tasks.json:
[
{
"id": 1,
"text": "Sample Task 1"
},
{
"id": 2,
"text": "Sample Task 2"
}
]go run main.goThe application will start a web server on localhost:8080.
Open a web browser and navigate to http://localhost:8080.
Renders the main page showing the list of tasks.
Handles adding a new task. Expects a POST request with a text field.
Handles deleting a task. Expects a POST request with an id field.
Handles updating a task. Expects a POST request with id and text fields.
Main template rendering the list of tasks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.7.0"></script>
<script src="/static/script.js"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center">
<h1 class="text-2xl font-bold text-gray-800 mt-10">To-Do List</h1>
<form id="addTaskForm" hx-post="/add" hx-target="#tasks" hx-swap="beforeend" class="my-6">
<input type="text" name="text" placeholder="New task" required class="p-2 border border-gray-300 rounded">
<button type="submit" class="p-2 bg-green-500 text-white rounded hover:bg-green-600">Add Task</button>
</form>
<ul id="tasks" class="w-96">
{{range .}}
{{template "task" .}}
{{end}}
</ul>
</body>
</html>