Color Me Angular

Learn ngRoute with colors.

This lab uses 148 Built-In CSS Color Names.

The Challenge

Your goal is to create an angular front-end that displays information about css colors:

• When a user navigates to /, they should see a list of all 148 css colors.
• When a user navigates to /colors/33, they should see information about hexadecimal color #6495ED, otherwise known as "CornFlowerBlue" (see the hard-coded list of COLORS in app.js).
• Color names should link to their approriate show page.
• The colors/show.html should have a convenient "Back" button that returns the user to the home page.

Setup

Clone this repo.

We will be using a new development server called budo for this project.

npm install -g budo

Run the server:

budo -P --host=localhost --open

Bonuses

Semantic Routes: Create separate routes for /color/name/:name and color/hex/:hex, but have them display the same show page. * Since there are only 148 named colors in css, and 16^6 (16,777,216) hex colors, not every show page can have a color name in the title. Can you accomodate for this?

Here's how you'd go about it:

var target_number = 2;
var foundObj = [{num:7},{num:2}].find(function(o){
    return o.num === target_number;
})

Color Picker: Add an HTML5 colorpicker (input type 'color') to colors/show.html.

• Set its initial value to the hex value of the show page.
• Stretch: when the user changes their color selection, redirect them to the appropriate show page.

Sort the Colors: Add a filter to colors/index.html that sorts colors by name, alphabetically.

• Next, add a button to the index page that, on click...
  • sorts colors by name.
  • sorts colors by hex.
  • Stretchy Stretch: toggles between ascending/descending sort order with every click.

Resources

• Built-in Directives
  • ngRepeat
    • filter
  • ngHref
  • ngStyle
• ngRoute Module
  • ngView directive
  • $routeProvider
  • $locationProvider
  • $routeParams