Challenge Overview
Challenge Overview:
Welcome to the AngularJS Multi-Select Directive Challenge! The goal of this challenge is to create a specific directive as described below written as native AngularJS widget.
NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide, https://docs.angularjs.org/guide/directive) and Bootstrap 3 (http://getbootstrap.com/getting-started) for page responsiveness.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Challenge Requirements:
- The Flippable Directive: This directive is to allow a visual representation of flippable content. Imagine a card which has content on the front and backsides of it. When flipping over the area should look like it is being flipped over using only CSS (transform property). This card however may be of dynamic width and height. The directive when used in HTML should look like the following:
<div flippable class="col-lg-4" flipped="booleanScopeVariable" style="height: 300px; overflow: auto;">
<div flippable-front>This is the front of the content that is to be show</div>
<div flippable-back>This is the back of the content that is to be show</div>
</div> - flippable: This attribute indicates that the entire element may be flipped upside down.
- flipped: This attribute hold a reference to a boolean that updated to true/false accordingly allowing things outside the flippable area to be able to flip the area around programatically. If true then the back side is visible. If false then the front side is visible.
- flippable-front: This attribute is only valid when immediately inside of a flippable attribute and everything within is the only visible content when flipped attribute is false.
- flippable-back: This attribute is only valid when immediately inside of a flippable attribute and everything within is the only visible content when flipped attribute is true.
Supporting Documents:
- To run up things quickly use the html file (input.zip).
Specific HTML/CSS/JavaScript Requirements:
- Your HTML code must be valid HTML5 and follow best practices.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- HTML5 best practices (e.g strong and em tags instead of bold and italic tags).
- Templates may be done as either '<script type="text/ng-template" id="templateName.html">' or as an external file whichever is easiest.
Browsers Requirements:
- IE8+ on PC
- Safari on MAC & PC
- Firefox on MAC & PC
- Chrome on MAC & PC
Technology Stack:
- AngularJS 1.2.x (http://angularjs.org).
- Bootstrap 3.x (http://getbootstrap.com/getting-started).
- Angular UI Utils Latest (http://angular-ui.github.io/ui-utils/) except jQuery Passthrough.
- UI Bootstrap Latest (http://angular-ui.github.io/bootstrap/).
- Font Awesome 4.x (http://fortawesome.github.io/Font-Awesome/).
Documentation Provided:
Please register to see attached documents.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.