Skip to main content

Build a Simple Todo App with Python (Flask Guide)

· 4 min read
Jesus Paz
Jesus Paz
Python Expert & Solo Founder Empowering Developers

Are you overwhelmed with tasks and struggling to keep track of them? If so, you're not alone. Many of us find it challenging to manage our daily responsibilities effectively. That's where a todo app comes in handy! In this blog post, we will guide you step-by-step in building a simple todo application using Python and Flask. By the end, not only will you have a functional app, but you'll also feel empowered to manage your tasks more efficiently. So, let's dive in and create something great!

What You’ll Need​

Before we begin, ensure you have the following tools set up:

  • Python 3.x
  • Flask – a lightweight web framework for Python
  • Basic knowledge of HTML and CSS is a plus, but not necessary!

Step 1: Setting Up Your Environment​

First, let’s set up our development environment:

  1. Install Flask: In your terminal, run the command: 
    pip install Flask
  2. Create a Project Folder: Name it todo_app.
  3. Create a New File: Name it app.py in your project folder.

Step 2: Your First Flask App​

Open app.py in a text editor and write the following code:

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

todo_list = []

@app.route('/')
def home():
    return render_template('index.html', todos=todo_list)

@app.route('/add', methods=['POST'])
def add_todo():
    todo = request.form.get('todo')
    if todo:
        todo_list.append(todo)
    return redirect('/')

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

Explanation of the Code​

  • Flask Imports: Here we are importing necessary modules from Flask.
  • The Flask Application: We set up a simple application instance.
  • Todo List: A simple list to store our todos.
  • Routes: We set up a home route and an add route to manage our todos.

Step 3: Creating Your HTML Template​

Next, create a folder called templates, then inside it, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Todo App</title>
</head>
<body>
    <h1>My Todo List</h1>
    <form action="/add" method="POST">
        <input type="text" name="todo" placeholder="Enter your task" required>
        <button type="submit">Add</button>
    </form>
    <ul>
        {% for todo in todos %}
            <li>{{ todo }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Explanation of the HTML​

  • Form Submission: Users can submit their tasks through this form.
  • Task List: Each todo item is displayed in a list format.

Step 4: Styling Your App​

To make your app visually appealing, create a styles.css file in a /static folder:

body {
    font-family: Arial, sans-serif;
}
h1 {
    text-align: center;
}
form {
    text-align: center;
    margin-bottom: 20px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: #f4f4f4;
    margin: 5px 0;
    padding: 10px;
}

Final Touches​

  1. Run Your Application: In your terminal, go to your project folder and run: 
    python app.py
  2. Open Your Browser: Go to http://127.0.0.1:5000/ to see your todo app in action!

Frequently Asked Questions​

What is Flask?

Flask is a lightweight web framework for Python that allows you to easily build web applications.

How do I run a Flask app?

You can run a Flask app by using the command python app.py in your terminal, where app.py is your main application file.

Can I deploy my Flask app?

Yes, you can deploy your Flask app using platforms like Heroku, PythonAnywhere, or AWS.

Is this todo app scalable?

This basic example is not designed for scalability, but you can enhance it by using a database to store todos.

Do I need to know Python to build this app?

Basic knowledge of Python is helpful but not strictly necessary, as the guide is intended to be beginner-friendly.

Conclusion​

Congratulations! You've just built a simple todo application using Python and Flask. You've learned how to set up a Flask app, create HTML templates, and style your application. Now it’s time to enhance your app further by adding features like editing or deleting todos. Don't forget to share your new skill with others, and keep coding! Happy programming!