Challenge Overview
Project Overview:
Welcome to the 72 HRS - topcoder wordpress community site new challenges filters prototype challenge.
The goal of this challenge is to update the filters section of the provided prototype.
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 timelines are very close. Reviewers please note the review timelines for further reference.
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)
- Please follow existing (community.topcoder.com/tc) naming class for handle color, ie. "coderTextYellow" for yellow handle color.
- Scope of this challenge is only software development challenges page (i.e. new-development.html and new-development-past.html)
Required Pages:
Below are the required pages for this prototype challenge.
1. Challenges Search (Filters) Update:
- The existing "Advanced Search" should be removed.
- The new panel should look like 01 ~ Advanced Search 00 - (default-search blank-tags-hide).png in the intial state.
- The 'Type a keyword' should be a text input control which allow user to search by text. When the input is focused, the placeholder 'Type a keyword' should be removed.
- The dropdown Challenge Type, Platform, Technologies allows user to choose multiple options of them to filter.
- User hovers over it will open the dropdow menu
- User can input the in the top text box to filter the options avaiable in the dropdown
- User can click an option to add it to the filters list (orange labels above). After one add, the dropdown will not be closed so user can continue to click other options to add.
- The date range picker allows user to choose a date range. If user chooses a start date, then all the end date options earlier than the start date will be disabled, and vice versa.
- The right has quick selectors to allow user quickly choose a date range.
- The added filters will be placed above as orange labels, user can delete them by click x. Or clear all the filters by click "x Clear All tags"
- Please note that the blue Save button and the Quick Filters Box at the left are out of the scope of this challenge. Please do not add them. The "Clear All tags" will be moved to the rightmost instead.
- This section should be avaiable in both grid and list view.
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.
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.