Challenge Overview
Project Overview:
Welcome to the 72 HRS - topcoder community site savable filters for challenge listing prototype challenge.
The goal of this challenge is to add Savable Filters / My Filters to the advanced filters section of the provided prototype (prototype.zip in the downloads section)
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear documentation (or a note on text file) on your code changes for all the Images/HTML5/CSS3/JS codes and which will make it easier for future developements.
IMPORTART: As per the project schedules and FAST challenge the review timeline can be non-default. Reviewers please note the review timelines for this challenge.
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 tasks of this competition is to update the filters section of the provided prototype.
General Rules:
- Storyboard and baseline UI Prototype is attached for this challenge.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobiles too.
- Please update existing related CSS files instead of creating new CSS files.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Watch word typos in every place including the source code. Make sure they have correct meaning.
- Layout (background) should be fluid, depend on browser width.
- Please provide animated mouse hover (with transition effect) for each clickable icons/buttons.
- Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width.
- Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page. (References: http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and also provided Prototype)
- Scope of this challenge is only software development challenges page (i.e. new-development.html and new-development-past.html)
Required Pages:
- When at least one filter is selected, Save button should be displayed at the right of "Clear All tags". The hover should have the hover style as other buttons in the prototype. Refer to A01-saveable filters-01-Dropdown open.png
- Clicking the Save button will show the popup to save the current filters. Refer to B02-Saving Filters-popout.png
- User can enter the name in the input box
- User can check the alert checkbox, default unchecked.
- Clicking Cancel closes the popup.
- Clicking the Save My Search saves the filters and show success confirmation. Refer to B03-Saving Filters-save success.png
- "My Challenges Only" checkbox and the My Filters dropdown should be displayed at the rightmost of the filter dropdowns section. Note they have different background colors. Refer to B01-Saving Filters-Defaults.png
- Hovering over the "My Filters" will display all the saved searches. When user hovers over one item of them, it will highlight the item with borders and highlight the search name, refer to A02-saveable filters-02-Hover and selects.png. User can
- ���check / uncheck the alert checkboxes. Refer to A03-saveable filters-03-Apply Alerts.png
- Clicking the X will delete the item from the dropdown list.
- Clicking the item (any places in the item except alert checkbox or X (remove) button will apply the saved filters. All the current selected filters should be cleared and the filters of this saved search should be applied. You need to demonstrate this in your prototype.
Specific HTML/CSS/JavaScript Requirements:
- 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 scorecard in both Mac and PC environments.
Font Requirements:
Use same font as per current site.
JavaScript Requirements:
- JavaScript libraries are already used in the current site which can be used in this challenge too.
- AngularJS shall be used instead of jquery only for the newly added part.
- The provided prototype uses jquery to implement the advanced filter section, but during the development phase, we have updated the front end codes to use the AngularJS. You can tell the changes from this merge request: https://gitlab.com/topcoderinc/tc-site/merge_requests/133/diffs. If you want, you can copy the existing codes from the merge request to change the whole advanced filter section to use AngularJS, but it's not required.
Browsers Requirements:
- IE 9+ Browsers on PC
- Firefox 7+ Browsers
- Safari 5+ Browsers
- Latest Chrome Browser
- Latest Chrome / Safari on Tablets and Mobiles
Documentation Provided:
Storyboard Screens and PSD files: Storyboard.zip
Existing Baseline Prototype: Prototype.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.