Blank slate with the provided final starter material.

.gitignore

@@ -1,3 +1,4 @@
+/__MACOSX
 /.idea
 /node_modules/
 /lib

assignment.css

@@ -0,0 +1 @@
+/* put your css code here */

assignment.js

@@ -0,0 +1 @@
+// put your javascript code here

css/bootstrap-theme.css

@@ -0,0 +1,476 @@
+/*!
+ * Bootstrap v3.3.2 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default.disabled,
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary.disabled,
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success.disabled,
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info.disabled,
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning.disabled,
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger.disabled,
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #2e6da4;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
+  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
+  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+}
+/*# sourceMappingURL=bootstrap-theme.css.map */

css/gallery.css

@@ -1,33 +0,0 @@
-.crop-img{
-  max-height:150px;
-  max-width:100%;
-}
-
-.large-img{
-  max-width:100%;
-}
-
-.carousel-img {
-  margin: auto;
-  padding: 10px;
-  max-height:300px;
-  max-width:100%;
-}
-
-/* 
- * uncomment this for some css3 drop shadows and rounded corners.
- */
-
-.thumbnail,.nav, .large-img, .crop-img{
-  border-radius: 2px;
-  padding-top:5px;
-}
-
-.thumbnail,.nav {
-  box-shadow: 2px 2px 5px #888888;
-}
-
-.thumbnail {
-  height: 30vh;
-  overflow: hidden;
-}

index.html

@@ -1,196 +1,22 @@
-<!DOCTYPE html>
-<!-- This is a complete example of an image gallery -->
-
-<html lang="en">
-  <head>
-    <!-- use the head section to define meta data and load css and js files -->
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Gallery</title>
-
-    <script src="js/jquery-2.2.2.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/handlebars-v3.0.3.js"></script>
-
-    <!-- 
-      These are our javascript files.
-      Albums.js contains the data
-      gallery.js is the code
-    -->
-    <script src="js/Albums.js"></script>
-    <script src="js/gallery.js"></script>
-
-    <link href="css/bootstrap.css" rel="stylesheet">
-    <link href="css/gallery.css" rel="stylesheet">
-
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script
-      src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-
-    <div class="container">
-
-      <!-- page tile -->
-      <div class="page-header">
-        <h1>My photo albums </h1>
-      </div>
-
-      <!-- A navigation menu that selects different views -->
-      <ul class="nav nav-tabs">
-        <li role="" class="active"><a href="#" id="albums-tab">Albums</a></li>
-        <li role=""><a href="#" id="photos-tab">Photos</a></li>
-        <li role=""><a href="#" id="slideshow-tab">Slideshow</a></li>
-      </ul>
-      <br /><br />
-
-
-      <!-- the content section is empty as we will fill it 
-            via javascript and templates -->
-      <div id="content" class="container-fluid" role="main">
-      </div>
-    </div> <!-- / container -->
-
-    <!-- Here are our Templates -->
-
-
-    <!-- this is the template for the albums view -->
-    <!--
-        it displays the albums in a bootstrap grid format
-        with one item for each album (using the {{#each}} template expression.
-        Each album is displayed with a thumbnail image, a name and
-        the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
-    -->
-    <script id="albums-template" type="text/x-handlebars-template">
-      <div class="row">
-
-        {{#each albums}}
-        <div class="col-xs-12 col-md-3">
-          <div class="album-thumbnail" data-id="{{@index}}">
-            <img class="crop-img" src="{{thumbnail}}" alt="" />
-
-            <div class="caption">
-              <h4> {{name}} </h4>
-              <p>{{photos.length}} photos</p>
-            </div>
-          </div>
-        </div> <!-- / col -->
-
-        {{/each}}
-
-      </div> <!-- / row -->
-    </script>
-
-    <!-- this is the template for the photos view of a single album -->
-    <!--
-        like albums view it uses a bootstrap grid format to display the photos in an album
-
-        Each photos is displayed with anumbnail image, a name and
-        a description
-    -->
-    <script id="photos-template" type="text/x-handlebars-template">
-      <div class="row">
-        <!-- xs-12 : small display shows a single column (taking up 12 grid columns)-->
-        <!-- md-3 : medium and up displays use 3 grid columns per column -->
-
-        {{#each photos}}
-        <div class="col-xs-12 col-md-3">
-          <div class="photo-thumbnail" data-id="{{@index}}">
-            <img class="crop-img" src="{{src}}" alt="" />
-
-            <div class="caption">
-              <h3>{{title}}</h3>
-              <p>{{description}}</p>
-            </div>
-          </div>
-
-        </div> <!-- / col -->
-        {{/each}}
-
-      </div> <!-- / row -->
-    </script>
-
-    <!-- this is the template for the view a single photo -->
-    <!--
-        It is displayed as a large image with title and description
-    -->
-    <script id="photo-template" type="text/x-handlebars-template">
-      <div class="row">
-        <div class="col-xs-12 col-md-12">
-          <img class="large-img" src="{{src}}" alt="" />
-
-          <div class="caption">
-            <h3>{{title}}</h3>
-            <p>{{description}}</p>
-          </div>
-        </div> <!-- / col -->
-
-      </div> <!-- / row -->
-    </script>
-
-    <!-- this is the template for the slideshow view of a single album -->
-    <!--
-        It uses the carousel view, which is quite complex, see my lecture for details
-    -->
-    <script id="slideshow-template" type="text/x-handlebars-template">
-      <div class="row">
-        <div class="col-md-6">
-
-          <div id="carousel-example-generic" class="carousel slide"
-            data-ride="carousel">
-
-            <ol class="carousel-indicators">
-              <li data-target="#carousel-example-generic" data-slide-to="0"
-                class="active"></li>
-              <li data-target="#carousel-example-generic"
-                data-slide-to="1"></li>
-              <li data-target="#carousel-example-generic"
-                data-slide-to="2"></li>
-            </ol>
-
-
-            <!-- Wrapper for slides -->
-            <div class="carousel-inner" role="listbox">
-
-              {{#each photos}}
-              <div class="item {{#if @first}}active{{/if}}">
-                <img class="carousel-img" src="{{src}}" alt="" />
-                <div class="carousel-caption">
-                  Image caption
-                </div>
-              </div> <!-- / carousel item -->
-              {{/each}}
-
-            </div>
-
-            <!-- Controls -->
-            <a class="left carousel-control" href="#carousel-example-generic"
-              role="button" data-slide="prev">
-              <span class="glyphicon glyphicon-chevron-left"
-                aria-hidden="true"></span>
-              <span class="sr-only">Previous</span>
-            </a>
-            <a class="right carousel-control" href="#carousel-example-generic"
-              role="button" data-slide="next">
-              <span class="glyphicon glyphicon-chevron-right"
-                aria-hidden="true"></span>
-              <span class="sr-only">Next</span>
-            </a>
-          </div>
-
-        </div> <!-- / carousel -->
-      </div> <!-- / col -->
-      </div> <!-- / row -->
-    </script>
-
-
-  </body>
-</html>
-
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Animals</title>
+
+  <!-- Libraries -->
+  <script type="text/javascript" src="js/jquery-2.2.2.js"></script>
+  <script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>
+  <script type="text/javascript" src="js/bootstrap.js"></script>
+  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
+
+  <!-- Custom code -->
+  <script type="text/javascript" src="AnimalsData.js"></script>
+  <script type="text/javascript" src="assignment.js"></script>
+  <link rel="stylesheet" type="text/css" href="assignment.css" />
+</head>
+
+<body>
+  <!-- put your HTML here -->
+
+</body>

js/Albums.js

@@ -1,79 +0,0 @@
-// this file contains the data we need for the gallery
-// The main object, "gallery" contains an array of album
-// each album contains an array of photos 
-// (plus a name and a thumbnail image)
-// The photos contain an image src and some metadata
-
-var gallery = {
-  albums: [
-    {
-      name: "Travels",
-      thumbnail: "images/img_1.jpg",
-      photos: [
-        {
-          src: "images/img_1.jpg",
-          title: "grafitti",
-          description: "some derelict appartments with grafitti"
-        },
-        {
-          src: "images/img_6.jpg",
-          title: "fountain",
-          description: "a huge dragon fountain"
-        },
-        {
-          src: "images/img_7.jpg",
-          title: "tower",
-          description: "a colourful tower block"
-        },
-        {
-          src: "images/img_8.jpg",
-          title: "walkways",
-          description: "an interesting interior"
-        }
-      ]
-    },
-    {
-      name: "Equipment",
-      thumbnail: "images/img_4.jpg",
-      photos: [
-        {
-          src: "images/img_4.jpg",
-          title: "syths",
-          description: "all workshops should aspire to being this tidy"
-        },
-        {
-          src: "images/img_9.jpg",
-          title: "helmet",
-          description: "a sci-fi helmet"
-        },
-        {
-          src: "images/img_12.jpg",
-          title: "drums",
-          description: "a rather nice drum kit"
-        }
-      ]
-    },
-    {
-      name: "English Winter",
-      thumbnail: "images/img_17.jpg",
-      photos: [
-        {
-          src: "images/img_16.jpg",
-          title: "dog in the snow",
-          description: "looks like he needs that jacket"
-        },
-        {
-          src: "images/img_17.jpg",
-          title: "winter",
-          description: "a snowy scene in a park"
-        },
-        {
-          src: "images/img_18.jpg",
-          title: "frosty pond",
-          description: "some ducks feeling cold"
-        }
-      ]
-    }
-
-  ]
-};

js/gallery.js

@@ -1,151 +0,0 @@
-/*
- *		This file contains the javascript code for our gallery
- */
-
-// variables for all of the templates so we only have to compile
-// them once on page load and can then use the same compiled
-// templates many times
-var albums_template, photos_template, photo_template, slideshow_template;
-
-// variables to store the current displayed album and photo
-var current_album = gallery.albums[0];
-var current_photo = current_album.photos[0];
-
-// a helper function that instantiates a template
-// and displays the results in the content div
-function showTemplate(template, data) {
-  var html = template(data);
-  $("#content").html(html);
-}
-
-// document read gets called when the whole document
-// is loaded, so we put most of the code that needs to run
-// in here
-$(document).ready(function () {
-  //
-  // compile all of our templates ready for use
-  //
-  var source = $("#albums-template").html();
-  albums_template = Handlebars.compile(source);
-
-  source = $("#photos-template").html();
-  photos_template = Handlebars.compile(source);
-
-  source = $("#photo-template").html();
-  photo_template = Handlebars.compile(source);
-
-  source = $("#slideshow-template").html();
-  slideshow_template = Handlebars.compile(source);
-
-  //
-  //  clicking on the albums tab shows the
-  //  thumbnails of all the albums
-  //
-  $("#albums-tab").click(function () {
-    // displays the albums template
-    showTemplate(albums_template, gallery);
-
-    // make the albums tab the active one
-    // first make the currently active tab inactive
-    $(".nav-tabs .active").removeClass("active");
-    // then make albums tab active
-    $("#albums-tab").addClass("active");
-
-    // add a click callback to each album
-    // thumbnail which displays the photos
-    // template on that album
-    // (I have written out the code for this
-    // function for clarity but it is actually
-    // pretty much the same as the photos tab
-    // function so we could acutally just
-    // call $(".photo-thumbnail").click() )
-    $(".album-thumbnail").click(function () {
-
-      // get the index (position in the array)
-      // of the album we clicked on
-      // "this" is the element that was clicked on
-      // data("id") gets the attribute data-id
-      // (which we set to the index of the album in
-      // the array - @index)
-      var index = $(this).data("id");
-
-      // set the current album to this album
-      current_album = gallery.albums[index];
-
-      // displays the photos template
-      showTemplate(photos_template, current_album);
-
-      // add an on click al all the photo thumbnails
-      // which displays the photo in a modal popup
-      $(".photo-thumbnail").click(function () {
-        // get the index (position in the array)
-        // of the photo we clicked on
-        // "this" is the element that was clicked on
-        // data("id") gets the attribute data-id
-        // (which we set to the index of the photo in
-        // the array - @index)
-        var index = $(this).data("id");
-
-        // set the current photo to this photo
-        current_photo = current_album.photos[index];
-
-        // displays the single photo template
-        showTemplate(photo_template, current_photo);
-      });
-    });
-  });
-
-  //
-  //  clicking on the photos tab shows all of the
-  //  photos in the current album
-  //
-  $("#photos-tab").click(function () {
-    // displays the photos template
-    showTemplate(photos_template, current_album);
-
-    // make the photos tab the active one
-    // first make the currently active tab inactive
-    $(".nav-tabs .active").removeClass("active");
-    // then make photos tab active
-    $("#photos-tab").addClass("active");
-
-    // add an on click al all the photo thumbnails
-    // which displays the photo in a modal popup
-    $(".photo-thumbnail").click(function () {
-      // get the index (position in the array)
-      // of the photo we clicked on
-      // "this" is the element that was clicked on
-      // data("id") gets the attribute data-id
-      // (which we set to the index of the photo in
-      // the array - @index)
-      var index = $(this).data("id");
-
-      // set the current photo to this photo
-      current_photo = current_album.photos[index];
-
-      // displays the single photo template
-      showTemplate(photo_template, current_photo);
-    });
-  });
-
-  //
-  //  clicking on the slideshow tab displays the
-  //  current album as a slide show
-  //
-  $("#slideshow-tab").click(function () {
-    // display the slideshow template using the
-    // current album
-    showTemplate(slideshow_template, current_album);
-
-    // make the slideshow tab the active one
-    // first make the currently active tab inactive
-    $(".nav-tabs .active").removeClass("active");
-    // then make slideshow tab active
-    $("#slideshow-tab").addClass("active");
-  });
-
-  // start the page by showing the albums view
-  // we do this by virtually clicking on the
-  // albums tab
-  $("#albums-tab").click();
-});