JS Family Arrays

Purpose: To learn more about functions, objects, and loops. We will also be building on some JavaScript principles that we have already learned.

In this lab you will build a program that collects information about your family and then displays it on the screen.

1. Download the starter file setup. Youre going to be writing your JavaScript in scripts.js.

2. Create a variable called myFamily that is an array. This is where we will store your family.

Example: var myFamily = [];

3. Create a function called build person. It will not have any input parameters, but it will return an object that represents a person.

• Inside this function, use individual prompt statements to ask the user for the family members: full name, age, relationship (to you), favorite color, and favorite food. For example: Joe Smith, 79, grandpa, brown, prunes. Collect these bits of data in local variables inside the function. Example: var fullName = prompt("What is their full name?");
• Once you have variables that contain each of these items, create a new object that contains these values and add them to the object. Then, return the object from the function.

4. Now that we have a function that builds a person object, we are going to make a do-while loop that will call this function multiple times to create multiple objects.

• Create a Boolean variable, then make a while loop as long as that variable is true. Inside the while loop, set the Boolean to the answer you get from a confirm() dialog box that asks if they want to continue adding family members. Example: confirm("Do you want to continue adding family members?");
• Also inside the while loop, call the buildPerson() function. Assign the person object that is returned to a variable, then add that variable to the myFamily array. Example, if the person object is in a variable called person you could do this: myFamily.push(person);

5. After the while loop, we need to create a for loop to loop back over the array and print the family members to the web page.

• To loop over the array, use a for loop to increment an index variable from 0 to array.length.
• Inside the for loop, you can access each individual family member object by using notation like myFamily[i] (assuming your index variable is i.)
• To access an individual property of the person, use dot notation. Example: myFamily[i].fullName

6. Output the contents of the each object in HTML to the web page using document.write(). One suggestion would be to output their full name in an < h1> tag and then each of the other properties in a < p> tag.