(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{639:function(s,t,e){"use strict";e.r(t);var a=e(56),n=Object(a.a)({},(function(){var s=this,t=s.$createElement,e=s._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[e("h1",{attrs:{id:"completing-habits"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#completing-habits"}},[s._v("#")]),s._v(" Completing habits")]),s._v(" "),e("p"),e("div",{staticClass:"table-of-contents"},[e("ul",[e("li",[e("a",{attrs:{href:"#in-this-video-tl-dr"}},[s._v("In this video... (TL;DR)")])]),e("li",[e("a",{attrs:{href:"#code-written-in-this-lecture"}},[s._v("Code written in this lecture")])]),e("li",[e("a",{attrs:{href:"#resources"}},[s._v("Resources")])])])]),e("p"),s._v(" "),e("h2",{attrs:{id:"in-this-video-tl-dr"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#in-this-video-tl-dr"}},[s._v("#")]),s._v(" In this video... (TL;DR)")]),s._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[s._v("TIP")]),s._v(" "),e("p",[s._v("List of all code changes made in this lecture: "),e("a",{attrs:{href:"https://diff-store.com/diff/section10__06_completing_habits",target:"_blank",rel:"noopener noreferrer"}},[s._v("https://diff-store.com/diff/section10__06_completing_habits"),e("OutboundLink")],1)])]),s._v(" "),e("p",[s._v("Let's add habit completion so that our users can complete habits on the day they've got currently selected.")]),s._v(" "),e("p",[s._v("As part of this, we'll also write some CSS to improve the look of habits in the "),e("code",[s._v("index")]),s._v(" page.")]),s._v(" "),e("h2",{attrs:{id:"code-written-in-this-lecture"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#code-written-in-this-lecture"}},[s._v("#")]),s._v(" Code written in this lecture")]),s._v(" "),e("p",[s._v("There's a few things going on in this video!")]),s._v(" "),e("p",[s._v("Let's start by changing the "),e("code",[s._v("index.html")]),s._v(" template. We're going to make it so that the template rendering gets a list of habits that were completed on the currently selected day, as well as the list of habits themselves.")]),s._v(" "),e("p",[s._v("With that, we can check each habit to see if it's in the "),e("code",[s._v("completions")]),s._v(" list, which would tell us we've already completed it.")]),s._v(" "),e("p",[s._v("With that, we can do one of two things:")]),s._v(" "),e("ul",[e("li",[s._v("If the habit has been completed, show the habit as normal, with a checkbox icon beside it.")]),s._v(" "),e("li",[s._v("If the habit hasn't been completed, we'll change it slightly so it becomes a button that when clicked, marks the habit as complete for the day.")])]),s._v(" "),e("p",[s._v("The tricky part is going to be to style the normal habit and the form so similarly that it's impossible to tell them apart.")]),s._v(" "),e("p",[s._v("You'll see what I mean by the time we're done!")]),s._v(" "),e("p",[s._v("The form contains a hidden field with the habit name, and another with the current date. That way when we submit the form we can still access the necessary data in the backend.")]),s._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("--- templates/index.html")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("+++ templates/index.html")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("@@ -3,11 +3,27 @@")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("{% block main_content %}\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('    <section class="habit-list">\n')]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    {% for habit in habits %}\n")])]),e("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('        <div class="habit">\n')]),e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('            <p class="habit__name">\n')]),e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                {{ habit }}\n")]),e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("            </p>\n")]),e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        </div>\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        {% set completed = habit in completions %}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        {% if completed %}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('            <div class="habit completed">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <p class="habit__name">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                    {{ habit }}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                </p>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <svg class="habit__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                    <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" />\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                </svg>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("            </div>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        {% else %}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('            <div class="habit">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <form method="POST" class="habit__form" action="proxy.php?url=https%3A%2F%2Fpython-web.teclado.com%2F%7B%7B+url_for%28%5C"complete\') }}">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <input type="hidden" id="habitName" name="habitName" value="{{ habit }}" />\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <input type="hidden" id="date" name="date" value="{{ selected_date }}" />\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('                <button type="submit" class="habit__button">\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                        {{ habit }}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                </button>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("                </form>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("            </div>\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        {% endif %}\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    {% endfor %}\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    </section>\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("{% endblock %}\n")])])])])]),e("p",[s._v("Now that we've got that, we can go ahead and code the Flask side of things.")]),s._v(" "),e("p",[s._v("We'll add a "),e("code",[s._v("completions")]),s._v(" variable which is a "),e("code",[s._v("defaultdict")]),s._v(" that maps dates to lists. Each list contains the habits completed on that date.")]),s._v(" "),e("p",[s._v("We'll then pass the completed habits to "),e("code",[s._v("render_template")]),s._v(" in the "),e("code",[s._v("index")]),s._v(" endpoint.")]),s._v(" "),e("p",[s._v("We'll also add the "),e("code",[s._v("complete")]),s._v(" endpoint which handles the submission of the form (an incomplete habit). That adds it to the "),e("code",[s._v("completions")]),s._v(" dictionary.")]),s._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("--- app.py")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("+++ app.py")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("@@ -1,8 +1,10 @@")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("import datetime\n")])]),e("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[s._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("from flask import Flask, render_template, request\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("from collections import defaultdict\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("from flask import Flask, render_template, request, redirect, url_for\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("app = Flask(__name__)\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('habits = ["Test habit"]\n')])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("completions = defaultdict(list)\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("@app.context_processor\n")])]),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("@@ -26,8 +28,19 @@")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('        "index.html",\n')]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        habits=habits,\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        selected_date=selected_date,\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("        completions=completions[selected_date],\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('        title="Habit Tracker - Home",\n')]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    )\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('@app.route("/complete", methods=["POST"])\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("def complete():\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('    date_string = request.form.get("date")\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    date = datetime.date.fromisoformat(date_string)\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('    habit = request.form.get("habitName")\n')]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("    completions[date].append(habit)\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('    return redirect(url_for("index", date=date_string))\n')])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v('@app.route("/add", methods=["GET", "POST"])\n')])])])])]),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("--- static/css/main.css")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("+++ static/css/main.css")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token coord"}},[s._v("@@ -130,3 +130,53 @@")]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  flex-direction: column;\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  align-items: center;\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[s._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  display: flex;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  flex-direction: row;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  align-items: center;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  justify-content: space-between;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  font-size: 26px;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  padding: 20px;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  margin-bottom: 20px;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  background-color: #fff2d8;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  border: 3px solid black;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  border-radius: 6px;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit:not(.completed) {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  padding: 0;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit:not(.completed):hover {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  background-color: #e9cd87;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit__icon {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  width: 1em;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  height: 1em;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit__name {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  margin: 0;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit__form {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  width: 100%;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v(".habit__button {\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  display: block;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  width: 100%;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  margin: 0;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  padding: 20px;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  font-family: inherit;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  font-size: inherit;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  text-align: left;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  border: none;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  background-color: unset;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("  cursor: pointer;\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[s._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[s._v("}\n")])])])])]),e("h2",{attrs:{id:"resources"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#resources"}},[s._v("#")]),s._v(" Resources")]),s._v(" "),e("p",[s._v('Code for the SVG "Completed" icon. Feel free to copy it into your code!')]),s._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("svg")]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("habit__icon"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("xmlns")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("http://www.w3.org/2000/svg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("viewBox")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("0 0 20 20"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("fill")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("currentColor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("path")]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("fill-rule")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("evenodd"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("d")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("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"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("clip-rule")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("evenodd"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),s._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("/>")])]),s._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("svg")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n")])])])])}),[],!1,null,null,null);t.default=n.exports}}]);