Zookeep

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

Description

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.

Create zoo.js with the animals array

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"
}

Sort and display the animal gallery

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!

Display the featured animal

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.

Map, sort, and display animal ages

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.

Animals

Name	Common Name	Species	Location	Age	Image
Mooney	Blue monkey	Cercopithecus mitis	Smith Jungle	2	Blue_monkey.jpg
Sami	Common squirrel monkey	Saimiri sciureus	Smith Jungle	2	Common_squirrel_monkey.jpg
Chester	Black howler monkey	Alouatta caraya	Smith Jungle	5	Black_howler_monkey.jpg
Scarborough	Scarlet macaw	Ara macao	Smith Jungle	3	Scarlet_macaw.jpg
Maverick	Tufted puffin	Fratercula cirrhata	Birai Aquarium	2	Tufted_puffin.jpg
Puck	Little penguin	Eudyptula minor	Birai Aquarium	4	Little_penguin.jpg
Tweed	Leafy sea dragon	Phycodurus eques	Birai Aquarium	1	Leafy_seadragon.jpg
Taylor	Swift fox	Vulpes velox	Rodeheaver Desert	9	Swift_fox.jpg
Trip	Cape thick-knee	Burhinus capensus	Rodeheaver Desert	5	Cape_thick-knee.jpg
Helios	Mantled guereza	Colobus guereza	Fagan Valley	11	Mantled_guereza.jpg
Asteria	Western lowland gorilla	Gorilla gorilla gorilla	Fagan Valley	5	Western_lowland_gorilla.jpg
Perses	Wolf's mona monkey	Cercopithecus wolfi	Fagan Valley	10	Wolfs_mona_monkey.jpg
Pip	Red river hog	Potamochoerus porcus	Fagan Valley	4	Red_river_hog.jpg
Skrytnaya	Amur leopard	Panthera pardus orientalis	Kond Cat Complex	8	Amur_leopard.jpg
Matadi	African lion	Panthera leo	Kond Cat Complex	6	African_lion.jpg
Kimani	Siberian tiger	Panthera tigris altaica	Kond Cat Complex	9	Siberian_tiger.jpg
Antipode	Polar bear	Ursus maritimus	Moser Canyon	11	Polar_bear.jpg

Extra Credit Options

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

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:

sortBy(propertyName)

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".

propertyEquals(propertyName, value)

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.

pick(p1[, p2[, p3...]])

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.

Completing and submitting the 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.

References

• 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

License

ISC