Introduction

Creating a to-do list app is a great way to learn web development and project organization. In this guide, we'll explore how to build a web-based to-do list app using Flask, a Python web framework. You'll learn how to set up your app, create a database to store tasks, handle user interactions, and display tasks in a user-friendly interface. By following this guide, you'll have the knowledge and code to build your own to-do list app that can be expanded with features like user accounts, task categorization, and more advanced styling.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and creating a directory structure. Here's a sample structure:

to-do-list-app/
    app.py
    templates/
        index.html

Step 2: Creating the To-Do List App

Create a Flask application for the to-do list app. Here's an example of the Python code:

# app.py
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)
class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.String(200), nullable=False)
    completed = db.Column(db.Boolean, default=False)
@app.route('/')
def index():
    tasks = Task.query.all()
    return render_template('index.html', tasks=tasks)
@app.route('/add_task', methods=['POST'])
def add_task():
    task_content = request.form.get('content')
    if task_content:
        new_task = Task(content=task_content)
        db.session.add(new_task)
        db.session.commit()
    return redirect('/')
@app.route('/complete_task/<int:id>')
def complete_task(id):
    task = Task.query.get(id)
    if task:
        task.completed = True
        db.session.commit()
    return redirect('/')
@app.route('/delete_task/<int:id>')
def delete_task(id):
    task = Task.query.get(id)
    if task:
        db.session.delete(task)
        db.session.commit()
    return redirect('/')
if __name__ == '__main__':
    db.create_all()
    app.run(debug=True)

Step 3: Creating HTML Templates

Create an HTML template for the to-do list app. Here's an example:

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>To-Do List App</title>
</head>
<body>
    <header>
        <h1>To-Do List</h1>
    </header>
    <section>
        <h2>Add a Task</h2>
        <form method="POST" action="/add_task">
            <input type="text" name="content" placeholder="Task description" required>
            <button type="submit">Add</button>
        </form>
    </section>
    <section>
        <h2>Tasks</h2>
        <ul>
            {% for task in tasks %}
                <li>
                    {% if not task.completed %}
                        <span>{{ task.content }}</span>
                        <a href="/complete_task/{{ task.id }}">Complete</a>
                    {% else %}
                        <del>{{ task.content }}</del>
                        <a href="/delete_task/{{ task.id }}">Delete</a>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </section>
</body>
</html>

Step 4: Running Your To-Do List App

Run your Flask to-do list app using the following command:

python app.py

Access your to-do list app in a web browser, add tasks, mark tasks as complete, and delete completed tasks.


Conclusion

Building a web-based to-do list app with Flask is a valuable project for learning web development and project organization. By following the steps in this guide, you can set up your app, create a database for storing tasks, handle user interactions, and display tasks in a user-friendly interface. This project can serve as a starting point for more advanced task management features, including user accounts, task categorization, and custom task sorting.