Frontend Web Development

1. Supports three categorical attributes. Note a numeric attribute can be converted into a categorical one by replacing a number with an interval. If unsure about this, ask for guidance. 2. Supports one numeric attribute. This attribute will be filtered using two input fields (or similar) that allow a user to enter a numeric range as a lower bound and upper bound. 3. The initial state for the web page is: all filters are unset and the entire table of items (i.e. the whole collection) is shown. 4. The web page shows a filter for each categorical attribute. A filter could be implemented as a list of radio buttons or a list of checkboxes or some equivalent, where each element in the list is for an attribute value. For example, for an attribute colour filter the list could be for ‘red’, ‘green’ etc. Note the user must be able to see all values at a glance without any keyboard or mouse interaction, so a dropdown menu will not be acceptable. 5. Each filter also shows counts for each attribute value. For example, ‘red (5)’, ‘green (8)’ which indicates there are 5 red items and 8 green items in the filtered table. 6. The web page supports filtering by multiple attributes. A user can make a selection in one or more filters then click a filter button. After the click the item table will be redisplayed to only show items that meet the filter conditions. The counts next to each attribute value in each filter are updated after the click. 7. There will be a Reset button that clears all filters. 8. The item collection will be loaded from a CSV file that is located on a server. The item collection will contain at least 50 records. A local server is fine. 9. Each time a user clicks the filter button, filter settings are saved. Later a user can redo a prior saved filter by selecting from a list of prior filter actions. If the user exits the browser then later revisits the web page, prior filter actions will still be available. 10. Reasonable use of styles i.e. CSS must be made. 11. Numic inputs must be validated and a reasonable response to web page users made if input is not valid. 12. Your report will (i) describe what your faceted collection is and (ii) provide sufficient use cases communicated via screen shots and text descriptions that prove your application meets all the above (and below if advanced) requirements. See report requirements on the next page for further details. 13. Your code will be maintainable. A minor change to the requirements should require a minor coding effort to implement. If unsure about this, ask for guidance. Additional Requirements for an Advanced Project 1. Supports an additional text attribute that contains a description i.e. free text. Web page contains an additional filter that supports keyword search over this extra attribute. 2. Each categorical filter supports selection of multiple attribute values, for example, colour = {red or blue}. 3. The web application is parameterised. This means there will be no reference to your attribute names or values in your HTML or JavaScript the only reference to them will be in your item collection file or files. This will be tested by adding/removing columns and by adding/removing values from your item collection then checking if your application still works.