Contacts widget

Author: Jarret Gabel

Demo: contacts-widget

Dependecies:

• ui.contacts.js
• ui.contacts.css
• jQuery
• jQuery UI

Usage:

$(div).contacts({data : json});

To resize, adjust element size.

Accepts json with structure:

{
		"0" : {
			"name"  	: "Christian",
			"street"	: "123 Main Street",
			"city"  	: "New York, NY",
			"phone" 	: "555-555-5555",
			"email" 	: "[email protected]",
			"color"		: "green"
		}
}

Skills Assessment

This repository contains three states of a new contacts widget. This widget will be used across multiple sites. Designers will also use this in mocks for usability tests.

Fork the repo and create the HTML, CSS, and JavaScript for the widget as described in the Contact List image. See how far you can make it in 3 hours, but you don't need to spend any more than 3 hours on your solution. You will be asked to explain any places where your solution does not match the spec. Please target modern browsers (FF/Chrome/Safari), try not to use images, and bonus points for graceful degradation and legacy support solutions.

Please code the page according to industry best practices and organize the assets as you would if delivering it to a client to integrate (not necessarily to deploy).

Extra credit: write your JavaScript using OO.

Resources

• Contact List JPEG
• Contact List PSD (right click and save)