Week 4: Ponder and Prove
Before beginning this Task:
- Make sure you have read and understood the reading for the week.
- Download the following Zip file and extract it into a local folder of your choice: week04.zip
- It would probably also be helpful to review these examples of using array methods from week 3, or to watch this short video on creating DOM with loops
- Open the folder created by unzipping week04.zip in VS Code
Object Literals
In your previous weeks' tasks, you declared and used individual variables. In this Task, you are to rework the Biography Task from week 02 using object literals.
Data Changes
Complete the following steps.
In the task4.js file:
- Declare a new variable to hold information about yourself and assign an empty object to the variable ( hint: {} )
- Add a property to this object literal named name and set its value to be your name as a string.
- Add a property named photo. Set its value to be an image's path and name (one used in Task 2) as a string.
- Add a property named favoriteFoods. Set its value to be an array of your favorite foods as strings ( hint: [] ).
- Add a property named hobbies. Set its value to be an array of your hobbies as strings.
- Add a property named placesLived. Set its value to be an empty array.
- Add an item to the placesLived array that is new object literal with two properties: place and length
- For each of these properties, add appropriate values as strings.
- Add additional object literals with appropriate values to the placesLived array for each place you've lived
Output Changes
Complete the following steps.
In the task4.js file:
- Assign the value of the name property (of the object declared above) to the HTML <span> who's ID is name
- Assign the value of the photo property as the src attribute of the HTML <img> who's ID is photo
- Assign the value of the name property as the alt attribute of the HTML <img> who's ID is photo
- For each favorite food in the favoriteFoods property, create an HTML <li> element and place its value in the <ul> element
- Append the <li> elements created above as children of the HTML <ul> element who's ID is favorite-foods
- Repeat Step 4 for each hobby in the hobbies property
- Repeat Step 5 using the HTML <ul> element with an ID of hobbies
-
For each object in the
placesLived property:
- Create an HTML <dt> element and put its place property in the <dt> element
- Create an HTML <dd> element and put its length property in the <dd> element
- Append the HTML <dt> and <dd> elements created above to the HTML <dl> element with an ID of places-lived