Create a list of zoo animals using Objects and Arrays, and create a web page to display their information.

Please note: you will be doing your work on the gh-pages branch (see instructions below). If you clone the repository and have no files, remember to run git checkout gh-pages.

In this assignment, we’ll be building a homepage for a zoo. The homepage will have several features, including a gallery of zoo animals, a “featured animal of the week”, and a list of the animals sorted by their ages.

An “index.html” file with basic styling has already been created for you, as well as a file called “render-helpers.js” containing several predefined functions for displaying the information on the page.

You will create a new file with an array containing the animals’ information, and use various array methods to sort, filter, and organize lists of animals, and display their information by calling the predefined functions.

Begin by creating a file called “zoo.js”. Inside “zoo.js”, declare a variable called animals, which is an Array containing an Object for each of the Animals in the table below.

Each animal should be an Object that contains the following properties:

• name: a String with the animal’s name from the table below
• commonName: a String with the common name for the animal’s species
• species: a String with the animal’s official species name
• location: a String containing the area in the zoo where the animal resides
• age: a Number representing the animal’s age in years
• image: a String containing the file name for the animal’s image

For instance, the object for “Pip” the red river hog would be:

{
  name: "Pip",
  commonName: "Red river hog",
  species: "Potamochoerus porcus",
  location: "Fagan Valley",
  age: 4,
  image: "Red_river_hog.jpg"
}

Use sort() to sort the animals array based on their name.

After the animals array is sorted, call the displayAnimalGallery() function, passing in the (sorted) animals array. For example:

displayAnimalGallery(animals);

Run node test to see if everything is working correctly so far, and also take a look at “index.html” in a browser. If everything works correctly, you should see a gallery of the zoo animals. Woot!

The featured animal of the week is Taylor, the Swift fox. Use filter() to create a new array containing only Taylor, and store this array in a variable called featured. Use bracket notation (featured[index]) to retrieve the first (and only) array element, and pass it to the displayFeaturedAnimal() function.

Use map() to create a new array containing only the animals’ name, commonName and age, and store the new array in a variable called ages. Use sort() to sort ages based on the animals’ age in ascending order (smallest to largest) . Call the displayAnimalAges() function, passing in the ages array.

1. There are 6 different exhibits at the zoo: Moser Canyon, Fagan Valley, Smith Jungle, Kond Cat Complex, Birai Aquarium, and Rodeheaver Desert. Create a new page, “exhibits.html”, that lists or displays a gallery containing the animals for each exhibit.

2. Instead of using “resources/render-helpers.js” and “resources/style.css”, write your own HTML, CSS and JavaScript to render the featured animal, gallery, and animal ages listing. Be creative and be awesome.

Higher-order functions are functions that either accept functions as parameters or return a function as a return value.

Create a new branch by running the command git checkout -b higher-order-functions. In this branch, edit your “zoo.js” and add three new higher-order functions:

The sortBy function returns a compare function that sorts elements based on the value of each element's propertyName property.

For instance, calling sortBy('name'), will return a function that can be passed to animals.sort(...), and will sort the animals based their name property.

Use your new sortBy function to create compare functions to sort the animals array by their "name" property, and the ages array to sort by "age".

The propertyEquals function returns a function that returns true if an element has a property at propertyName with the specified value.

For instance, calling propertyEquals('name', 'Taylor') will return a function that can be passed to animals.filter(...) to generate a new array containing only Taylor the Swift fox. Use this function to create the featured animal array.

The pick function returns a function that returns a new object containing only the properties specified.

var furniture = [{
  name: "chair",
  legs: 4,
  material: "wood"
}, {
  name: "stool",
  legs: 3,
  material: "metal"
}];

var noLegs = furniture.map( pick('name', 'material') );
console.log( noLegs );
// => [{name: "chair",  material: "wood"}, {name: "stool", material: "metal"}]

The pick function should accept any number of arguments (hint: use the arguments object inside your function).

Use the pick function to create the function passed to animals.map(...) when creating a the ages array.

When you have created and used all three higher-order functions, commit your changes to the higher-order-functions branch and push it to GitHub by running git push -u origin higher-order-functions. Create a new pull request from your higher-order-functions branch to submit your assignment.

• To begin, fork this repository.

• Create a new Cloud9 workspace from your new repository.

  • Alternatively, you may clone your new repository to your computer by running:

    git clone https://github.com/YOUR_GITHUB_USERNAME/zookeep
    

• After cloning (in Cloud9 or on your computer), check out the “gh-pages” branch by running:

    git checkout gh-pages
  

• Modify the files and commit changes to complete your solution.

• Run node test to verify that all tests pass.

• Push/sync the changes up to GitHub. Your assignment will now be visible at http://YOUR_GITHUB_USERNAME.github.io/zookeep/.

• Create a pull request on the original repository to turn in the assignment.

• Create a separate branch for the extra credit options.

You are also welcome commit, push, and create a pull request before you’ve completed your solution. You can ask questions or request feedback there in your pull request. Just mention @barberboy in your comments to get my attention.

• Array
• Object
• array.sort(compareFn) - sort the elements of an array based on the provided comparison function
• array.filter(testFn) - create a new array containing only the elements for which the test function returns true
• array.map(mappingFn) - create a new array containing the elements returned from the mapping function

ISC