Index page done.

TODO.md

@@ -1,4 +1,4 @@
-# Final
+# Week 2 Final
 
 In this exercise you will design and build a task list website using your HTML and CSS skills.
 

index.html

@@ -37,8 +37,52 @@
       </div>
     </nav>
 
+    <div class="container">
+        <ul class="list-group">
+          <li class="list-group-item list-group-item-heading">
+            <h1>List of tasks</h1>
+          </li>
+          <li class="list-group-item list-group-item-success">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" checked aria-label="Task done">
+              </span>
+            <a class="form-control" href="task.html">Buy groceries</a>
+            </div>
+          </li>
+
+          <li class="list-group-item list-group-item-success">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" checked aria-label="Task done">
+              </span>
+              <a class="form-control" href="task.html">Cook vegetables</a>
+            </div>
+          </li>
+
+          <li class="list-group-item list-group-item-success">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" checked aria-label="Task done">
+              </span>
+              <a class="form-control" href="task.html">Eat</a>
+            </div>
+          </li>
+
+          <li class="list-group-item list-group-item-warning">
+            <div class="input-group">
+              <span class="input-group-addon">
+                <input type="checkbox" aria-label="Task not yet done">
+              </span>
+              <a class="form-control" href="task.html">Enjoy</a>
+            </div>
+          </li>
+        </ul>
+    </div>
+
     <script src="js/jquery-2.2.1.js"></script>
     <script src="js/bootstrap.js"></script>
+    <script src="js/behaviours.js"></script>
   </body>
 </html>
 

js/behaviours.js

@@ -0,0 +1,18 @@
+/**
+ * State has already changed when this handler is called.
+ *
+ * @param event
+ */
+function handleCheckboxClick(event) {
+  var $target = $(event.target);
+  var currentState = $target.prop("checked");
+  var $item = $($target.parentsUntil("ul")[2]);
+  var newClass = currentState ? "list-group-item-success" : "list-group-item-warning";
+  var oldClass = currentState ? "list-group-item-warning" : "list-group-item-success";
+  console.log($item.constructor.prototype);
+  $item.addClass(newClass).removeClass(oldClass);
+}
+
+$(function () {
+  $("input[type='checkbox']").click(handleCheckboxClick);
+});