diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js
index 174c5db..1dff1e8 100644
--- a/Week-2/Homework/mandatory/2-exercises/exercises.js
+++ b/Week-2/Homework/mandatory/2-exercises/exercises.js
@@ -15,8 +15,16 @@
*/
function exerciseOne(arrayOfPeople) {
let content = document.querySelector("#content");
+ for (var i = 0; i < arrayOfPeople.length; i++) {
+ // names and jobs
+ let nameEl = document.createElement("h1");
+ let jobEl = document.createElement("h2");
+ content.appendChild(nameEl);
+ content.appendChild(jobEl);
+ nameEl.innerHTML = arrayOfPeople[i].name;
+ jobEl.innerHTML = arrayOfPeople[i].job;
+ }
}
-
/**
*
* Create a list of shopping items. You should use an unordered list.
@@ -26,11 +34,15 @@ function exerciseOne(arrayOfPeople) {
*/
function exerciseTwo(shopping) {
//Write your code in here
+ let content = document.querySelector("#content");
+ for (var i = 0; i < shopping.length; i++) {
+ let shoppingList = document.createElement("ul");
+ content.appendChild(shoppingList);
+ shoppingList.innerHTML = shopping[i];
+ }
}
-
/**
I'd like to display my three favorite books inside a nice webpage!
-
const books = [
{
title: "The Design of Everyday Things",
@@ -48,19 +60,42 @@ function exerciseTwo(shopping) {
alreadyRead: true
}
];
-
Iterate through the array of books.
- For each book, create a
element with the book title and author and append it to the page.
- Use a
and - to display the books.
- Add an
to each book that links to a URL of the book cover.
- Change the style of the book depending on whether you have read it (green) or not (red).
-
The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
**/
function exerciseThree(books) {
//Write your code in here
+ let content = document.querySelector("#content");
+ for (var i = 0; i < books.length; i++) {
+ console.log("bookTitle", books[i].title);
+ let bookTitle = document.createElement("p");
+ content.appendChild(bookTitle);
+ bookTitle.innerHTML = `${books[i].title} by ${books[i].author}`;
+ let attributeLink = document.createElement("a");
+ let imageEl = document.createElement("img");
+ attributeLink.appendChild(imageEl);
+ bookTitle.appendChild(attributeLink);
+ if (books[i].title === "The Design of Everyday Things") {
+ imageEl.src = "./The-design-of-everyday-things.jpg";
+ attributeLink.href = "https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg";
+ } else if (books[i].title === "The Most Human Human") {
+ imageEl.src = "./The-most-human-human.jpg";
+ attributeLink.href = "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg";
+ } else {
+ imageEl.src = "./The-pragmatic-programmer.jpg";
+ attributeLink.href = "https://images-na.ssl-images-amazon.com/images/I/418M2053aNL._SX396_BO1,204,203,200_.jpg";
+ }
+ if (books[i].alreadyRead) {
+ bookTitle.style.backgroundColor = "green";
+ } else {
+ bookTitle.style.backgroundColor = "red";
+ }
+ }
}
-
//
//
//
@@ -70,19 +105,14 @@ function exerciseThree(books) {
//
//
//
-
let people = [
{ name: "Chris", job: "Teacher" },
{ name: "Joanna", job: "Student" },
{ name: "Boris", job: "Prime Minister" }
];
-
exerciseOne(people);
-
let shopping = ["Milk", "Break", "Eggs", "A Dinosaur", "Cake", "Sugar", "Tea"];
-
exerciseTwo(shopping);
-
const books = [
{
title: "The Design of Everyday Things",
@@ -100,5 +130,4 @@ const books = [
alreadyRead: true
}
];
-
-exerciseThree(books);
+exerciseThree(books);
\ No newline at end of file