Bashir week 5

week-5/Homework/mandatory/2-exercises/exercises.js

@@ -18,17 +18,16 @@
  */
 // LEAVE YOUR ANSWER HERE (THIS IS OPTIONAL)
 
-
 /**
  * This function recieves a lists of people. Each object should contain the name and the occupation of a person.
  * Look for usage of the function in the code and see what variable is passed into it as an argument.
- * 
+ *
  * Create and insert the below HTML elements to the DOM for each of Objects in the Array as follows:
  *  1. Add a <h1> tag to the website containing the name of the person
  *  2. Add a <h2> tag to the website containing the job of the person
  *
  * All of your HTML elements should go inside the Div tag with the id "content".
- * 
+ *
  * An example "content" div should look like:
  * <div id="content">
  *      <h1>Mario</h1>
@@ -40,41 +39,68 @@
 function insertPeopleData(arrayOfPeople) {
   let content = document.querySelector("#content");
   //Write your code in here
+  arrayOfPeople.forEach(function (person) {
+    let h1 = document.createElement("h1");
+    let h2 = document.createElement("h2");
+    content.appendChild(h1).textContent = person.name;
+    content.appendChild(h2).textContent = person.job;
+  });
 }
-
 /**
  *
  * Create a list of shopping items using an unordered HTML list.
  * The input of this function is a simple Array of Strings, look for the concrete example in the code.
- * 
+ *
  * All of your HTML elements should go inside the Div tag with the id "content".
  *
  * Hint for type of lists in HTML: https://www.w3schools.com/html/html_lists.asp
  */
 function insertShoppingList(shoppingList) {
   //Write your code in here
+  var unorderedList = document.createElement("ul");
+  shoppingList.forEach((item) => {
+    var listItem = document.createElement("li");
+    listItem.innerText = item;
+    unorderedList.appendChild(listItem);
+  });
+  content.appendChild(unorderedList);
 }
-
 /**
  * I'd like to display my three favorite books inside a nice webpage!
- * 
+ *
  * Iterate through the array of books passed into this function and insert each book to page as follows:
  *   - Create a <ul> list and display each book details in <li> element.
  *   - For each book, create a <p> element with the book title and author and append it to the page.
  *   - Add an <img> after <p> element to each book that links to a URL of the book cover.
  *     You should find an appropriate image to each book.
  *   - Change the style of the book depending on whether you have read it (green) or not (red).*
- * 
+ *
  * Find in the code what properties a book object has in the array.
- *  
+ *
  * All of your HTML elements should go inside the Div tag with the id "content".
- * 
+ *
  * The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com
  */
 function insertBooks(books) {
   //Write your code in here
+  let bookslist = document.createElement("ul");
+  let imageList = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"];
+  books.forEach((item, index) => {
+    let book = document.createElement("li");
+    if (item.alreadyRead) {
+      book.style.backgroundColor = "green";
+    } else {
+      book.style.backgroundColor = "red";
+    }
+    let bookName = document.createElement("p");
+    bookName.innerText = `${item.title}-${item.author}`;
+    let bookImg = document.createElement("img");
+    bookImg.src = imageList[i];
+    book.appendChild(bookName);
+    book.appendChild(bookImg);
+    bookslist.appendChild(book);
+  });
 }
-
 //
 //
 //
@@ -86,9 +112,9 @@ function insertBooks(books) {
 //
 
 let people = [
-  { name: "Chris", job: "Teacher" },
-  { name: "Joanna", job: "Student" },
-  { name: "Boris", job: "Prime Minister" }
+  {name: "Chris", job: "Teacher"},
+  {name: "Joanna", job: "Student"},
+  {name: "Boris", job: "Prime Minister"},
 ];
 
 insertPeopleData(people);
@@ -101,18 +127,18 @@ const books = [
   {
     title: "The Design of Everyday Things",
     author: "Don Norman",
-    alreadyRead: false
+    alreadyRead: false,
   },
   {
     title: "The Most Human Human",
     author: "Brian Christian",
-    alreadyRead: true
+    alreadyRead: true,
   },
   {
     title: "The Pragmatic Programmer",
     author: "Andrew Hunt",
-    alreadyRead: true
-  }
+    alreadyRead: true,
+  },
 ];
 
 insertBooks(books);