Challenge Overview
Welcome to Harbison Fischer Pump Tracker UI Prototype Challenge
Harbison Fischer is a global company that manufactures and sells pumping equipment for oil wells. While they do not repair any pumps themselves, they do work with Pump Shops who do the actual repairs on the equipment for their Customers. Harbison Fisher is looking to create an application to help the Pump Shops manage and track the pumps that come to them for repairs. They are looking for a user friendly, clean and simple application that the Pump Shops can use to manage the Pump Equipment and Create and Manage Pump Repairs.
The main task of this challenge is to create the Harbison Fischer Desktop Responsive UI Prototype based on the provided wireframe basic layout and function. You also need re-use and follow client standard for JSON data.
On this challenge, we need you focus to create prototype that will fully work within DESKTOP platform only. In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version and update all page skinning.
Final Submission Guidelines
Documentation Provided
wires_FF_v7.zip - Wireframe Layout as Guideline to your prototype
General Notes
- We have not provided storyboard design in PSD/AI format like common UI Prototype format. For this challenge you need build the layout based on wireframe layout.
- All pages of UI Prototype must support responsive design solution, for this challenge you just support desktop screen
- Set 992px as UI Prototype max width and placed centered of browser screen
- Our main priority in this challenge is we need make sure all functions works properly.
- Base of prototype need created using Bootstrap layout.
- All form element as possible need to use browser based style OR from bootstrap style
- Re-create all icons in your prototype based on Bootstrap Icons
- Create interaction/functions by using Bootstrap component and Bootstrap Javascript
- Use JSON to load all data (refer to further details in later sections)
- This app will load data (JSON) asynchronously once put into production. For this challenge, local json files should be used. We have provided example JSON files that contain dummy data in the challenge attachments.
- All text inside every pages need to be editable
- Please use your best judgement about layout and functions. Let us know if you need clarification about via challenge forum.
- ALL hard-coded text from design should be configurable in a single section in the javascript (this JS should be inline in the HTML file)
- The use of AngularJS is preferred by not required.
UI PROTOTYPE PAGE REQUIREMENTS:
Note: Always refer to wires_FF_v7.zip for visual guidelines
1). Pumps
- All main navigations tabs will build as separated pages, no need linked to each other.
- There are buttons/links for Recently Viewed, Recently Created and Recently Modified. There is also a Search button (the one in the expanded search menu). All of these (and pageLoad) should call the retrievePumps method with various parameter differences. This method returns a JSON object with two properties:
-- pumpsCount : Integer - the number of pumps returned by search
-- pumps : [] - array of Pump objects
use the data in the pumps property to populate the prototype with data. The pumpsCount can be used with the pageSize parameter to enable pagination
- In the right side there’s View Option button to toggle between List view and Grid view
- Add Pump button displays “Add Pump”. When clicked the user should be taken to the Add Pump screen
List View of files
- Users can toggle between List view and Grid view using button
- Use Bootstrap Icons for List view and Grid view button
- Your prototype need use cookies to remember Grid and List view last state
- List View show up by default (if cookie does not exist)
- There’s colorful rectangle in the first column that are reflected to “Status” column
- On List view, clicking on a column sorts the table by that column.
-- This would require calling retrievePumps method again with different sortDescending parameter value.
- Display correct up/down arrow when user sort the table
- Clicking on table row should navigate to “Pumps Details” screen
- Customer cell should be a link to “/{{pump.customerId}}” (within current window)
- Page numbering should be calculated using the pumpsCount, pageSize, and pageNumber parameters.
Grid View
- This is Grid View look and feel
- Sections divided by each Customer
- User can sliding each customer row by click Next and Prev arrow
- When reach the first slide, previous arrow need to be disabled
- When reach the last slide, next arrow need to be disabled
- For Grid view, each box need show Status with rectangle shape on top of box
- Then another rows for another information
- Clicking on Pump number title displays the “B). Pumps Details” screen
Pumps Search
- Clicking the Search button displays the search fields; text on button changes to Hide Search
- Clicking Hide Search hides the search fields
- On the search form, Customer, Well Lease, Well Number and Pump Number are type ahead fields
-- For Customer, retrieve type ahead results using the suggestCustomerName method. Pass in the currently typed text as the parameter. Use the results of the call to populate typeahead list.
-- For Well Lease, do the same as the above but with suggestWellLease method
-- For Well Number, use suggestWellNumber method
-- For Pump Number, use suggestPumpNumber method
- On the search form, after user enters info and clicks Search, the search results are displayed and the text on button changes to Clear Search
-- To retrieve search results, use the retrievePumps method and populate parameters according to search fields entered.
- On the search form, after user toggle the Status options, and then clicks Search, table need show up data with selected Status
- Clear Search: displays the original table or grid; search fields are still displayed; text on button changes to Hide Search
- Search result need affect Grid and List View
1). A). Add Pump
- Clicking Cancel button displays alert box;
-- Clicking Yes displays the Home-Pumps page
-- Clicking No closes the modal window
- Clicking Save displays “B). Pumps Details” page
-- Save should use the upsertPump() function and pass in a Pump object populated based on form fields (see example JSON for new Pump). The function returns the same object with added properties for error and isSuccess. If IsSuccess is false and the error property is populated, that error should be displayed on the page either at top of form or in a modal.
- If user selects Use Pump Template, a dropdown list of templates is displayed
-- Use the results of the retrievePumpTemplates function with default inputs to populate this dropdown. When one is selected, use the details to prepopulate the following form.
- Selecting an option from the list displays “a). Add Pump - Step 1”
- If user selects Build Pump Details, “a). Add Pump - Step 1” is displayed
- FYI: in every steps, you need capture some selected value that will be re-use in the some of “Add Pump” steps
- User can go back by clicking previous step tabs
a). Add Pump - Step 1 (Pump & Customer Information)
- Pump Number, user can enter a number or click the generate button which displays a number in the field
- Pump Shop Location, this is dropdown
- Pump Status, If user selects Active-Deployed, then Run Date label and field are displayed
- Pump Status, if user selects Active-Stocked or Inactive, then Run Date label and field are hidden
- Need show up datepicker for Run Date field
- Customer Name, Well Lease and Well Number are type ahead fields
-- For Customer, retrieve type ahead results using the suggestCustomerName method. Pass in the currently typed text as the parameter. Use the results of the call to populate typeahead list.
-- For Well Lease, do the same as the above but with suggestWellLease method
-- For Well Number, use suggestWellNumber method
-- Both of the above methods return lists of wellResult objects. These objects include a well Id, a well number, and well lease string. Any time a Well Lease is selected from the results, ensure that Well Number and Lease are populated. i.e. if lease is selected, populate it and number. If number is selected, populate it and lease fields. (this means either Lease OR Number could be filled in my user and both would end up populated after selecting result)
- Next button take user to Step 2
b). Add Pump - Step 2 (Pump Detail)
- Pump Brand / Pump Model : selecting the Brand will filter the options in the Model dropdown:
- If selected Pump Brand is Harbison-Fischer:
-- Model Options = HF API, HF 3-Tube, HF Sand-Pro, HF Texas Stripper, HF Pampa, HF Pampa Gas, HF Gas Vent, HF VSP, HF Sand Flush, HF 2SHVR, HF Gas Chaser, HF Double-Displacement, HF Large Volume, HF Stroke-Thru
- If selected Pump Brand is DON-NAN:
-- Model Options = DON-NAN API, DON-NAN Eco-Lift, DON-NAN Heavy-Lift, DON-NAN Big Bore, DON-NAN Sand Trey, DON-NAN Mercury Sand Stroke, DON-NAN Maximum Compression, DON-NAN Solid Sand Performance, DON-NAN Improved Hollow Tube,
- If selected Pump Brand is QUINN:
-- Model Options = QUINN API, QUINN Big Bore, QUINN Circle-A, QUINN Gas Compressor, QUINN Frac, QUINN Scale, QUINN Pull Down, QUINN Multiphase, QUINN Trash
- If Pump Brand is Weatherford:
-- Model Options = Weatherford API, Weatherford Three-Tube, Weatherford HVR, Weatherford 2SHVR, Weatherford Sand Hog, Weatherford Sandy Fluid, Weatherford Gaseous-Fluid, Weatherford Gas Pusher, Weatherford Petrol A, Weatherford Large-Volume, Weatherford Double-Production, Weatherford Steam-Bypass
- Pump Type: this is toggle options, not affect any field
- Tubing Size : when user selects option from the Other dropdown, other options in that field are deselected
- Pump Size: Create Slider bar for bootstrap, refer this sample: http://www.eyecon.ro/bootstrap-slider/
- Need numbers for every Slider bar steps
- Back button take user to Step 1
- Next button take user to Step 3
c). Add Pump - Step 3
- For this screen there is a sidemenu in the left side
- Set active and inactive menu state
Barrel
- Type:
-- If selected Pump Type from Step 2 is Insert:
---- Barrel Type Options = H (Heavy Wall Metal Plunger), W (Thin Wall Metal Plunger), P (Heavy Wall Soft Plunger), X (Heavy Wall Metal Plunger, Thin Wall Thread), or S (Thin Wall Soft Plunger)
---- If selected Pump Type from Step 2 is Tubing or Oversized Tubing:
-------- Barrel Type Options = H (Heavy Wall Metal Plunger) or P (Heavy Wall Soft Plunger)
- Length is a slider bar
- Metallurgy Base is a toggle option
- Metallurgy Options is a toggle option
- Upper Extension Length
-- if selected Barrel Type is X, W, or S
---- do not display Upper Extension Length label and slider in every page.
-- if selected Barrel Type is X, W, or S
---- display Upper Extension Length label and slider in every page.
- Lower Extension Length
-- if selected Barrel Type is X, W, or S
---- do not display Lower Extension Length label and slider in every page.
-- if selected Barrel Type is X, W, or S
---- display Lower Extension Length label and slider in every page.
Plunger
- Length is a slider bar
- Fit is a slider bar
- Metallurgy Base is a toggle option
- Metallurgy Options is a toggle option
Standing Valve
- This screen divided by 3 sections: “Standing Valve”, “Standing Valve Ball” and “Standing Valve Seat”
- Metallurgy Base is a toggle option
- Metallurgy Options is a toggle option
- Type is a toggle option
- Match title for every options
Traveling Valve
- This screen divided by 3 sections: “Traveling Valve”, “Traveling Valve Ball” and “Traveling Valve Seat”
- Metallurgy Base is a toggle option
- Metallurgy Options is a toggle option
- Type is a toggle option
- Match title for every options
Hold Down
- If selected Pump Type from Step 2 is either Tubing or Oversized Tubing: Do not display Hold Down Location
- If selected Pump Type from Step 2 is Insert && selected Barrel Type is X (Heavy Wall Metal Plunger, Thin Wall Thread): Hold Down Location is disabled and option = B (Bottom) is selected
- If selected Pump Type from Step 2 is Insert && Barrel Type selected Barrel Type is NOT X (Heavy Wall Metal Plunger, Thin Wall Thread): Hold Down Location is enabled and options = A (Top), B (Bottom), or T (Bottom, Traveling Barrel)
Pull Rod
- If selected Pump Type from Step 2 = Tubing, do not show Pull Road section
- If selected Pump Type from Step 2 is either Insert or Oversized Tubing:
---- Metallurgy Base Values = Steel, 303/304 SS, 316 SS, Brass, Monel
---- Metallurgy Options Values = None, Spray Metal
Fittings
- Metallurgy Base is a toggle option
- Metallurgy Options is a toggle option
Save
-- Save should use the upsertPump() function and pass in a Pump object populated based on form fields (see example JSON for new Pump). The function returns the same object with added properties for error and isSuccess. If IsSuccess is false and the error property is populated, that error should be displayed on the page either at top of form or in a modal.
B). Pumps Details
-The retrievePump (singular) method may be used to support deep linking and any other situation where details for a specific record need to be re-retrieved
- Back to List button take user to List displays Home-Pumps
- Delete button need displays alert
-- No, Cancel closes the modal window
-- Yes, Delete displays Home-Pumps
-- Save as Pump Template now displays the “a). Pump Template Details Edit” screen. This should take users to the Pump Template tab and pass a pumpId in the URL that can be used to prepopulate Pump Template details. See additional requirements in Pump Template section of this document.
- Add Pump Repair button displays a confirmation modal before allowing user to proceed
- No, Cancel button need hide the modal
- Yes, Continue button take user to Add
- When Generate button is used to create a new Pump Number, use the generatePumpNumber() function
- Edit button take user to editable screen “a). Pumps Details Edit”
- Show tabs functions for: “Pump & Customer Information”, “Pump & Component Details” and “Pump Repairs”
- Pumps Status show up in the right side of tab
- Clicking the Save as Pump Template button displays the Pump Template Details page
-- Save should use the upsertPump() function and pass in a Pump object populated based on form fields (see example JSON for new Pump). The function returns the same object with added properties for error and isSuccess. If IsSuccess is false and the error property is populated, that error should be displayed on the page either at top of form or in a modal.
Pump & Customer Information Tab
- Show label and value in separated rows
Pump & Component Details Tab
- Show label and value in separated rows for Pump Details
- Show table content for Component Details
Pump Repair Tab
- This tab contains table format
- Clicking a Pump Repair number :
-- if status = Open, display “3). B). Pump Repair Details - Open”
-- if status = Closed, display “3). C). Pump Repair Details - Closed”
a). Pumps Details Edit
- Clicking Cancel button displays alert box;
-- Clicking Yes displays the Pumps Details page
-- Clicking No closes the modal window
- Clicking Save displays Pumps Details page
- Pump Repair Tab title changed into “Component Details” tab
Pump & Customer Information Tab
- See “a). Add Pump - Step 1” for field functionality
Pump Details Tab
- See “a). Add Pump - Step 2” for field functionality
Component Details Tab
- See “a). Add Pump - Step 3” for field functionality
2). Templates
- Recently Viewed, Recently Created, Recently Modified are links similar to on pumps screen. However, use the retrievePumpTemplates method to obtain results to populate details.
- Search button displays search fields
-- Once details are provided, use the retrievePumpTemplates method to obtain filtered results.
- Add Pump Template button displays “a). Add Pump Template Step 1”
Pump Template Table
- Clicking on a column sorts the table by that column
-- SImilar to Pumps tab, use the retrievePumpTemplates method with the sort parameters to allow sorting results
- Clicking on Template Name displays the “2). B). Pump Template Details” page
- Customer cell should be a link to “/{{pump.customerId}}” (within current window)
- Page numbering should be calculated using the pumpsCount, pageSize, and pageNumber parameters.
Pump Template Search
- clicking the Search button displays the search fields; text on button changes to Hide Search
- clicking Hide Search hides the search fields
- on the search form, Template Name and Customer are type ahead fields
-- These typeaheads should function the same as in the Pumps tab above
- on the search form, after user enters info and clicks Search, the search results are displayed and the text on button changes to Clear Search
-- The retrievePumpTemplates method should be used to complete this.
- Clear Search: displays the original table; search fields are still displayed; text on button changes to Hide Search
2). A). Add Pump Template
a). Add Pump Template Step 1 (Template Name)
- Template name is a text field
- Next button take user to Next Step
b). Add Pump Template Step 2 (Pump & Customer Information)
- Pump Shop Location is a dropdown
- Customer Name, Well Lease and Well Number are type ahead fields
-- User must select from the type ahead list for Customer and Well Lease
-- User is allowed to add a new number to Well Number field
c). Add Pump Template Step 3 (Pump Details)
- See “b). Add Pump - Step 2” for field functionality
d). Add Pump Template Step 4 (Component Details)
- See “b). Add Pump - Step 3” for field functionality
Save Pump Template Details
- Use the upsertPumpTemplate method to ensure details are successfully updated
2). B). Pump Template Details
- Back to List take user back to Pump Templates page
- Delete displays modal window
-- Yes, Delete displays Pump Templates page
-- No, Cancel closes the modal window
- Edit displays “a). Pump Template Details Edit”
-- retrievePumpTemplate (singular) function may be used to retrieve specific details if needed.
Pump & Customer Tab
- Show label and value in separated rows
Pump Details Tab
- Show label and value in separated rows
Component Details Tab
- Show table content for Component Details
a). Pump Template Details Edit
- Cancel displays modal window
-- Yes, Cancel displays Pump Template Details page
-- No, Continue closes the modal window
- Save displays Pump Template Details page
Pump & Customer Tab
- See “Add PumpTemplate-Step2” for field functionality
Pump Details Tab
- See “Add Pump - Step 2” for field functionality
Component Details Tab
- See “Add Pump - Step 3” for field functionality
3). Pump Repairs
- Recently Viewed, Recently Created, Recently Modified are links similar to on pumps screen. However, use the retrievePumpRepairs method to obtain results to populate details.
- Search button displays search fields
Pump Repair Table
- Clicking on a column sorts the table by that column (use retrievePumpRepairs method similar to other tabs)
- Clicking a Pump Repair number :
-- if status = Open, display “3). B). Pump Repair Details - Open”
-- if status = Closed, display “3). C). Pump Repair Details - Closed”
- Pump Number take user to Pump Details page
- Customer is a dummy link; just show the mouseover on the prototype
- Page numbering is a placeholder
Pump Repair Search
- Clicking the Search button displays the search fields; text on button changes to Hide Search
- Clicking Hide Search hides the search fields
- On the search form, Customer, Well Lease, Well Number and Pump Number are type ahead fields
- On the search form, after user enters info and clicks Search, the search results are displayed and the text on button changes to Clear Search
- Clear Search: displays the original table; search fields are still displayed; text on button changes to Hide Search
3). A). Add Pump Repair
- Clicking Cancel displays modal window
-- Yes, Cancel displays “3). Pump Repairs” page
-- No, Continue closes the modal window
- Clicking Save displays “Pump Repair Details - Open” page
Pump Repair Details
- Edit displays Pump Repair Edit page
- Delete displays modal window
-- No, Cancel closes modal window
-- Yes, Delete displays Pump Repairs Page
a). Add Pump Repair Step 1 (Received Pump Details Tab)
- Received Pump Details is read only
- Received Pump Component Details table is read only
a). Add Pump Repair Step 2 (Pump Information Tab)
- Customer Name, Pump Number, Well Lease, Well Number and are type ahead fields
- Run Date and Fail Date are Datepicker
b). Add Pump Repair Step 3 (Pump Details & Evaluation Tab)
- See “c). Add Pump Template Step 3” for field functionality
- Pull Reason in toggle options
- Foreign Material in toggle options
- Notes / Remarks is textarea
c). Add Pump Repair Step 4 (Component Evaluation Tab)
- For each component under this section
-- Clicking YES for Replaced? displays attribute fields for that component
-- Clicking NO for Replaced? hides attribute fields if they are visible
- Notice there’s Photo Attachment field for every menu
d). Add Pump Repair Step 5 (Pump Repair Disposition Evaluation Tab)
- Pull Reason in toggle options
- Notes/Remarks is text input
3). B). Pump Repair Details - Open
- Back button take user to Pump Details List
- This is screen for Pump Repair Details with “Open” Status
- Delete button need show confirmation button
- Edit button take user to Edit screen
- Close Pump Repair placed in the right side
-- Clicking the button displays confirmation modal
-- if click Yes, Continue, display Pump Repair - closed page
Received Pump Detail Tab
- Show label and value in separated rows
- Show table in the bottom
Pump Information Tab
- Show label and value in separated rows
Pump Details & Evaluation Tab
- Show label and value in separated rows
Component Evaluation Tab
- Show menu navigation in the left side
- Show label and value in separated rows
- Also there’s field for photo attachment
Pump Repair Disposition Tab
- Show Pump Status and Notes
a). Pump Repairs Edit
- Cancel displays modal window
-- Yes, Cancel displays “3). B). Pump Repair Details - Open” page
-- No, Continue closes modal window
- Save displays Pump Repair Details - Open page
Received Pump Detail Tab
- Show label and value in separated rows
- Show table in the bottom
Pump Information Tab
- Only Pump Information section editable
Pump Details & Evaluation Tab
- See “Add Pump Step 2” for field functionality
- See “Add Pump Repair - Step 3” for field functionality
Component Evaluation Tab
- For each component under this section
-- Clicking YES for Replaced? displays attribute fields for that component
-- Clicking NO for Replaced? hides attribute fields if they are visible
Disposition Tab
- For Pump Status:
-- if Active-Deployed is selected, show New Run Date field
-- if Active-Stocked OR Inactive is selected, show Replacement Pump Used? Y/N
---- if Yes is selected, show Replacement Pump field - type ahead showing pump numbers and show New Run Date field
----- if No is selected, do not show any additional fields
- New Run Date is Datepicker
- Notes is input field
3). C). Pump Repair Details - Closed
- Basically this is same screen like “Pump Repair Details - Open” page
- Need show different status color
- There’s “Pump Tag” and “Work Summary” button in the right side
a). Pump Repairs Edit
- Basically this is same screen like “Pump Repair Details - Open” page
- Show different content
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Minimize effort to update in future. If using angular, isolate views to templates/partials when possible.
CODE REQUIREMENTS:
JS Data Functions
The following functions should be defined in a service class. They should return data using the structures defined further below:
retrievePumps(pumpNumber,wellLease,wellNumber,customer,status,pageNumber,pageSize,sortColumn,sortDescending) {
returns object with property for pumps array + size property
providing null for inputs results in defaults
adjust pageNumber to pull subsequent pages
use pageNumber + pageSize + record count to generate pagination
}
generatePumpNumber() {
returns a new valid pump number
}
upsertPump(Pump p) {
creates a new pump / updates an existing one based on provided data
returns pump object + error property
}
retrievePump(pumpId) {
returns single pump object based on Id
}
suggestCustomerName(String searchText) {
returns list of customers based on search string
}
suggestWellLease(String searchText) {
returns a list of well leases based on search string
}
suggestWellNumber(String searchText) {
returns a list of well numbers based on search string
}
suggestPumpNumber(String searchText) {
returns a list of pump numbers based on search string
}
retrievePumpTemplates(templateName,brand,model,customer,dateCreated, pageNumber,pageSize,sortColumn,sortDescending) {
returns a list of pump templates
}
retrievePumpTemplate(Id templateId) {
returns a single Pump Template object based on Id
}
upsertPumpTemplate(PumpTemplate pt) {
creates a new pump templates / updates an existing one based on provided data
returns pump object + error property
}
retrievePumpRepairs(customer,wellLease,wellNumber,pumpNumber,status, pageNumber,pageSize,sortColumn,sortDescending) {
returns a list of pump repairs
}
retrievePumpRepair(Id repairId) {
returns a single pump repair details object based on Id
}
upsertPumpRepair(PumpRepair pr) {
creates a new pump repair / updates an existing one based on provided data
returns a pump repair object + error property
}
JSON Structure Files:
Pump.json - returned from searches on pumps
NewPump.json - represents format that should be passed in to upsertPump when created a new pump
UpdatePump.json - represent format that should be passed in to upsertPump when updating an existing pump
ErrorNewPump.json - represents the format returned when a save for a pump is unsuccessful
PumpNumber.json - represents results of generatePumpNumber call
Pump.json - represents results of retrievePump call when passed a valid Id
CustomerResult.json - represents the search results returned when using customer type ahead
WellResult.json - represents the search results returned when using Well Lease or Well Number type ahead
PumpResult.json - represents the search results returned when using Pump Number type ahead
PumpTemplates.json - returned from searches on Pump Templates
PumpTemplate.json - returned from retrievePumpTemplate when passed a valid Id
NewPumpTemplate.json - should be passed to upsertPumpTemplate function when creating a new PumpTemplate
UpdatePumpTemplate.json - should be passed to upsertPumpTemplate function when updating
ErrorPumpTemplate.json - returned from upsertPumpTemplate when invalid data is provided
PumpRepairs.json - returned from retrievePumpRepairs function
PumpRepair.json - returned from retrievePumpRepair when passed a valid Id
ErrorPumpRepair.json - returned from upsertPumpRepairs method when invalid data is passed
NewPumpRepair.json - should be provided to upsertPumpRepairs method when creating a new PumpRepair
UpdatePumpRepair.json - should be provided to upsertPumpRepairs method when updating an existing PumpRepair
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.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.
- ALL tags must be properly closed/self-closing. This includes meta,img, and link tags which are often left unclosed.
CSS
- 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.
Javascript
- 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.
- Make sure you use open source library
- Preferred version of AngularJS is 1.4
- All angularJS services/controller/modules should be included in the associated page’s body. This structure is due to our target server’s requirements. The provided template is already arranged like this and if built upon as is, you should have no trouble.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
Browsers Requirements
- Safari Latest Version
- Firefox Latest Version
- Chrome Latest Version
- IE 10