Project 2: Habit Tracker: Completing habits (+82, -6)

            
                
            
            index 20c4b6e..ad5b4c3 100644
--- a/curriculum/section10/lectures/06_completing_habits/start/app.py
+++ b/curriculum/section10/lectures/06_completing_habits/end/app.py
@@ -1,8 +1,10 @@
 import datetime
-from flask import Flask, render_template, request
+from collections import defaultdict
+from flask import Flask, render_template, request, redirect, url_for
 
 app = Flask(__name__)
 habits = ["Test habit"]
+completions = defaultdict(list)
 
 
 @app.context_processor
@@ -26,10 +28,21 @@ def index():
         "index.html",
         habits=habits,
         selected_date=selected_date,
+        completions=completions[selected_date],
         title="Habit Tracker - Home",
     )
 
 
+@app.route("/complete", methods=["POST"])
+def complete():
+    date_string = request.form.get("date")
+    date = datetime.date.fromisoformat(date_string)
+    habit = request.form.get("habitName")
+    completions[date].append(habit)
+
+    return redirect(url_for("index", date=date_string))
+
+
 @app.route("/add", methods=["GET", "POST"])
 def add_habit():
     if request.form:
        

            
                
            
            index f2a5fd8..be0a511 100644
--- a/curriculum/section10/lectures/06_completing_habits/start/static/css/main.css
+++ b/curriculum/section10/lectures/06_completing_habits/end/static/css/main.css
@@ -129,3 +129,50 @@ centered within the allotted space */
   flex-direction: column;
   align-items: center;
 }
+
+.habit {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 26px;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #fff2d8;
+  border: 3px solid black;
+  border-radius: 6px;
+}
+
+.habit:not(.completed) {
+  padding: 0;
+}
+
+.habit:not(.completed):hover {
+  background-color: #e9cd87;
+}
+
+.habit__icon {
+  width: 1em;
+  height: 1em;
+}
+
+.habit__name {
+  margin: 0;
+}
+
+.habit__form {
+  width: 100%;
+}
+
+.habit__button {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 20px;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
        

            
                
            
            index 5b835af..c58b354 100644
--- a/curriculum/section10/lectures/06_completing_habits/start/templates/index.html
+++ b/curriculum/section10/lectures/06_completing_habits/end/templates/index.html
@@ -3,11 +3,27 @@
 {% block main_content %}
     <section class="habit-list">
     {% for habit in habits %}
-        <div class="habit">
-            <p class="habit__name">
-                {{ habit }}
-            </p>
-        </div>
+        {% set completed = habit in completions %}
+        {% if completed %}
+            <div class="habit completed">
+                <p class="habit__name">
+                    {{ habit }}
+                </p>
+                <svg class="habit__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+            </div>
+        {% else %}
+            <div class="habit">
+                <form method="POST" class="habit__form" action="{{ url_for('complete') }}">
+                <input type="hidden" id="habitName" name="habitName" value="{{ habit }}" />
+                <input type="hidden" id="date" name="date" value="{{ selected_date }}" />
+                <button type="submit" class="habit__button">
+                        {{ habit }}
+                </button>
+                </form>
+            </div>
+        {% endif %}
     {% endfor %}
     </section>
 {% endblock %}