Create a Dynamic To-Do List App with Flask: Step-by-Step Guide (2026)

In this tutorial, you'll learn how to build a dynamic to-do list application using Flask, SQL, CSS, JavaScript, and HTML. We'll guide you through creating a Google Keep-style interface with tick boxes and a feature to store the list's current price in a database. This project is perfect for honing your full-stack development skills and understanding how different web technologies integrate.

Key Takeaways

• Set up a Flask application with PyCharm for backend development.
• Create a dynamic user interface using HTML, CSS, and JavaScript.
• Integrate a SQL database to store and manage your to-do items.
• Implement tick boxes and calculate the total price of list items.

Prerequisites

Before starting, ensure you have the following installed on your system:

• Python 3.10 or later
• Flask 2.3.x
• SQLite (or another SQL database)
• PyCharm IDE (Community or Professional)
• Basic understanding of HTML, CSS, JavaScript, and Python

Step 1: Set Up Your Flask Project in PyCharm

First, open PyCharm and create a new Flask project. This setup will provide a structured environment for your application development.

from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)

def create_app():
    app = Flask(__name__)
    return app

if __name__ == '__main__':
    app.run(debug=True)

This code initializes a basic Flask application. Running it will start a development server on localhost.

Step 2: Define Your Database Schema

Using SQLAlchemy, a popular ORM for Flask, create a database model to store tasks. Each task will include a description, completion status, and price.

from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///tasks.db'
db = SQLAlchemy(app)

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    description = db.Column(db.String(200), nullable=False)
    completed = db.Column(db.Boolean, default=False)
    price = db.Column(db.Float, nullable=False)

This schema will allow us to track each task's state and associated price.

Step 3: Create the User Interface

Using HTML and CSS, build a simple front-end interface that resembles Google Keep's tick boxes. This UI will allow users to interact with the to-do list.

  
  To-Do List
  
    body { font-family: Arial, sans-serif; }
    .task { margin: 10px 0; }
    .completed { text-decoration: line-through; }
  


  My To-Do List
  
    
    
    Add Task
  
  
  

Step 4: Add JavaScript for Dynamic Interaction

Implement JavaScript to handle form submissions and dynamically update the task list.

document.getElementById('task-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const description = document.getElementById('description').value;
  const price = parseFloat(document.getElementById('price').value);
  addTask(description, price);
});

function addTask(description, price) {
  // Append task to the list
  const taskList = document.getElementById('task-list');
  const taskItem = document.createElement('div');
  taskItem.className = 'task';
  taskItem.innerHTML = ` ${description} - $${price.toFixed(2)}`;
  taskList.appendChild(taskItem);
}

function toggleCompletion(checkbox) {
  const task = checkbox.parentElement;
  task.classList.toggle('completed');
}

This script captures user input and updates the UI in real-time.

Step 5: Implement Backend Logic to Store Tasks

Handle task creation and storage in Flask's backend, ensuring data persistence across sessions.

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        description = request.form['description']
        price = float(request.form['price'])
        new_task = Task(description=description, price=price)
        db.session.add(new_task)
        db.session.commit()
        return redirect(url_for('index'))
    tasks = Task.query.all()
    return render_template('index.html', tasks=tasks)

This code snippet handles POST requests to add tasks to the database.

Step 6: Display Task List from Database

Fetch tasks from the database to populate the task list on the frontend.

@app.route('/')
def index():
    tasks = Task.query.order_by(Task.id).all()
    return render_template('index.html', tasks=tasks)

The index function retrieves all tasks, ordered by their ID, for display.

Common Errors/Troubleshooting

• Database Connection Error: Ensure your database URI is correct and the database is initialized properly.
• Incorrect Form Handling: Verify the form input names in HTML match those expected in your Flask routes.
• JavaScript Errors: Use browser developer tools to debug and identify issues in your JavaScript code.

Conclusion

By following this guide, you've built a dynamic to-do list app using Flask and integrated various technologies to create a seamless experience. This project not only enhances your understanding of full-stack development but also provides a foundation for more complex applications.

Frequently Asked Questions

What is Flask used for?

Flask is a micro web framework for Python, used to build web applications with ease. It is lightweight and modular, making it adaptable to developers' needs.

How do I connect a SQL database to a Flask app?

You can connect SQL databases to Flask using SQLAlchemy, an ORM that allows you to interact with databases using Python objects.

Why use PyCharm for Flask development?

PyCharm provides powerful tools for Python development, including code completion, debugging, and version control, which streamline Flask app development.