Question solved and project 1st part done

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Week-2/Homework/mandatory/2-exercises/exercises.js

@@ -15,6 +15,14 @@
  */
 function exerciseOne(arrayOfPeople) {
   let content = document.querySelector("#content");
+  arrayOfPeople.forEach((person) => {
+    h1 = document.createElement("h1");
+    h2 = document.createElement("h2");
+    h1.textContent = person.name;
+    h2.textContent = person.job;
+    content.appendChild(h1);
+    content.appendChild(h2);
+  });
 }
 
 /**
@@ -25,12 +33,23 @@ function exerciseOne(arrayOfPeople) {
  *
  */
 function exerciseTwo(shopping) {
-  //Write your code in here
+  let contentDiv = document.getElementById("content");
+  // create Element of unordered list inside div
+  let list = document.createElement("ul");
+  contentDiv.appendChild(list);
+
+  shopping.forEach((shoppingItem) => {
+    let li = document.createElement("li");
+    li.textContent = shoppingItem;
+    // let arrItem = document.createTextNode(shoppingItem);
+    // li.appendChild(arrItem);
+    list.appendChild(li);
+  });
 }
 
 /**
     I'd like to display my three favorite books inside a nice webpage!
-
+ 
     const books = [
         {
             title: "The Design of Everyday Things",
@@ -48,17 +67,53 @@ function exerciseTwo(shopping) {
             alreadyRead: true
         }
     ];
-
+ 
     Iterate through the array of books.
     - For each book, create a <p> element with the book title and author and append it to the page.
     - Use a <ul> and <li> to display the books.
     - Add an <img> 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
+
+  books[0].src =
+    "https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg";
+  books[1].src =
+    "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1328321953l/10814191.jpg";
+  books[2].src =
+    "https://images-na.ssl-images-amazon.com/images/I/418M2053aNL.jpg";
+
+  let contentDiv = document.querySelector("#content");
+  let ul = document.createElement("ul");
+  contentDiv.appendChild(ul);
+
+  books.forEach((book) => {
+    //  create a <p> element
+    //Assign textContent with the book title and author
+    // append it to the page.
+    let li = document.createElement("li");
+    let p = document.createElement("p");
+    let img = document.createElement("img");
+    let a = document.createElement("a");
+
+    p.textContent = book.title + " - " + book.author;
+    img.src = book.src;
+    // img.setAttribute("src", book.src)
+
+    li.appendChild(p);
+    li.appendChild(img);
+    ul.appendChild(li);
+
+    if (book.alreadyRead) {
+      li.style.backgroundColor = "green";
+    } else {
+      li.style.backgroundColor = "red";
+    }
+  });
 }
 
 //
@@ -74,10 +129,10 @@ function exerciseThree(books) {
 let people = [
   { name: "Chris", job: "Teacher" },
   { name: "Joanna", job: "Student" },
-  { name: "Boris", job: "Prime Minister" }
+  { name: "Boris", job: "Prime Minister" },
 ];
 
-exerciseOne(people);
+// exerciseOne(people);
 
 let shopping = ["Milk", "Break", "Eggs", "A Dinosaur", "Cake", "Sugar", "Tea"];
 
@@ -87,18 +142,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,
+  },
 ];
 
 exerciseThree(books);

Week-2/Homework/mandatory/3-project/README.md

@@ -1,6 +1,6 @@
 # For homework
 
-## Part 1
+## Part 1 
 
 Open `index.html` in your browser. Notice there are 3 buttons: blue, orange and green.
 Edit the file `./js/main.js` and add the following functionality:

Week-2/Homework/mandatory/3-project/js/main.js

@@ -0,0 +1,85 @@
+const blueBtn = document.querySelector("#blueBtn");
+const orangeBtn = document.querySelector("#orangeBtn");
+const greenBtn = document.querySelector("#greenBtn");
+const jumbotron = document.querySelector(".jumbotron");
+const donateABikeBtn = document.querySelector(".buttons a");
+const volunteer = document.querySelector(".buttons .btn-secondary");
+
+blueBtn.addEventListener("click", function () {
+  jumbotron.style.backgroundColor = "#588fbd";
+  donateABikeBtn.style.backgroundColor = "#ffa500";
+  volunteer.style.backgroundColor = "#000000";
+  volunteer.style.color = "#ffffff";
+});
+
+orangeBtn.addEventListener("click", function () {
+  jumbotron.style.backgroundColor = "#f0ad4e";
+  donateABikeBtn.style.backgroundColor = "#5751fd";
+  volunteer.style.backgroundColor = "##31b0d5";
+  volunteer.style.color = "#ffffff";
+});
+
+greenBtn.addEventListener("click", function () {
+  jumbotron.style.backgroundColor = "#87ca8a";
+  donateABikeBtn.style.backgroundColor = "black";
+  volunteer.style.backgroundColor = "#8c9c08`";
+  volunteer.style.color = "#ffffff";
+});
+
+// Form Validation
+const submitBtn = document.querySelector("[type=submit]");
+const name = document.querySelector("#example-text-input");
+const email = document.querySelector("#exampleInputEmail1");
+const describe = document.querySelector("#exampleTextarea");
+
+submitBtn.addEventListener("click", function (event) {
+  event.preventDefault();
+
+  const emailMatch = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+
+  if (email.value.length <= 0) {
+    alert("Please enter an email");
+    email.style.backgroundColor = "red";
+  }
+
+  if (name.value.length <= 0) {
+    alert("Please enter your name");
+    name.style.backgroundColor = "red";
+  }
+
+  if (describe.value.length <= 0) {
+    alert("Please enter a description");
+    describe.style.backgroundColor = "red";
+  }
+
+  // if (
+  //   email.value.length >= 0 &&
+  //   name.value.length >= 0 &&
+  //   describe.value.length >= 0
+  // ) {
+  //   alert("Thank you for filling the form");
+  //   name.value = "";
+  //   email.value = "";
+  //   describe.value = "";
+  // }
+
+  //Email Validation
+  // if (!email.value.match(emailMatch)) {
+  //   alert("Please enter a valid email");
+  //    email.style.backgroundColor = "yellow";
+  // } else if (
+  //   email.value.length >= 0 &&
+  //   name.value.length >= 0 &&
+  //   describe.value.length >= 0
+  // ) {
+  //   alert("Thank you for filling the form");
+  //   name.value = "";
+  //   email.value = "";
+  //   describe.value = "";
+  // }
+
+  if (email.validity.patternMismatch) {
+    alert("Enter Valid Email");
+    email.style.backgroundColor = "red";
+  }
+});