Added base.html for bootstrap, and form and index for editing and vie…

…wing todos
Ritikasinghpro · Dec 2, 2019 · 7bb6ac2 · 7bb6ac2
1 parent b6e8039
commit 7bb6ac2
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 9 deletions.
diff --git a/todoApp/todos/templates/todos/base.html b/todoApp/todos/templates/todos/base.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  {% block title %}
+  {% endblock %}
+  </head>
+  <body>
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    {% block content %}
+    {% endblock %}
+
+  </body>
+</html>
diff --git a/todoApp/todos/templates/todos/form.html b/todoApp/todos/templates/todos/form.html
@@ -0,0 +1,28 @@
+{% extends 'todos/base.html' %}
+
+{% block title %}
+<title>Edit Todo</title>
+{% endblock %}
+
+{% block content %}
+<form method="POST" action="{% url 'todos:save' todo.id %}" style="padding-top: 10px;">
+    {% csrf_token %}
+    <div class="form-group row">
+        <label for="title" class="col-sm-2 col-form-label">Title</label>
+        <div class="col-sm-10">
+            <input type="text" class="form-control" id="title" name="title" value="{{ todo.title }}">
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="description" class="col-sm-2 col-form-label">Description</label>
+        <div class="col-sm-10">
+            <input type="text" class="form-control" id="description" name="description" value="{{ todo.description}}">
+        </div>
+    </div>
+    <div class="form-group row">
+        <div class="col-sm-10">
+            <button type="submit" value="Submit" class="btn btn-primary" name="submit">Save</button>
+        </div>
+    </div>
+</form>
+{% endblock %}
diff --git a/todoApp/todos/templates/todos/index.html b/todoApp/todos/templates/todos/index.html
@@ -1,9 +1,28 @@
-{% if todo_list %}
-    <ol>
-        {% for todo in todo_list %}
-            <li> {{ todo.name }} </li>
-        {% endfor %}
-    </ol>
-{% else %}
-    <p>No todos as of now</p>
-{% endif %}
+{% extends 'todos/base.html' %}
+
+{% block title %}
+<title>Todo list</title>
+{% endblock %}
+
+{% block content %}
+
+    {% if todo_list %}
+    <div style="display: grid;">
+        <div class="row">
+            {% for todo in todo_list %}
+                <div class="col-sm-6">
+                    <div class="card text-center">
+                        <div class="card-body">
+                            <h5 class="card-title">{{ todo.title }}</h5>
+                            <p class="card-text">{{ todo.description }}</p>
+                            <a href="{% url 'todos:edit' todo.id %}" class="btn btn-primary">Edit</a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% else %}
+        <p>No todos as of now</p>
+    {% endif %}
+{% endblock %}