CodeYourFuture · numbthumb · Sep 5, 2020 · Sep 5, 2020 · Sep 8, 2020
diff --git 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 <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
+  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);
diff --git a/Week-2/Homework/mandatory/2-exercises/index.html b/Week-2/Homework/mandatory/2-exercises/index.html
@@ -7,12 +7,9 @@
   </head>
   <body>
     <div id="content">
-      <!-- 
-        DO NOT EDIT.
-        Your work should be put in here using JavaScript.
-      -->
+    <img/>
     </div>
-
+    
     <script src="exercises.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,25 +1,48 @@
-function setAlarm() {}
-
+function setAlarm() {
+  let alarmInputValue = document.querySelector("#alarmSet").value; //this is value in box
+  let timeH1 = document.querySelector("#timeRemaining");
+  let time = setInterval(() => {
+    if (alarmInputValue === 0) {
+      playAlarm();
+      clearInterval(time);
+    }
+    updateScreen(alarmInputValue);
+    timeH1.textContent = `Time remaining: ${updateScreen(alarmInputValue)}`;
+    alarmInputValue--;
+  }, 1000)
+}
+function updateScreen(timeRemaining) {
+  let minutes;
+  let seconds;
+  if (timeRemaining > 60) {
+    minutes = Math.floor(timeRemaining / 60);
+    seconds = timeRemaining - minutes * 60;
+  } else {
+    minutes = 0;
+    seconds = timeRemaining;
+  }
+  if (minutes < 10) {
+    minutes = `0` + minutes;
+  }
+  if (seconds < 10) {
+    seconds = `0` + seconds;
+  }
+  return `${minutes}:${seconds}`;
+}
 // DO NOT EDIT BELOW HERE
-
 var audio = new Audio("alarmsound.mp3");
-
 function setup() {
   document.getElementById("set").addEventListener("click", () => {
     setAlarm();
   });
-
   document.getElementById("stop").addEventListener("click", () => {
     pauseAlarm();
   });
 }
-
 function playAlarm() {
   audio.play();
 }
-
 function pauseAlarm() {
   audio.pause();
 }
-
-window.onload = setup;
+window.onload = setup;
diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html
@@ -11,7 +11,6 @@
     />
     <link rel="stylesheet" href="style.css" />
   </head>
-
   <body>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
@@ -25,4 +24,4 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       </div>
     </div>
   </body>
-</html>
+</html>
diff --git a/Week-3/Homework/mandatory/1-alarmclock/style.css b/Week-3/Homework/mandatory/1-alarmclock/style.css
@@ -5,11 +5,15 @@
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
-
 #alarmSet {
   margin: 20px;
 }
-
 h1 {
   text-align: center;
 }
+body {
+  background: #000;
+}
+#timeRemaining {
+  color: chartreuse;
+}
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Quote Generator</title>
-    <script src="quotes.js"></script>
+    <title>Quote Generator</title> 
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +12,11 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="container">
+      <button id="quoteButton">Press for a new quote!</button>
+      <div id="quoteOutput">Press the button to generate a new quote!</div>
+      <div id="authorOutput"></div>
+    </div>
+    <script src="quotes.js"></script>
   </body>
-</html>
+</html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,5 +1,17 @@
-// DO NOT EDIT BELOW HERE
+let sButton = document.querySelector("button");
+
+sButton.addEventListener("click", function () {
+  let authorOutput = document.getElementById("authorOutput");
+  let output = document.getElementById("quoteOutput");
+  let randomQuote = pickFromArray(quotes);
+  output.innerHTML = randomQuote.quote;
+  authorOutput.innerHTML = randomQuote.author;
+});
 
+// function test() {
+//   return alert("test");
+// }
+// DO NOT EDIT BELOW HERE
 // A function which will return one item, at
 // random, from the given array.
 //

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +1,29 @@
 /** Write your CSS in here **/
+body {
+    background-color: darkcyan;
+}
+#container {
+    background-color: indigo;
+    border: 3px solid #eee;
+    height: 275px;
+    width: 750px;
+    margin: auto;
+    text-align: center;
+}
+#quoteButton {
+    margin: 50px auto;
+    height: 50px;
+    width: 250px;
+    font-size: 22px;
+    background-color: lightgray;
+}
+#quoteOutput {
+    margin: 25px auto;
+    font-size: 26px;
+    color: limegreen;
+}
+#authorOutput {
+    margin: 25px auto;
+    font-size: 26px;
+    color: rgb(224, 82, 82);
+}
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-1.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-1.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-2.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-2.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-3.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-3.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-4.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-4.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-5.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-5.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-6.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-6.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-7.jpg b/Week-3/Homework/mandatory/3-slideshow/img/unsplash-photo-7.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <title>Slideshow</title>
-    <script src="slideshow.js"></script>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +12,17 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="carousel-container">
+      <img/>
+    </div>
+    <div class="buttons">
+      <button id="cueBackward">Cue Backward</button>
+      <button id="previousBtn">Prev</button>
+      <button id="stopBtn">Stop</button>
+      <button id="nextBtn">Next</button>
+      <button id="cueForward">Cue Forward</button>
+    </div>
+
+    <script src="slideshow.js"></script>
   </body>
-</html>
+</html>
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,78 @@
 // Write your code here
+let imageArray = [
+  "img/unsplash-photo-1.jpg",
+  "img/unsplash-photo-2.jpg",
+  "img/unsplash-photo-3.jpg",
+  "img/unsplash-photo-4.jpg",
+  "img/unsplash-photo-5.jpg",
+  "img/unsplash-photo-6.jpg",
+  "img/unsplash-photo-7.jpg",
+];
+//buttons
+let prevBtn = document.querySelector("#previousBtn");
+let nextBtn = document.querySelector("#nextBtn");
+let runForward = document.querySelector("#cueForward");
+let runBackward = document.querySelector("#cueBackward");
+let stopBtn = document.querySelector("#stopBtn");
+let stopRunForward;
+let stopRunBackward;
+//counter
+let counter = 0;
+let reverseCounter = 0;
+//button listeners
+// Next Button
+nextBtn.addEventListener("click", function () {
+  if (counter > imageArray.length - 2) {
+    counter = -1;
+  }
+  counter++;
+  let image = document.querySelector("img");
+  image.src = imageArray[counter];
+  reverseCounter = counter;
+  console.log("forward counter value");
+  console.log(counter);
+});
+// Previous Button
+prevBtn.addEventListener("click", function () {
+  if (reverseCounter <= 0) {
+    reverseCounter = imageArray.length;
+  }
+  reverseCounter--;
+  let image = document.querySelector("img");
+  image.src = imageArray[reverseCounter];
+  // counter = reverseCounter;
+  console.log("reverse counter value");
+  console.log(reverseCounter);
+});
+runForward.addEventListener("click", function () {
+  clearInterval(stopRunBackward);
+  stopRunForward = setInterval(function () {
+    if (counter > imageArray.length - 2) {
+      counter = -1;
+    }
+    counter++;
+    let image = document.querySelector("img");
+    image.src = imageArray[counter];
+    reverseCounter = counter;
+    console.log("runForward");
+    console.log(counter);
+  }, 1000);
+});
+runBackward.addEventListener("click", function () {
+  clearInterval(stopRunForward);
+  stopRunBackward = setInterval(function () {
+    if (reverseCounter <= 0) {
+      reverseCounter = imageArray.length;
+    }
+    reverseCounter--;
+    let image = document.querySelector("img");
+    image.src = imageArray[reverseCounter];
+    // counter = reverseCounter;
+    console.log("runBackward");
+    console.log(reverseCounter);
+  }, 1000);
+});
+stopBtn.addEventListener("click", function () {
+  clearInterval(stopRunForward);
+  clearInterval(stopRunBackward);
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ @@
         />
         <link rel="stylesheet" href="style.css" />
       </head>
       <body>
         <div class="centre">
           <h1 id="timeRemaining">Time Remaining: 00:00</h1>
@@ Expand All / @@ -25,4 +24,4 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1> @@
           </div>
         </div>
       </body>
-    </html>
+    </html>