Angular 1.x coding exercise

Instructions

You must create a widget to use in a form that will allow the user to select red, green or blue by clicking on the corresponding box. The notes and mockup provided by the designer are below:

  • The colors for the boxes are #ff0000, #00ff00 and #0000ff
  • Boxes should be 75px square
  • The text should be centered vertically and horizontally in each box
  • The labels should be white 10pt Arial except for the green box which should be black
  • When selected, the box should have a 2px black border

Your widget should be called "color-widget" and utilize ng-model like other form controls.

When clicking the colored box, the text in the box below should change indicating the hex code of the selected color.

The following buttons should update the widget correctly by highlighting the correct color:

Version 1 Color Widget using Jquery

Selected color is: {{formModel.color}}




click to download color widget source files

what was used to build the color widgets:

  • npm
  • gulp
    • ruby-sass
    • cssnano
    • jshint
    • uglify
    • livereload
  • vendors
    • jquery
    • bootstrap
    • angularjs
    • normalize.css
  • sublime text 2