Building a Web-based To-Do List App
Building a Web-based To-Do List App
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.