JS2 week2 mandatory

Author: MartinBoylan

Week-2/Homework/mandatory/.DS_Store

@@ -13,8 +13,18 @@
  *      .....
  * </div>
  */
+
 function exerciseOne(arrayOfPeople) {
   let content = document.querySelector("#content");
+
+  for (let i = 0; i < arrayOfPeople.length; i++) {
+    let h = document.createElement("H1");
+    let t = document.createElement("H2");
+    h.innerText = arrayOfPeople[i].name;
+    t.innerText = arrayOfPeople[i].job;
+    content.appendChild(h);
+    content.appendChild(t);
+  }
 }
 
 /**
@@ -25,7 +35,12 @@ function exerciseOne(arrayOfPeople) {
  *
  */
 function exerciseTwo(shopping) {
-  //Write your code in here
+  document.createElement("ul");
+  for (let i = 0; i < shopping.length; i++) {
+    let li = document.createElement("li");
+    li.innerText = shopping[i];
+    content.appendChild(li);
+  }
 }
 
 /**
@@ -57,8 +72,32 @@ function exerciseTwo(shopping) {
 
     The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
 **/
+let bookpics = [
+  "https://mitpress.mit.edu/sites/default/files/9780262640374.jpg",
+  "https://images.gr-assets.com/books/1295465264l/8884400.jpg",
+  "https://upload.wikimedia.org/wikipedia/en/8/8f/The_pragmatic_programmer.jpg",
+];
+
 function exerciseThree(books) {
-  //Write your code in here
+
+  let unorderedList = document.createElement("ul");
+  content.appendChild(unorderedList);
+  for (let i = 0; i < bookpics.length; i++) {
+    let p = document.createElement("p");
+    let list = document.createElement("li");
+    let images = document.createElement("img");
+    p.innerText = books[i].title + " " + books[i].author;
+    images.src = bookpics[i];
+    unorderedList.appendChild(list);
+    list.appendChild(p);
+    list.appendChild(images);
+
+    if (books[i].alreadyRead === true) {
+      list.style.backgroundColor = "green";
+    } else {
+      list.style.backgroundColor = "red";
+    }
+  }
 }
 
 //
@@ -74,7 +113,7 @@ 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);
@@ -87,18 +126,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/2-exercises/exercises.js

@@ -0,0 +1,77 @@
+/* clicking blue */
+
+let blueButton = document.getElementById("blueBtn");
+let jumbotron = document.querySelector(".jumbotron");
+let donateBikeButton = document.querySelector(".buttons a:first-of-type");
+let volunteerbtn = document.querySelector(".buttons a:last-of-type");
+let onBlueButtonClick = function () {
+  jumbotron.style.backgroundColor = `#588fbd`;
+  donateBikeButton.style.backgroundColor = "#ffa500";
+  volunteerbtn.style.backgroundColor = "black";
+  volunteerbtn.style.color = "white";
+};
+blueButton.addEventListener("click", onBlueButtonClick);
+
+/* Clicking orange */
+
+let orangeButton = document.getElementById("orangeBtn");
+
+let onOrangeButtonClick = function () {
+  jumbotron.style.backgroundColor = `#f0ad4e`;
+  donateBikeButton.style.backgroundColor = "#5751fd";
+  volunteerbtn.style.backgroundColor = "#31b0d5";
+  volunteerbtn.style.color = "white";
+};
+orangeButton.addEventListener("click", onOrangeButtonClick);
+
+/* Clicking Green */
+
+let greenButton = document.getElementById("greenBtn");
+
+let onGreenButtonClick = function () {
+  jumbotron.style.backgroundColor = `#87ca8a`;
+  donateBikeButton.style.backgroundColor = "black";
+  volunteerbtn.style.backgroundColor = "#8c9c08";
+};
+greenButton.addEventListener("click", onGreenButtonClick);
+
+/*   Validate User */
+
+let inputEmail = document.getElementById("exampleInputEmail1");
+let inputName = document.getElementById("example-text-input");
+let description = document.getElementById("exampleTextarea");
+let submitButton = document.querySelector("form button");
+
+let validateUser = function (e) {
+  e.preventDefault();
+  let emailValue = inputEmail.value;
+  let nameValue = inputName.value;
+  let descriptionValue = description.value;
+  if (emailValue.trim() === "" || emailValue.includes("@") === false) {
+    inputEmail.style.backgroundColor = "red";
+  } else {
+    inputEmail.style.backgroundColor = "white";
+  }
+
+  if (nameValue.trim() === "") {
+    inputName.style.backgroundColor = "red";
+  } else {
+    inputName.style.backgroundColor = "white";
+  }
+
+  if (descriptionValue.trim() === "") {
+    description.style.backgroundColor = "red";
+  } else {
+    description.style.backgroundColor = "white";
+  }
+
+  if (
+    descriptionValue.trim() !== "" &&
+    nameValue.trim() !== "" &&
+    emailValue.trim() !== "" &&
+    emailValue.includes("@") === true
+  ) {
+    alert("Thanks mate");
+  }
+};
+submitButton.addEventListener("click", validateUser);