Todo list app using Flask | Python

Last Updated :15 May, 2020

There are many frameworks that allow building your webpage using Python, like Django, flask, etc. Flask is a web application framework written in Python. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine. Its modules and libraries that help the developer to write applications without writing the low-level codes such as protocols, thread management, etc.In this article, we will learn how to make a todo list app using the Flask framework. In this app, you can add your todo items and mark them as complete or incomplete.Installation:

 pip install Flask

Basic setup :Step 1: First make basic folders

mkdir app && cd app && mkdir static && mkdir templates

Step 2: Make some basic python files to write the code and name it as you desire.Step 3:Run the below command to start the server

touch run.py the app

Step 4: Change directory toapp-

 cd app

Step 5: create models.py for database, routes.py for urls/views and __init__ file to package our app

 touch models.py routes.py __init__.py

Step 6: Gototemplates/ directory and create index.html file

 cd templates && touch index.html

Step 7:Gotostatic/ directory and create main.css

 cd static && touch main.css

Now, open the project folder using a text editor. The directory structure should look like this :

run.py file

Python3

fromappimportappif__name__=='__main__':app.run(debug=True)

app/__init__.py file

Python3

fromflaskimportFlaskfromflask_sqlalchemyimportSQLAlchemyimportosfile_path=os.path.abspath(os.getcwd())+"/todo.db"app=Flask(__name__)app.config['SQLALCHEMY_DATABASE_URI']='sqlite:///'+file_pathdb=SQLAlchemy(app)fromappimportroutes

app/routes.py file

Python3

fromflaskimportrender_template,request,redirect,url_forfromappimportappfromapp.modelsimportTodofromappimportdb@app.route('/')defindex():incomplete=Todo.query.filter_by(complete=False).all()complete=Todo.query.filter_by(complete=True).all()returnrender_template('index.html',incomplete=incomplete,complete=complete)@app.route('/add',methods=['POST'])defadd():todo=Todo(text=request.form['todoitem'],complete=False)db.session.add(todo)db.session.commit()returnredirect(url_for('index'))@app.route('/complete/<id>')defcomplete(id):todo=Todo.query.filter_by(id=int(id)).first()todo.complete=Truedb.session.commit()returnredirect(url_for('index'))

app/models.py file

Python3

fromappimportdbclassTodo(db.Model):id=db.Column(db.Integer,primary_key=True)text=db.Column(db.String(200))complete=db.Column(db.Boolean)def__repr__(self):returnself.text

app/main.html

html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Todo App</title><linkrel="stylesheet"type="text/css"href="{{url_for('static', filename='main.css')}}"></head><body><h1>Todo List</h1><div>Add a new todo item:<formaction="{{ url_for('add') }}"method="POST"><inputtype="text"name="todoitem"><inputtype="submit"value="Add Item"class="button"></form></div><div><h2>Incomplete Items</h2><ul>             {% for todo in incomplete %}<listyle="font-size: 30pt"class='mark'>{{ todo.text }}<ahref="{{ url_for('complete', id=todo.id) }}">Mark As Complete</a></li>             {% endfor %}</ul><h2>Completed Items</h2><ul>             {% for todo in complete %}<listyle="font-size: 30pt">{{ todo.text }}</li>             {% endfor %}</ul></div></body></html>