Need some help with HTML and Javascript/php. I have mostt of the code done i think and it is in google docs which can be accessed with the links down below. Any help would be great thanks.

Instructions

For this project you will need to design an attractive and user friendly web application where contacts can be created, read (in memory), updated (in memory), and deleted (CRUD features). Since it is not required that you are able to save your data between session, you should programmatically prepopulate your Contact Manager application with a list of at least 10 contacts. The application should also provide the ability to dynamically search your list of contacts by typing in a search field and updating a list so that it contains only the contacts that meet the current pattern of characters in currently in the search field. The search field should also support regular expressions; however, if the user types in a regular expression, the search should not occur until the regular expression is completed. At a minimum your application should contain fields for Name (you can decide whether you want to break it into first, last, middle), multiple addresses (home, work, other would be possibilities), multiple phone numbers, birthday, age, notes, and the ability to add custom fields. For the purposes of this project, we will be assuming only US English language, addresses, phone numbers, etc. However, It would be beneficial to spend a couple minutes considering what it would take to implement a US Spanish, or Australian English, or Indian Hindi version of the application. In addition to proper validation (phone number, state, birthdays, etc.), proper calculations (age based on birthday, etc.), your application should make use of some level of auto completion. For example, if a zip code is added for Chicago, you should default your city and state to Chicago and IL respectively.

CODE:

HTML:

Name:
Address:
City:
State:
Zip

JAVASCRIPT

// Global Variables

// Starting array of contacts. var contacts = [ {name:'Eric P', address:'2760 ', city:'Lemont', state:'IL', zip:'60148'}, {name:'T', address:'2760 ', city:'Lemont', state:'IL', zip:'60148'}, {name:'Sa', address:'2760 ', city:'Lemont', state:'IL', zip:'60148'}, {name:'Edw', address:'2760 ', city:'Lemont', state:'IL', zip:'60148'}, ];

currentContactIndex = 0; currentContact = contacts[currentContactIndex];

// Functions function viewCurrentContact() { console.log('V3... viewCurrentContact()'); document.getElementById("name").value = currentContact.name; document.getElementById("address").value = currentContact.address; document.getElementById("city").value = currentContact.city; document.getElementById("state").value = currentContact.state; document.getElementById("zip").value = currentContact.zip; }

function previous() { if (currentContactIndex > 0) { currentContactIndex--; } currentContact = contacts[currentContactIndex]; viewCurrentContact();

// Todo: Disable previous button when currentContactIndex equal to 0. }

function next() { if (currentContactIndex < (contacts.length-1)) { currentContactIndex++; } currentContact = contacts[currentContactIndex]; viewCurrentContact(); console.log('next()'); // Todo: Disable next button when there is no next item. }

function add() { console.log('add()');

// Todo: Implement add functionality by inserting new element into array. }

function remove() { console.log('remove()');

// Todo: Implement delete functionality by deleting element from array. }

function zipFocusFunction() { console.log('focusFunction()');

// Todo: Remove the function as it is not needed. }

function zipBlurFunction() { getPlace(); }

function keyPressed() { console.log('keyPressed()');

// This type of function should be useful in search as it implements keyPressed. }

function getPlace() { var zip = document.getElementById("zip").value console.log("zip:"+zip);

console.log("function getPlace(zip) { ... }"); var xhr = new XMLHttpRequest();

// Register the embedded handler function xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = xhr.responseText; console.log("result:"+result); var place = result.split(', '); if (document.getElementById("city").value == "") document.getElementById("city").value = place[0]; if (document.getElementById("state").value == "") document.getElementById("state").value = place[1]; } } xhr.open("GET", "contact-manager-v6.php?zip=" + zip); xhr.send(null); }

CSS

input { text-align:left; }

PHP

// Array of city/states associated with a given zip code for 601?? zip codes. $cityStateIL601 = array( "60101" => "Addison, IL", "60102" => "Algonquin, IL", "60103" => "Bartlett, IL", "60104" => "Bellwood, IL", "60105" => "Bensenville, IL", "60106" => "Bensenville, IL", "60107" => "Streamwood, IL", "60108" => "Bloomingdale, IL", "60109" => "Burlington, IL", "60110" => "Carpentersville, IL", "60111" => "Clare, IL", "60112" => "Cortland, IL", "60113" => "Creston, IL", "60115" => "Dekalb, IL", "60116" => "Carol Stream, IL", "60117" => "Bloomingdale, IL", "60118" => "Dundee, IL", "60119" => "Elburn, IL", "60120" => "Elgin, IL", "60121" => "Elgin, IL", "60122" => "Elgin, IL", "60123" => "Elgin, IL", "60125" => "Carol Stream, IL", "60126" => "Elmhurst, IL", "60128" => "Carol Stream, IL", "60129" => "Esmond, IL", "60130" => "Forest Park, IL", "60131" => "Franklin Park, IL", "60132" => "Carol Stream, IL", "60133" => "Hanover Park, IL", "60134" => "Geneva, IL", "60135" => "Genoa, IL",

);

$zip = $_GET["zip"]; if (array_key_exists($zip, $cityStateIL601)) print $cityStateIL601[$zip]; else print " , "; ?>