Working species page.

assignment.css

@@ -30,4 +30,11 @@
 #class-row a.thumbnail {
   border: none; }
 
+#species-row img {
+  height: 400px;
+  width: 100%;
+  object-fit: cover;
+  margin-left: auto;
+  margin-right: auto; }
+
 /*# sourceMappingURL=assignment.css.map */

assignment.scss

@@ -44,4 +44,14 @@
   a.thumbnail {
     border: none;
   }
+}
+
+#species-row {
+  img {
+    height: 400px;
+    width: 100%;
+    object-fit: cover;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }

routing.js

@@ -121,7 +121,7 @@ function ClassContext(q) {
   if (!this.class) {
     window.location.assign("");
   }
-  console.log("Class page", this.class);
+  console.log("Class page(" + this.class + ")");
   for (klass in category) {
     if (category.hasOwnProperty(klass)) {
       if (category[klass].name === this.class) {
@@ -159,12 +159,57 @@ function HomeContext() {
   }
 }
 
+/**
+ * Species context
+ *
+ * @param {Object} q
+ *   - class
+ *   - species
+ * @constructor
+ */
 function SpeciesContext(q) {
-  this.species = q.species ? q.species : null;
-  if (!this.species) {
+  var category = animals_data.category;
+  var klass = null;
+  var speciesArray = null;
+  var species;
+  var speciesIndex;
+  var prop;
+
+  if (!q.class || !q.species) {
+    console.error("Missing class or species parameter.");
+    window.location.assign("");
+    return;
+  }
+  console.log("Species page(" + q.class + ", " + q.species + ")");
+  this.class = q.class ? q.class : null;
+
+  for (klass in category) {
+    if (category.hasOwnProperty(klass)) {
+      if (category[klass].name === this.class) {
+        speciesArray = category[klass].animals;
+        break;
+      }
+    }
+  }
+  // No species means class was not found.
+  if (!speciesArray) {
+    console.warn("No species found for class ", this.class);
     window.location.assign("");
   }
-  console.log("Species page", this.species);
+
+  for (speciesIndex in speciesArray) {
+    if (speciesArray.hasOwnProperty(speciesIndex)) {
+      species = speciesArray[speciesIndex];
+      if (species.name === q.species) {
+        for (prop in species) {
+          if (species.hasOwnProperty(prop)) {
+            this[prop] = species[prop];
+          }
+        }
+        break;
+      }
+    }
+  }
 }
 
 // ======== Route binding ======================================================

templates/home.hbs

@@ -1,7 +1,7 @@
 <div class="home">
   {{> nav activeGallery="active" }}
   <div class="container">
-    <div id="home-carousel" class="carousel slide" data-interval="2000">
+    <div id="home-carousel" class="carousel slide" data-interval="3000" data-pause="false">
       <ol class="carousel-indicators">
         {{#each indicators}}
           <li data-target="#home-carousel" data-slide-to="{{this}}"></li>
@@ -19,18 +19,19 @@
           <div class="carousel-caption">
             <h2>{{this.name}}</h2>
           </div>
-          </div>
+        </div>
         {{/each}}
 
-      <!-- Controls -->
-      <a class="left carousel-control" href="#home-carousel" 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="#home-carousel" role="button" data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-      </a>
-    </div>
-  </div>
-</div>
+        <!-- Controls -->
+        <a class="left carousel-control" href="#home-carousel" 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="#home-carousel" role="button" data-slide="next">
+          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div><!-- .carousel-inner -->
+    </div><!-- #home-carousel -->
+  </div><!-- .container -->
+</div><!-- .home -->

templates/species.hbs

@@ -1,4 +1,22 @@
 <div class="species">
   {{> nav activeGallery="active" }}
-SPECIES
+
+  <div class="container">
+    <ol class="breadcrumb">
+      <li><a href="#">Home</a></li>
+      <li><a href="#class?class={{class}}">{{class}}</a></li>
+      <li>{{name}}</li>
+    </ol>
+
+    <h1>{{name}}</h1>
+    <p>{{description}}</p>
+    <div id="species-row" class="row">
+      <div class="col-sm-6">
+        <span class="thumbnail"><img src="{{image1}}" alt="{{image1}}" /></span>
+      </div>
+      <div class="col-sm-6">
+        <span class="thumbnail"><img src="{{image2}}" alt="{{image2}}" /></span>
+      </div>
+    </div>
+  </div>
 </div>