Challenge Overview
Competition Task Overview
LightSpeed is an Excel based VBA application and in this project we are converting this application to a web based app to make it much easier to use. The web app will be an HTML5 app with offlice capabilities.
For this challenge, we are building a basic HTML5 prototype to include some minimal features for the 1st version of the app. We want to leverage HTML5/CSS3 and usage of angular.js is a requirement.
Key Requirements
- We do not have storyboard for this prototype but instead just the original Excel app. You will have to use Excel 2007 (or above) on Windows (it won't work on a Mac) to open the Excel app and see the views.
- We don't need this prototype to be well styled but there are basic styles to follow, we'll provide more details below.
- Please create a prototype with good quality HTML and JS code (angular.js) showing the correct workflow.
- Test in all the required browsers.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements
Login
Login will be the 1st page shown to the user, and we want an exact copy of this login page: http://52.24.44.42/srt/#/login
We'll also use similar style for the rest of the pages (use my handle to login if you want to see the other pages, I'll also provide some screenshots in the forum).
Settings
The first time after user login, show the settings page, we basically wants to mimic the existing settings screens but with web style. See the settings screenshots we post in the forum.
Home
Please see Home.png we posted in the forum.
At the top we'll have a tab based view, showing tabs like: Project View, WBS View, MRS Requests, etc...
For the table in the page body we need it to support dynamic loading of data when user scrolls. So for example there are 100 rows, the page will show 20 on load and the indicator says showing 20 of 100. When user scrolls the table to the bottom it will load the next 20 items and indicator say showing 40 of 100, and so on....
We'll also need to be able to filter and sort records based on table headers. We'll provide a prototye for your reference.
By default the fields in the table should be readonly, but there should be a flag in the config in angular controllers that can enable editing of the fields (and it should be configurable per column).
There also needs to be configurable flags indciating whether we should hide data for a column. Eventually these configurable flags will come from the server.
Project View
We'll mimic the project view table from the Excel app. Note the columns to the left of the vertical headers won't scroll.
WBS View
We'll mimic the wbs view table from the Excel app. Note the columns to the left of the vertical headers won't scroll.
Other Views
We need a tab for each of the other views but page will simply say "View not yet implemented in this version."
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and Angular.js
- You must not use hardcoded data, all data should come from json files or saved to json files.
- 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 stylesheet.
- 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 scorecard in both Mac and PC environments.
JavaScript Libraries/Plugins
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.
- You must use Angular.js in this challenge
- Any other libraries must be approved by us
Browser Requirements
- IE10 +
- Firefox latest
- Safari latest
- Chrome latest
Final Submission Guidelines
Submission Deliverables
- Complete prototype with all HTML / CSS / Javascript files.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.