Js2 week3 martin boylan

Week-1/Homework/mandatory/0-classwork.md

@@ -2,4 +2,4 @@
 
 Firstly, complete any exercises you did not complete during class. They are essential practice for the rest of the homework tasks.
 
-If you get stuck, reach out to your classmates on Slack for help!
+If you get stuck, reach out to your classmates on Slack for help!

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

@@ -39,6 +39,15 @@ let writers = [
   }
 ];
 
+
+
+
+for (const key of writers) {
+  console.log(`Hi, my name is ${key["firstName"]} ${key["lastName"]}. I am ${key["age"]} years old, and work as a ${key["occupation"]}.`);
+
+  } 
+
+
 /*
 If you want an extra challenge, only `console.log()` the writers that are alive.
 */

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

@@ -11,16 +11,23 @@ We made a start on this for you here:
 let bottle = {
   volume: 0,
   fill: function() {
+
+    this.volume = 100;
     // calling this function should make you bottles volume = 100;
   },
   drink: function() {
+    this.volume = this.volume - 10;
     // calling this function should decrease your bottles volume by 10;
   },
   empty: function() {
+    if (this.volume === 0)
+    return true
     // this function should return true if your bottles volume = 0
   }
 };
 
+bottle.fill();
+
 /*
 --TIP--
 
@@ -38,4 +45,4 @@ bottle.drink();
 if (!bottle.empty()) {
   console.log(`bottles volume = ${bottle.volume}`);
 }
-console.log("Above volume should be: 70");
+console.log("Above volume should be: 70"); 

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

@@ -6,7 +6,10 @@
 let groceriesToBuy = [];
 
 let groceryList = {
-  item1: "",
-  item2: "",
-  item3: ""
+  item1: "Potatoes",
+  item2: "Orange Juice",
+  item3: "Rice"
 };
+
+groceriesToBuy = Object.values(groceryList)
+console.log(groceriesToBuy)

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

@@ -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/3-project/js/main.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);

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

@@ -1,4 +1,36 @@
-function setAlarm() {}
+//set interval
+/* 1. When the `Set Alarm` button is clicked, get the value of the input field
+2. When you have the input field value, set the title to the correct value
+3. Work out how to update the `Time Remaining` title every second
+4. When the remaining time left is 0, play the alarm sound
+ */
+
+
+
+
+
+
+function setAlarm() {
+let inputSet = document.getElementById("alarmSet");
+let inputValue = parseInt(inputSet.value);
+let title = document.getElementById("timeRemaining");
+
+let countDown = setInterval(function() {
+let minutes = Math.floor(inputValue / 60);
+let seconds = inputValue % 60;
+title.textContent = ("Time Remaining: ") + (minutes>9?minutes:"0" +minutes) + ":" + (seconds>9?seconds:"0" + seconds);
+
+             if(inputValue === 0){
+               playAlarm();
+
+           return clearInterval(countDown);
+
+             }
+             inputValue--;
+       }, 1000);
+
+     }
+
 
 // DO NOT EDIT BELOW HERE
 

Week-3/Homework/mandatory/1-alarmclock/task.md

@@ -36,3 +36,6 @@ If you have time and want to do more why not try
 - Make the background change color when the alarm clock finishes
   - Try making the background flash!
 - Could you add `pause` functionality so that the count down stops and then you restart it later?
+
+
+set interval

Week-3/Homework/mandatory/2-quotegenerator/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <script src="quotes.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -12,6 +12,10 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div>
+      <button id = "smlbtn">Hit</button>
+      <p>If your looking for inspiration you've come to the wrong place</p>
+    </div>
+<script src="quotes.js"></script>
   </body>
 </html>

Week-3/Homework/mandatory/2-quotegenerator/quotes.js

@@ -1,3 +1,15 @@
+let button = document.getElementById("smlbtn");
+let p = document.querySelector("p")
+
+let onButtonClick = function() {
+  p.textContent =
+    pickFromArray(quotes).quote + "..." + " " +
+    "says" +
+    " " +
+    pickFromArray(quotes).author;
+}
+button.addEventListener("click", onButtonClick);
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

Week-3/Homework/mandatory/2-quotegenerator/style.css

@@ -1 +1,5 @@
 /** Write your CSS in here **/
+p {
+  color: green;
+  border: 1px dotted blue
+}