$800 - Praxair Quote Management Prototype

Project Overview

Welcome to the Praxair Quote Management Prototype Challenge! The goal of this challenge is to create the the front-end of the Quote Management system based on the storyboard designs.

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

General Requirements

Header

• The header and top nav bar do not have to be implemented. Simply putting a cut image of the header on the top will suffice.

Main Content Area

• The right panel should be fluid and expand with the window
• The use of tables for alignment is allowed 

Numbered Nav

• Clicking on previously visited pages will navigate to the page
• Navigation tabs should be updated as you move across the survey
• The numbers on the nav should not be an image to allow for further pages later.

Survey Navigation

• Survey navigation should be done by going to different HTML files and not through hiding/showing content through JavaScript

Summary Page

• The modal for clicking the edit panel should use the jQuery UI modal
• The modal and background overlay should fade in
• Only clicking the "X", "Cancel", or "Save" should close the modal.
• The modal should have a maximum height as seen in the storyboard/screen on "Edit Step 4"

Review Submitted Quote Requests

• jQuery should be used to sort the table when the header is clicked. The caret should change to reflect an ASC or DESC sort.
• The sorted table does not need to preserve state and can reset when if the user reloads the page.
• The Show "X" per page and pagination of the table do not need to be functional

All Other Pages

• Follow the storyboards and ask any questions on implementation in the forum.

Specific HTML/CSS/JavaScript Requirements

HTML/CSS

• 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.
• 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 scorecard in the PC environments.

Javascript

• ONLY jQuery 1.4.2 CAN BE USED
• 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.

Font Requirements

• Use Arial instead of Helvetica Neue which is in the storyboard

Browser Requirements

• IE8+
• Latest Chrome
• Latest Firefox

Documentation Provided

• Screenshots and document files

 

Final Submission Guidelines