rendered paste body<!--- Andrew Pyron 03.03.08 Section 0501--><html><head><title>Andrew Pyron's Facebook</title></head><body><script type="text/javascript">function init(){var name = document.getElementById('idName');var age = document.getElementById('idAge');var gender = document.getElementById('idGender');var college = document.getElementById('idCollege');var hometown = document.getElementById('idHometown');var photo = document.getElementById('idPhoto');name.innerHTML = "Andrew Pyron";age.innerHTML = "21";gender.innerHTML = "Male";college.innerHTML = "Purdue University";hometown.innerHTML = "Carmel, Indiana";photo.innerHTML = "<img src=http://www.nndb.com/films/057/000068850/the-incredibles-1-sized.jpg>";}init();function updateMyDetails(){var detailType = document.getElementById('MyDetailType').value;var updatedValue = document.getElementById('UserInput');var name = document.getElementById('idName');if (detailType == "Name"){ name.innerHTML = updatedValue.value;}var age = document.getElementById('idAge');if (detailType == "Age"){ age.innerHTML = updatedValue.value;}var gender = document.getElementById('idGender');if (detailType == "Gender"){ gender.innerHTML = updatedValue.value;}var college = document.getElementById('idCollege')if (detailType == "College"){ college.innerHTML = updatedValue.value;}var hometown = document.getElementById('idHometown')if (detailType == "Hometown"){ hometown.innerHTML = updatedValue.value;}var photo = document.getElementById('idPhoto')if (detailType == "Photo"){ photo.innerHTML = "<img src='" + updatedValue.value + "'>";}}function addFriend() {getFriendHTML();var result = getFriendHTML();var friendsTable = document.getElementById("Friends");var lastRow = friendsTable.rows.length;var newRow = friendsTable.insertRow(lastRow);newRow.innerHTML = result;}function getFriendHTML() {var name = document.getElementById('FriendsName').value;var age = document.getElementById('FriendsAge').value;var college = document.getElementById('FriendsCollege').value;var relationship = document.getElementById('FriendsRelationship').value;var webpage = document.getElementById('FriendsWebsite').value;var photo = document.getElementById('FriendsPhoto').value;var table1 = "<table border=1 bgcolor='3366FF' align='right'>";table1 += "<tr><td>Name:</td><td>" + name + "</td><td rowspan='5'><img src='" + photo + "'</td></tr>";table1 += "<tr><td>Age:</td><td>" + age + "</td></tr>";table1 += "<tr><td>College:</td><td>" + college + "</td></tr>";table1 += "<tr><td>Relationship:</td><td>" + relationship + "</td></tr>";table1 += "<tr><td>Webpage:</td><td>" + webpage + "</td></tr>";return table1;}</script><center><h1>Welcome to My Mini-Facebook Page!</h1></center><table align="center" width="70%" cols="2" rows="1"><tr> <td bgcolor="0033FF" width=338><b>My Details</b></td> <td bgcolor="0033FF"><b>My Friends</b></td></tr></table><table align="center" width="70%" rows="2" cols="2"><td valign="top"> <table align="left" id = "MyDetails" cellpadding=5 colspan="50%"> <tr> <td bgcolor="6699FF">Name: </td> <td id="idName"></td> </tr> <tr> <td bgcolor="6699FF">Age: </th> <td id="idAge"></td> </tr> <tr> <td bgcolor="6699FF">Gender: </th> <td id="idGender"></td> </tr> <tr> <td bgcolor="6699FF">College: </th> <td id="idCollege"></td> </tr> <tr> <td bgcolor="6699FF">Hometown: </th> <td id="idHometown"></td> </tr> <tr> <td colspan="2" id="idPhoto"></td> </tr> </table></td><td><table id="Friends" border='1' colspan='50%'></table></td><td></td><tr></tr><td><table id="controlbox" bgcolor="99FFFF" border='1'> <tr> <td valign="bottom" align="left"> <b>Update My Details</b> <table > <tr> <td> <SELECT size="1" id="MyDetailType" Name="DetailType" > <OPTION value="Name">Name</OPTION> <OPTION value="Age">Age</OPTION> <OPTION value="Gender">Gender</OPTION> <OPTION value="College">College</OPTION> <OPTION value="Hometown">Hometown</OPTION> <OPTION value="Photo">Photo</OPTION> </SELECT> </td> <td> <INPUT type="TEXT" id="UserInput" size="30"/> </td> </tr> <tr> <td> <INPUT type="button" onclick="updateMyDetails();" VALUE="Update Details"> </td> </tr> </table> </td> </tr> <tr> <td> <br /> </td> </tr> <tr> <td><b>Add Friends</b></td> </tr> <tr> <td> <table> <tr> <td> Name </td> <td> <INPUT type="TEXT" id="FriendsName" size="30"/> </td> </tr> <tr> <td> Age </td> <td> <INPUT type="TEXT" id="FriendsAge" size"30"/> </td> <tr> <td> College </td> <td> <INPUT type="TEXT" id="FriendsCollege" size"30"/> </td> <tr> <td> Relationship </td> <td> <INPUT type="TEXT" id="FriendsRelationship" size="30"/> </td> </tr> <tr> <td> Website </td> <td> <INPUT type="TEXT" id="FriendsWebsite" size="30"/> </td> </tr> <tr> <td> Photo </td> <td> <INPUT type="TEXt" id="FriendsPhoto" size="30"/> </td> </tr> <tr> <td> <INPUT type="button" onclick="addFriend()" value="Add Friend"> </td> </tr> </table> </td> </tr></table></td></table></body></html>