python-geeks · pawangeek · Oct 8, 2020 · Oct 8, 2020 · Oct 8, 2020 · Oct 8, 2020
diff --git a/To-Do-List/README.md b/To-Do-List/README.md
@@ -0,0 +1,10 @@
+# To-Do List
+A to-do list application made using Python's flask framework
+
+# Usage
+Run the script in the terminal and access http://localhost:5000 in your web browser to view the application
+
+# Requirements
+- install the flask module as: pip install flask
+- install the flask_sqlalchemy module as: pip install flask_sqlalchemy
+- install sqlite if required
diff --git a/To-Do-List/app.py b/To-Do-List/app.py
@@ -0,0 +1,70 @@
+from flask import Flask, render_template, request, flash, redirect
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite://'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+app.secret_key = 'any random secret'
+db = SQLAlchemy(app)
+
+
+class TODO(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.String(200), nullable=False)
+    date_created = db.Column(db.DateTime, default=datetime.utcnow)
+
+    def __repr__(self):
+        return '<Task %r>' % self.id
+
+
+@app.route('/', methods=['POST', 'GET'])
+def hello():
+    db.create_all()
+    if request.method == 'POST':
+        task = request.form['content']
+        new_task = TODO(content=task)
+        try:
+            db.session.add(new_task)
+            db.session.commit()
+            flash('Successfully added!')
+            return redirect('/')
+        except Exception:
+            flash('An error occurred')
+            return redirect('/')
+    else:
+        tasks = TODO.query.order_by(TODO.date_created).all()
+        return render_template("toDoListTemplate.html", tasks=tasks)
+
+
+@app.route('/delete/<int:id>')
+def delete(id):
+    task = TODO.query.get_or_404(id)
+    try:
+        db.session.delete(task)
+        db.session.commit()
+        flash('Successfully deleted')
+        return redirect('/')
+    except Exception:
+        flash('An error occurred')
+        return redirect('/')
+
+
+@app.route('/modify/<int:id>', methods=['POST', 'GET'])
+def modify(id):
+    task = TODO.query.get_or_404(id)
+    if request.method == 'POST':
+        task.content = request.form['content']
+        try:
+            db.session.commit()
+            flash("Successfully updated")
+            return redirect('/')
+        except Exception:
+            flash("An error occurred")
+            return redirect('/')
+    else:
+        return render_template("toDoListTemplate.html", tasks=task)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/To-Do-List/static/styles.css b/To-Do-List/static/styles.css
@@ -0,0 +1,19 @@
+.content{
+    text-align: center;
+    display: inline-block;
+    overflow-x: auto;
+}
+body{
+    font-family:Abel;
+    text-align: center;
+    background-color:azure;
+}
+#modifyTask{
+    text-align:left;
+}
+a:link {
+    color: blue;
+}
+a:visited{
+    color: blue;
+}
diff --git a/To-Do-List/templates/toDoListTemplate.html b/To-Do-List/templates/toDoListTemplate.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% block head %}
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {% endblock %}
+</head>
+<body>
+    {% block body %} 
+    <div class="content">
+        {% with msg=get_flashed_messages() %}
+        {% if msg %}
+        {% for message in msg %}
+        {{ message }}
+        <br />
+        {% endfor %}
+        {% endif %}
+        {% endwith %}
+        <h1>To-Do List</h1>
+        <br />
+        <form action="/" method="POST">
+            <input type="text" name="content" id="content">
+            <input type="submit" value="Add Task">
+        </form>
+        <br />
+        <table class="table table-striped table-hover table-bordered table-sm">
+            {% if tasks %}
+            <tr>
+                <th style="width: 200px"> Task </th>
+                <th style="width: 100px"> Added </th>
+                <th style="width: 100px"> Actions </th>
+            </tr>
+            {% for task in tasks %}
+            <tr>
+                <td> {{ task.content }} </td>
+                <td> {{ task.date_created.date() }} </td>
+                <td>
+                    <a href="/delete/{{ task.id }}">Delete</a>
+                    <br>
+                    <a href="" data-toggle="modal" data-target="#modifyTask" id="modify{{ task.id }}">Update</a>
+                </td>
+            </tr>
+            <script>
+                $('#modify{{ task.id }}').click(function()
+                      {
+                        $('#modifyForm').attr('action', 'http://localhost:5000/modify/{{ task.id }}');
+                        $('#modifyTask').modal();
+                      });
+            </script>
+            {% endfor %}
+            {% else %}
+            No items in list
+            {% endif %}
+        </table>
+        <br />
+        <br />
+    </div>
+    <div class="modal fade" id="modifyTask" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLongTitle">Update Task</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <form id="modifyForm" method="POST">
+                <div class="form-group-row">
+                  <label class="col-form-label">Enter updated task:</label>
+                  <input type="text" name="content" class="form-control">
+                </div>
+                <br />
+                <div class="modal-footer">
+                  <button type="submit" class="btn btn-primary">Enter</button>
+                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endblock %}
+</body>
+</html>