/color-me-angular

learn routing with colors

Primary LanguageJavaScript

Color Me Angular

Learn ngRoute with colors.

This lab uses 148 Built-In CSS Color Names.

screenshot of colors/index buttons

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.
screenshot of colors#show

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?

Hint: *How do you find the color by `name` or `hex`?* (Click Here) ```js 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