Test Mockup

Develop a page with dynamic behavior, using client side scripting only. 1. Screen 1 is the initial display a. Use any placeholder for date b. Clicking on the Apply button will trigger: i. Resizing of the left panel as shown in screen 2 ii. Resizing of the right panel and changing the content of this panel as in screen 2 2. Screen 2: a. The list of profiles data will be coming as json (hard coded for simplicity). Using the json content, display the profiles as depicted. Profiles are grouped as eligible and not eligible resulting in different display schemes. b. Clicking Select Profile should display an alert box with the profile id for the entry Key objectives: 1. 2. 3. 4. Json:
{"Status":1,"Result":{"EligibleProfiles":[{"ProfileID":524012,"CategoryName":"Websites & Ecommerce","MembershipType":{"Name":"Guru Vendor","MaxWorkSampleCount":100,"MaxWorkSampleDiskSpace":104857600,"MaxPackageDealCount":5,"MaxPackageDealDiskSpace":104857600,"I sRetired":false,"IsPaidMembership":true,"ID":2},"ProfileStatus":1,"TotalBidsLeft":471,"BidsLeft":0,"BidPaxLeft":471,"IsInvited":fa lse,"ProposalTemplateID":91270}],"NotEligibleProfiles":[{"ProfileID":611378,"CategoryName":"Programming & Databases","MembershipType":{"Name":"Guru Vendor","MaxWorkSampleCount":100,"MaxWorkSampleDiskSpace":104857600,"MaxPackageDealCount":5,"MaxPackageDealDiskSpace":104857600,"I sRetired":false,"IsPaidMembership":true,"ID":2},"ProfileStatus":4,"TotalBidsLeft":498,"BidsLeft":27,"BidPaxLeft":471,"IsInvited":f alse,"ProposalTemplateID":91271}]}}

Use of javascript/jquery for the desired page behavior Use of json to display dynamic data on client side Smooth transitions when the page elements are resized Efficient in use of javascript and jquery

Screen 1:

Screen 2: