Ebenezer core 2 wk3

.vscode/settings.json

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

Week-1/Homework/mandatory/1-writers.js

@@ -14,31 +14,42 @@ let writers = [
     lastName: "Woolf",
     occupation: "writer",
     age: 59,
-    alive: false
+    alive: false,
   },
   {
     firstName: "Zadie",
     lastName: "Smith",
     occupation: "writer",
     age: 41,
-    alive: true
+    alive: true,
   },
   {
     firstName: "Jane",
     lastName: "Austen",
     occupation: "writer",
     age: 41,
-    alive: false
+    alive: false,
   },
   {
     firstName: "bell",
     lastName: "hooks",
     occupation: "writer",
     age: 64,
-    alive: true
-  }
+    alive: true,
+  },
 ];
 
+writers.forEach(function (writer) {
+  console.log(
+    `"Hi, my name is ${writer.firstName} ${writer.lastName}. I am ${writer.age} years old, and work as a ${writer.occupation}."`
+  );
+});
 /*
 If you want an extra challenge, only `console.log()` the writers that are alive.
 */
+
+writers.forEach(function (writer) {
+  if (writer.alive === true) {
+    console.log(`The writer ${writer.firstName} ${writer.lastName} is alive`);
+  }
+});

Week-1/Homework/mandatory/2-water-bottle.js

@@ -10,15 +10,18 @@ We made a start on this for you here:
 
 let bottle = {
   volume: 0,
-  fill: function() {
+  fill: function () {
     // calling this function should make you bottles volume = 100;
+    bottle.volume = 100;
   },
-  drink: function() {
+  drink: function () {
     // calling this function should decrease your bottles volume by 10;
+    bottle.volume = 10;
   },
-  empty: function() {
+  empty: function () {
     // this function should return true if your bottles volume = 0
-  }
+    bottle.volume = 0;
+  },
 };
 
 /*

Week-1/Homework/mandatory/3-groceries.js

@@ -10,3 +10,9 @@ let groceryList = {
   item2: "",
   item3: ""
 };
+
+for (let grocery in groceryList) {
+  groceriesToBuy.push(groceryList[grocery]);
+}
+
+console.log(groceriesToBuy);

Week-1/Homework/mandatory/4-codewars.md

@@ -15,3 +15,6 @@ Exercises:
 - [Crash Override](https://www.codewars.com/kata/crash-override/train/javascript)
 - [Job Matching #1](https://www.codewars.com/kata/56c22c5ae8b139416c00175d/train/javascript)
 - [Split the Bill](https://www.codewars.com/kata/5641275f07335295f10000d0/train/javascript)
+
+
+Codewar solutions link:   https://www.codewars.com/users/edksam/completed_solutions

Week-1/InClass/B-objects-get-set/exercise-1.js

@@ -3,16 +3,14 @@
 */
 
 let kitten = {
-    ageMonths: 3,
-    isFemale: true,
-    furColour: "brown"
+  ageMonths: 3,
+  isFemale: true,
+  furColour: "brown",
 };
 
 // YOUR CODE GOES BELOW HERE
+console.log(kitten.ageMonths);
+console.log(kitten.isFemale);
+console.log(kitten.furColour);
 
-
-
-
-
-
-// YOUR CODE GOES ABOVE HERE
+// YOUR CODE GOES ABOVE HERE

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,66 @@
+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 (e) {
+  e.preventDefault();
+
+  //check for email validity
+  let emailMatch = "@";
+  // Check for non-empty
+  if (!email.value.includes(emailMatch) || email.value.length <= 0) {
+    alert("Please enter a valid email");
+    email.style.backgroundColor = "red";
+  }
+  if (email.value.length <= 0) {
+    alert("Please enter your 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 your description");
+    describe.style.backgroundColor = "red";
+  }
+
+  // check for all fields entered
+  if (!email.value == "" && !name.value == "" && !describe.value == "") {
+    alert("Thank you for filling the form");
+  }
+
+  email.value = "";
+  name.value = "";
+  describe.value = "";
+});