/cute_animal_gallery

Build a cute animal gallery with angular directives

Build a cute animal gallery

For this assignment you will be building on your cute bunny directive assignment.

Create three different photo albums of cute animals. These could kittens, puppies, goats, sugar gliders, lemurs, whatever as long as they are ridiculously cute and animals, preferably mammalian and fuzzy.

You will need to create a photo album (think of it as an image collection) directive that contains:

  • a title and description of your album
  • an array of pictures to display
  • and a "Display Mode" UI control to toggle whether or not you're currently displaying images in a table view or grid view

The Display UI control should determine which image display directive is utilized for each photo within the album directive. Table view corresponds to the text-only directive, and the grid view is built with the thumbnail directive.

When a user clicks a table row or a thumbnail image, then replace the list view with your full-size image directive. Be sure to include a way to click back to the previously selected list view.

Bonus point

For a bonus point, add another 'album' directive to power a photo carousel (rotate through full-size display of the photos in the album, on a 3 second timer).

Requirements

App requirements: 6pts

  • Album directive
  • Toggle between text and thumbnail display directives
  • Simple CSS to layout the table and grid
  • Click through to see full-size image
  • Adorable images of cute animals

Code style: 3pts

  • Passes linter
  • Well-named functions and variables, properly scoped
  • Good project organization

Git usage: 1pt

  • Well-structured pull request
  • Accurate commit messages
  • Clear, readable git history