Homepage and todos template

Youngestdev · Youngestdev · commit 3878a8122422 · 2022-01-08T12:45:20.000+01:00
diff --git a/ch04/todos/templates/home.html b/ch04/todos/templates/home.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Packt Todo Application</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
+          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
+          integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
+</head>
+<body>
+<header>
+    <nav class="navar">
+        <div class="container-fluid">
+            <center>
+                <h1>Packt Todo Application</h1>
+            </center>
+        </div>
+    </nav>
+</header>
+<div class="container-fluid">
+    {% block todo_container %}{% endblock %}
+</div>
+</body>
+</html>
diff --git a/ch04/todos/templates/todo.html b/ch04/todos/templates/todo.html
@@ -0,0 +1,50 @@
+{% extends "home.html" %}
+
+{% block todo_container %}
+<main class="container">
+    <hr>
+
+    <section class="container-fluid">
+        <form method="post">
+            <div class="col-auto">
+                <div class="input-group mb-3">
+                    <input type="text" name="item" value="{{ item }}" class="form-control"
+                           placeholder="Purchase Packt's Python workshop course" aria-label="Add a todo"
+                           aria-describedby="button-addon2"/>
+                    <button class="btn btn-outline-primary" type="submit" id="button-addon2"
+                            data-mdb-ripple-color="dark">
+                        Add Todo
+                    </button>
+                </div>
+            </div>
+        </form>
+    </section>
+
+
+    {% if todo %}
+    <article class="card container-fluid">
+        <br/>
+        <h4>Todo ID: {{ todo.id }} </h4>
+        <p>
+            <strong>
+                Item: {{ todo.item }}
+            </strong>
+        </p>
+    </article>
+    {% else %}
+    <section class="container-fluid">
+        <h2 align="center">Todos</h2>
+        <br>
+        <div class="card">
+            <ul class="list-group list-group-flush">
+                {% for todo in todos %}
+                <li class="list-group-item">
+                    {{ loop.index }}. <a href="/todo/{{ loop.index }}"> {{ todo.item }} </a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        {% endif %}
+    </section>
+</main>
+{% endblock %}
