List of Todo Apps with Flask | python

Python Methods and Functions

In this article, we will learn how to create a task list application using the Flask framework. In this application, you can add your tasks and mark them as complete or incomplete.

Installation :

 pip install Flask 

1 . Create a main python application file as app.py and write the code.

from flask import Flask, render_template, request, redirect, url_for

from flask_sqlalchemy import SQLAlchemy 

 

app = Flask (__ name__)

####### Database #######

 

app.config [ 'SQLALCHEMY_DATABASE_URI' ] = ' sqlite: ////home/somil/Desktop/todo/todo.db '

 

db = SQLAlchemy (app)

 

class Todo (db.Model):

id = db.Column (db.Integer, primary_key = True )

text = db.Column (db.String ( 200 ))

  complete = db.Column (db.Boolean)

 
###### Route when no URL is specified ######

@ app . route ( '/' )

def index ():

  incomplete = Todo.query.filter_by (complete = False ). all ()

complete = Todo.query. filter_by (complete = True ). all ()

 

return render_template ( ' index.html'

incomplete = incomplete, complete = complete)

  
###### Adding items # #####

@ app . route ( ' / add' , methods = [ 'P OST' ])

def add ( ):

todo = Todo (text = request.form [ 'todoitem' ], complete = False )

db.session.add (todo )

db.session.commit ()

 
###### makes you stay on the same home page ######

return redirect (url_for ( 'index' ))

  
###### Complete items ######

@ app . route ( '/ complete / & lt; id & gt;' )

def complete ( id ):

  

todo = Todo.query. filter_by ( id = int ( id )). first ()

todo.complete = True

db.session.commit ()

##### # makes you stay on the same home page ######

 

return redirect (url_for ( ' index' ))

 

if __ name__ = = '__main__' :

app.run (debug = True )

2. Create a part of the user interface using HTML. Give the layout to the application

& lt;! DOCTYPE html & gt; 

& lt; html lang = "en" & gt; 

& lt; head & gt; 

& lt; meta charset = "UTF-8" & gt; 

& lt; title & gt; Todo App & lt; / title & gt; 

& lt; link rel = "stylesheet" type = "text / css" href = "{{url_for (' static', filename = 'main.css')}}" & gt; 

 

& lt; / head & gt; 

& lt; body & gt; 

& lt; h1 & gt; Todo List & lt; / h1 & gt; 

& lt; div & gt; Add a new todo item: 

& lt ; form action = " {{url_for ('add')}}" method = " POST " & gt; 

& lt; input type = "text" name = "todoitem" & gt; 

& lt; input type = "submit" value = "Add Item" class = "button" & gt; 

& lt; / form & gt; 

& lt; / div & gt; 

& lt; div & gt; 

& lt; h2 & gt; Incomplete Items & lt; / h2 & gt; 

& lt; ul & gt; 

{% for todo in incomplete%}

& lt; li style = "font-size: 30pt" class = 'mark' & gt; {{todo.text}} & lt; a href = "{{ url_for ('complete', id = todo.id)}}" & gt; Mark As Complete & lt; / a & gt; & lt; / li & gt; 

{% endfor%} 

& lt; / ul & gt; 

& lt; h2 & gt; Completed Items & lt; / h2 & gt; 

& lt; ul & gt; 

{% for todo in complete%}

& lt; li style = "font-size: 30pt" & gt; {{todo. text}} & lt; / li & gt; 

{% endfor%}

& lt; / ul & gt; 

& lt; / div & gt; 

& lt; / body & gt; 

& lt; / html & gt; 

3. Create static files like CSS and any others styles

body {

background: black; 

color: red; 

margin-top: 5px; 

}
. button {

color: green; 

}
. mark {font-size: 10px;}

After creating the files, create the database using sqlite3. Open the .db file created in your project file using sqlite3. 

Create a table in the database using the .tables command

Open python in terminal and import the database file created to create tables

Now run the app.py file on a terminal.

 python3 app.py 

Exit:





Tutorials