building an address book

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
     <button type="button" onclick="addbook()">Call Building an Address Book!</button>
     <button type="button" onclick="cleardata()">Clear</button>
   <br>
    <div id="result"></div>
  </body>

</html>

// Code goes here

/*
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888 - 8888",
    email: "mary.johnson@example.com"
    };
    
var contacts = [];
contacts.push(bob);
contacts.push(mary);

////var contacts = [bob, mary];
console.log(contacts[1].phoneNumber);

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};

var contacts = [bob, mary];

// printPerson added here
function printPerson(person){
    console.log(person.firstName + " "+ person.lastName);
    }
printPerson(contacts[0]);   
printPerson(contacts[1]);
    


//4. Listing Everybody
function addressbook(){
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};

var contacts = [bob, mary];

function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
}

function list(){
    contactsLength = contacts.length;
    for(var i = 0 ; i < contactsLength ; i++)
    {
        printPerson(contacts[i]);
        }
    }
 
 list();
}
*/


//5. Finding that Special Someone
function addbook(){
var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};

var contacts = [bob, mary];
var txtresult = "";
function printPerson(person) {
     txtresult = txtresult + "<br>" + person.firstName + " " + person.lastName;
}

function list() {
	var contactsLength = contacts.length;
	for (var i = 0; i < contactsLength; i++) {
		printPerson(contacts[i]);
	}
}

/*Create a search function
then call it passing "Jones"*/
function search(lastName){
     for(var j = 0 ; j < contactsLength ; j++){
         if(contacts[j].lastName == lastName){
             printPerson(contacts[j]);
             }
         }
    }
//search('Jones');  

function add(firstName,lastName,phoneNumber,email){
    contacts[contacts.length] = {
        firstName : firstName,
         lastName : lastName,
          phoneNumber : phoneNumber,
           email : email
        }
    }

add('chaiwud','taitanee','0801231344' , 'chaiwud.t@gmail.com');
list();
 document.getElementById('result').innerHTML = txtresult ;
}

function cleardata(){
   document.getElementById('result').innerHTML = " " ;
}

/* Styles go here */