Tasks App - Flask SQLAlchemy sqlite3
A simple tasks app using Flask sqlalchemy and sqlite3 and also sqlite studio
from flask import Flask, render_template, url_for, request, redirect
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///task.sqlite3'
db = SQLAlchemy(app)
class Task(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String(200))
done = db.Column(db.Boolean)
@app.route('/')
def home():
tasks = Task.query.all()
return render_template('index.html', tasks = tasks)
@app.route('/create-task', methods=['POST'])
def create():
new_task = Task(content=request.form['content'], done= False)
db.session.add(new_task)
db.session.commit()
return redirect(url_for('home'))
@app.route('/done/')
def done(id):
task = Task.query.filter_by(id=int(id)).first()
task.done = not(task.done)
db.session.commit()
return redirect(url_for('home'))
@app.route('/delete/')
def delete(id):
Task.query.filter_by(id=int(id)).delete()
db.session.commit()
return redirect(url_for('home'))
if __name__ == '__main__':
app.run(debug=True)
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tasks App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- MAIN CSS -->
<link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
</head>
<body>
<main class="container p-4">
<h1 class="display-4 text-center title mt-4">Tasks App - Flask SQLAlchemy</h1>
<div class="row">
<div class="col-md-4 offset-md-4 my-auto">
<div class="card">
<div class="card-header">
<form action="/create-task" method="POST">
<div class="form-group">
<input type="text" name="content" placeholder="Task" class="form-control" autofocus>
</div>
<button type="submit" class="btn btn-primary btn-block">Save</button>
</form>
</div>
<div class="card-body">
<ul class="list-group">
{% for task in tasks %}
<li class="list-group-item">
<span class="{% if task.done %} done {% endif %}">{{task.content}}</span> <a
href="/done/{{task.id}}" class="btn btn-success btn-sm">Done</a>
<a href="{{url_for('delete', id=task.id)}}" class="btn btn-danger btn-sm">Delete</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
//main.css
body {
background: #C9D6FF; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #000;
}
.title {
font-family: 'Open+Sans', cursive;text-transform:normal;
}
.done {
text-decoration: line-through;
color: #cfcfcf;
}
