Create client-side web application that enables a user to search properties by:
- type (house, flat, any),
- price (min price, max price)
- bedrooms (min bedroom, max bedroom)
- time added
The form for the user to enter their search criteria should be written in HTML5 and make use of jQuery UI widgets to ensure consistency, reliability and accessibility.
The search criteria will be used to search properties from a JSON file. A JSON file has been created for you to contain 2 properties. You will add an additional 5 properties to cover a range of properties (type, price, number of bedrooms and date added), to allow the search to return a range of results.
Make use of jQuery UI widgets on your form to enhance all your form elements.
Display the properties that correspond to the search made by the user on the search page. 10% for search functionality - 10% for the displaying the results in an effective and pleasant way (picture, short description, price)
Each property listed on the result page should have a link that allows the user to visit the corresponding property page.
The property page should contain a large image, thumbnail images, and a short description of the property (property type, price, location). Using your own code or a plugin of your choice, add the facility to view all the property images. You should have 6 to 8 pictures for each property.
Using jQuery UI tabs, display the property long description, the floor plan and the google map.
Add the facility to save the property to your favourite list of properties. (10%to ensure each property can only be added once. 5% otherwise).
The user should also be able to remove a property from the favourite list and clear the favourite list.
Add the facility to display your favourite property list on the search page.
Make you search page and your property page responsive by changing the layout on smaller devices, using media queries. You are required to have two layouts: large screen and smaller than iPad landscape witdh (1 breakpoint = 5 per page)
Pay attention to Aesthetics, as described below:
- the inclusion of visual clues based on groupings; related items or links are grouped together while unrelated items are separated.
- use of headings and subheadings to allow visual scanning of content.
- use of headings, subheadings, font sizes, bold fonts and italic fonts in proportion to the importance of the item.
- alignment of elements on a page so that they are all visually connected; size all elements on the page to create balance and unity; nothing should look out of place unless you have a specific reason for the effect.
- choose a font style that supports the site atmosphere and stick to it; limit styles to 2 at the most.
- use images and photos for visual appeal and to communicate ideas.
- use one set of design elements across your website.
- direct the users attention to the important information
- harmony and balance
Attachment:- Assignment.rar