LaPaz AngularJS HTML5 Prototype Challenge 1

Project Overview:

Welcome to the LaPaz AngularJS HTML5 Prototype Challenge 1! The goal of this challenge is to create a HTML5 Prototype application using AngularJS framework and Bootstrap.

NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop a HTML5 prototype based on the provided documentation with screenshots. You need to prepare HTML5 prototype application using AngularJS data binding. We don't have storyboard designs for this challenge, so it is not necessary to match the pixels (you could refer color styles from screenshots), but we would prefer to complete required functionality in this prototype. Your prototype must work properly in all the required browsers.

Required Pages:

Below are the required pages/tabs for this prototype application.

1. Overview:

• - Follow the overview diagram under section 2.01 (Figure-1) on requirement document.
• - This will be base design using AngularJS for overall admin app (refer screenshot for more details).
• - Use page width as fluid layout design.
• - Use placeholder for logo and company name.
• - Follow generic tab design in screenshot (Figure-3).

2. Home:

• - Create a login page with content as username & password textboxes and login button - (we don't have screenshot for this).
• - For successful login, show home page (section 2.01.a Figure-4).
• - For unsuccessful login, show access denied page (section 2.01.a Figure-2).

3. Manage Users and Roles:

• - Display screen as per section 2.01.b (Figure-6).
• - Show sub-tabs as "Add Role", "Edit Role", "Add User", "Edit User" - (refer screenshots Figure-6, Figure-7, Figure-8, Figure-9).
• - On save show mandetory fields popup as per screenshot (section 2.01.b Figure-11).
• - On delete user, show delete confirmation popup (Figure-10).
• - Keep dead links for all Cancel buttons.

4. Enable/Disable Consolidator:

• - Follow the section 2.02 on requirement document for this tab content.
• - Display screen as per the screenshot under section 2.02.a (Figure-12).
• - On save show mandetory fields popup as per screenshot (section 2.02.a Figure-13).
• - Keep dead link for Cancel button.

5. Maintain PAL Display Numbers:

• - Follow the section 2.03 on requirement document for this tab content.
• - Display screen as per the screenshot under section 2.03.a (Figure-15).
• - Click on "Set as Faorite" button, show message "Changes have been saved".
• - On save show mandetory fields popup as per screenshot (section 2.03.a Figure-16).
• - Keep dead link for Cancel button.

6. Maintain Pay Agent Info:

• - Follow the section 2.03 on requirement document for this tab content.
• - Display screen as per the screenshot under section 2.03.b (Figure-17).
• - Show sub-tabs as "Review Pay Agent Address", "Pay Agent Info", "Pay Agent Info Detail".
• - Display "Review Pay Agent Address" page content as per screenshot (section 2.03.b Figure-17).
• - Display "Pay Agent Info" page content as per screenshot (section 2.03.c Figure-18).
• - The H+/H-/M+/M-/ signs in "Pay Agent Info" table is provided for reference in screenshots (Figure-20).
• - Display "Pay Agent Info Detail" page content as per screenshot (section 2.03.d Figure-21).
• - Click on "Set as Faorite" button, show message "Changes have been saved".
• - On save show mandetory fields popup as per screenshot (section 2.03.a Figure-19).
• - Keep dead link for Cancel button.

7. Logoff:

• - Once user clicks logoff tab, show user the screen under section 2.01.a (Figure-5).

Specific HTML/CSS/JavaScript Requirements:

As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.

• - HTML/CSS Requirements:
• - Your HTML code must be valid HTML5 and follow best practices
• - 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.
• - 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.
• - No inline CSS styles - all styles must be placed in an external style-sheet.
• - Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• - 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")
• - Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• - Your code must render properly in all browsers listed in the browsers requirements section.

Font Requirements:

Use font - Arial.

JavaScript Requirements:

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. We would like to use following JavaScript libraries:

• AngularJS
• Bootstrap 3

Browsers Requirements:

• IE10+ Browsers
• Latest Chrome Browsers
• Latest Firefox browsers

Documentation Provided:

Requirement document and screenshots.

Final Submission Guidelines