From 2a2588c08a8e29fa481bc45356d165b5ee5e9d83 Mon Sep 17 00:00:00 2001 From: DouglasVDM <74470226+DouglasVDM@users.noreply.github.com> Date: Mon, 1 Mar 2021 20:26:06 +0200 Subject: [PATCH 1/4] exerciseOne --- .../mandatory/2-exercises/exercises.js | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..1f4ccda 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -14,9 +14,29 @@ * */ function exerciseOne(arrayOfPeople) { - let content = document.querySelector("#content"); -} + + let targetElement = document.getElementById("content"); + // let targetElement = document.querySelector('div'); + + let newHeading = document.createElement('h1'); // creating a h1 element + let newSubHeading = document.createElement('h2'); // creating a h2 element + + const newName = 'H1 for name of the person'; + let nameOfPerson = document.createTextNode(newName); // creating a text element + + const newJob = 'h2 for job of person'; + let jobOfPerson = document.createTextNode(newJob); // creating a text element + + + newHeading.appendChild(nameOfPerson); // append text to h1 element + newSubHeading.appendChild(jobOfPerson); // append text to h1 element + + // document.targetElement.appendChild(newHeading); + // document.targetElement.appendChild(newSubHeading); + targetElement.appendChild(newHeading); // + targetElement.appendChild(newSubHeading); +} /** * * Create a list of shopping items. You should use an unordered list. From 2caf86dad4fddfe7b71e3e04d616cb43e9cc4633 Mon Sep 17 00:00:00 2001 From: DouglasVDM <74470226+DouglasVDM@users.noreply.github.com> Date: Mon, 1 Mar 2021 21:44:54 +0200 Subject: [PATCH 2/4] exerciseOne --- .../mandatory/2-exercises/exercises.js | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 1f4ccda..f54f98e 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -14,27 +14,22 @@ * */ function exerciseOne(arrayOfPeople) { - - let targetElement = document.getElementById("content"); - // let targetElement = document.querySelector('div'); - - let newHeading = document.createElement('h1'); // creating a h1 element - let newSubHeading = document.createElement('h2'); // creating a h2 element - - const newName = 'H1 for name of the person'; - let nameOfPerson = document.createTextNode(newName); // creating a text element - - const newJob = 'h2 for job of person'; - let jobOfPerson = document.createTextNode(newJob); // creating a text element + 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' + }); - newHeading.appendChild(nameOfPerson); // append text to h1 element - newSubHeading.appendChild(jobOfPerson); // append text to h1 element - - // document.targetElement.appendChild(newHeading); - // document.targetElement.appendChild(newSubHeading); - targetElement.appendChild(newHeading); // - targetElement.appendChild(newSubHeading); } /** @@ -46,6 +41,7 @@ function exerciseOne(arrayOfPeople) { */ function exerciseTwo(shopping) { //Write your code in here + } /** From b0fd3bbaaa0332ef15325a14769767f3c3f61a05 Mon Sep 17 00:00:00 2001 From: DouglasVDM <74470226+DouglasVDM@users.noreply.github.com> Date: Mon, 1 Mar 2021 21:59:18 +0200 Subject: [PATCH 3/4] exerciseTwo --- .../mandatory/2-exercises/exercises.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index f54f98e..93a7d13 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -41,7 +41,24 @@ 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); + }) + + + } /** From ffb35757e91b965ccf6d006e7c152bdd100c6198 Mon Sep 17 00:00:00 2001 From: DouglasVDM <74470226+DouglasVDM@users.noreply.github.com> Date: Mon, 1 Mar 2021 23:26:04 +0200 Subject: [PATCH 4/4] exerciseThree --- .../mandatory/2-exercises/exercises.js | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 93a7d13..9e91d3b 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -29,8 +29,6 @@ function exerciseOne(arrayOfPeople) { targetElement.appendChild(newHeading); // add h1 to div with id='content' targetElement.appendChild(newSubHeading); // add h2 to div with id='content' }); - - } /** * @@ -50,15 +48,12 @@ function exerciseTwo(shopping) { // 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 + listItem.innerText = shoppingItem; unorderedList.appendChild(listItem); findElement.appendChild(unorderedList); - }) - - - + }); } /** @@ -92,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); + }); } //