diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..9e91d3b 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -14,9 +14,22 @@ * */ function exerciseOne(arrayOfPeople) { - let content = document.querySelector("#content"); -} + const targetElement = document.getElementById('content'); // finding my target element. + arrayOfPeople.forEach(objectOfArray => { + // console.log(objectOfArray.name); // checking what objectOfArray.name is accessing. + // console.log(objectOfArray.job); // checking what objectOfArray.job is accessing. + + let newHeading = document.createElement('h1'); // creating a h1 objectOfArray + newHeading.innerText = objectOfArray.name; // add text to h1 objectOfArray + + let newSubHeading = document.createElement('h2'); // creating a h2 objectOfArray + newSubHeading.innerText = objectOfArray.job; // add text to h2 objectOfArray + + targetElement.appendChild(newHeading); // add h1 to div with id='content' + targetElement.appendChild(newSubHeading); // add h2 to div with id='content' + }); +} /** * * Create a list of shopping items. You should use an unordered list. @@ -26,6 +39,21 @@ function exerciseOne(arrayOfPeople) { */ function exerciseTwo(shopping) { //Write your code in here + const findElement = document.getElementById('content'); // finding my target element. + + let unorderedList = document.createElement('ul'); + unorderedList.innerText = 'Shopping List'; + + shopping.forEach(shoppingItem => { + // console.log(shoppingItem); // what does shopping item access? + // create a list item for each item in the 'shopping' array + let listItem = document.createElement('li'); + listItem.innerText = shoppingItem; + + unorderedList.appendChild(listItem); + + findElement.appendChild(unorderedList); + }); } /** @@ -59,6 +87,29 @@ function exerciseTwo(shopping) { **/ function exerciseThree(books) { //Write your code in here + const positionForParagraph = document.getElementById('content'); + // console.log(positionForParagraph); + + let unorderedListForBooks = document.createElement('ul'); + positionForParagraph.appendChild(unorderedListForBooks); + + books.forEach(book => { + + let titleAndAuthor = document.createElement('p'); + // console.log(`${book.title} written by ${book.author}`); + titleAndAuthor.innerText = `${book.title} written by ${book.author}`; + + let listedItem = document.createElement('li'); + // console.log(listedItem); + + let imageItem = document.createElement('img'); + console.log(imageItem); + imageItem.style = background-color red + + unorderedListForBooks.appendChild(listedItem); + listedItem.appendChild(titleAndAuthor); + listedItem.appendChild(imageItem); + }); } //