Challenge Overview
Welcome to the Ionic Sample app with Animations contest. In this contest we would like you to build a sample Ionic app that demonstrates two animations.
Set up
- Folllow the instructions for setting up the Ionic framework http://ionicframework.com/getting-started/
- To accelerate your development we recommend that you use the Ionic Start Pack available here
Project Overview
The client would like two animations for use in their Ionic apps. The intention is that these animations can be reused in other apps.
Challenge Overview
Create an Ionic app. Once the app has loaded it should have a header at the top titled ‘Demo animations’. In the centre of the app are two buttons. The first button should be called ‘Zoom demo’ and the second button ‘Flip demo’.
The demos that you need to create can be found here. The demo on the left-hand side is the ‘Zoom demo’ and the right-hand side is the ‘Flip demo. The priority is to make sure that the animations exactly match the demos. Styling and content is not important, you are free to use the styling and content of your choice.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- You MUST use SASS to make the CSS code clean, provide source files on your submission.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- You MUST use AngularJS version 1.3 (this is part of Ionic 1.2)
- Follow this Angular Style Guide here, paying particular attention to the following sections of the guide:
1 - Single Responsibility, IIFE, Modules, Controllers, Services, Factories, Data Services, Directives
2 - Application Structure - “Folders-by-Feature”
3 - Modularity
4 - Testing
5 - jsDoc for producing documentation
6 - jsHint for linting your Javascript
- Use DRY coding principles where possible
- You MUST include units tests using Jasmine and Karma
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Use bower for any third party AngularJS libraries. Your submission should not ship with these files. Only provide a bower.json file (and an optional .bowerrc file) mentioning the dependencies.
Tablet/Mobile
- iOS
- Android
Development Framework Requirements
- Ionic
- AngularJS
Final Submission Guidelines
Before submitting, make sure that your HTML, CSS and Javascript code have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.
- All animations and screen transitions should be smooth and without any jitter.
- All code should be fully unit tested and documented. Please use best practices here.
- Upload your code as a .zip file to the Submit and Review tool for this contest.
- Upload documentation for how to run your submission, including a short video demonstration