CodeYourFuture · TomRafferty · Oct 17, 2021 · Oct 17, 2021 · Oct 18, 2021 · Oct 18, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,13 @@ Update your code to make the colour change every 5 seconds to something differen
 Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
 ================
 */
+function changeBGColour(){
+    const colours = ["red", "blue", "green", "pink", "orange"]
+    document.body.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)]
+}
+//task 1
+//setTimeout(changeBGColour, 5000)
+
+//task 2
+//chooses a random colour every second
+setInterval(changeBGColour, 1000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -63,6 +63,65 @@ const movies = [
 
 // create showMovies function
 
+//Task 1 version
+// function showMovies(movieArray){
+//   const allMoviesDiv = document.getElementById("all-movies");
+//   const moviesNumberEl = document.getElementById("movies-number");
+//   for(let movie in movieArray){
+//     //create the <p>
+//     const pEl = document.createElement("p");
+//     //add the text
+//     pEl.innerHTML = `Title: ${movieArray[movie].title}<br />Director: ${movieArray[movie].director}`;
+//     //append the <p> to the <div>
+//     allMoviesDiv.appendChild(pEl);
+//     //update the number
+//     moviesNumberEl.innerHTML = `${movieArray.length}`
+//   }
+// }
+// showMovies(movies);
+
+//Task 2 version
+function showMovies(movieArray){
+  const allMoviesDiv = document.getElementById("all-movies");
+  const moviesNumberEl = document.getElementById("movies-number");
+  let count = 0;
+  //clear movies from DOM
+  for(let i = 0; i < allMoviesDiv.childNodes.length - 1; i++){
+    //start at the end
+    allMoviesDiv.lastChild.remove()
+  }
+  function writeMoviePerSecond(){
+    if(count < movieArray.length){
+      //create the <p>
+      const pEl = document.createElement("p");
+      //add the text
+      pEl.innerHTML = `Title: ${movieArray[count].title}<br />Director: ${movieArray[count].director}`;
+      //append the <p> to the <div>
+      allMoviesDiv.appendChild(pEl);
+      //update the number
+      moviesNumberEl.innerHTML = `${movieArray.length}`;
+      count++;
+      setTimeout(writeMoviePerSecond, 1000);
+    }
+  }
+  writeMoviePerSecond();
+}
+showMovies(movies);
+
 // create a new movie object for your favorite movie
+const newMovie = {
+  title: "Snatch",
+  director: "Guy Ritchie",
+  type: "comedy",
+  haveWatched: true,
+};
 
 // create addMovies function
+function addMovies(movie){
+  //add new movie after 2 seconds
+  setTimeout(movies.push(movie), 2000)
+}
+addMovies(newMovie);
+
+//I may come back and finish the form extra task but for now
+//I'm going to leave it at that
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -3,7 +3,10 @@ console.log("Testing JS file loaded!")
 // Task 1
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
-
+const sections = document.getElementsByTagName("section");
+for(section of sections){
+    section.style.backgroundColor = "white";
+}
 
 
 
@@ -15,11 +18,35 @@ console.log("Testing JS file loaded!")
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
-
+for(image of document.getElementsByTagName("img")){
+    image.className = "content-title";
+}
 
 
 
 
 // Task 3
 
 // Google the date of birth and death of each of the people on the page. Without changing any of the HTML or CSS, add this in a paragraph to the end of their <section>.
+const people = [
+  {
+    name: "Grace Hopper",
+    birth: "09/12/1906",
+    death: "01/01/1992",
+  },
+  {
+    name: "Katherine Johnson",
+    birth: "26/08/1918",
+    death: "24/02/2020",
+  },
+  {
+    name: "Ada Lovelace",
+    birth: "10/12/1815",
+    death: "27/11/1852",
+  },
+];
+for(let i = 0; i < sections.length; i++){
+    const pEl = document.createElement("p");
+    pEl.innerHTML = `Born: ${people[i].birth}<br /> Died: ${people[i].death}`;
+    sections[i].appendChild(pEl);
+}
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,24 @@
-function setAlarm() {}
+let timerHasBeenSet = false
+function setAlarm() {
+  const userInput = document.getElementById("alarmSet");
+  const timeRemaining = document.getElementById("timeRemaining");
+  timerHasBeenSet = true;
+  let timeLeft = userInput.value;
+  function timer() {
+    timeLeft--;
+    timeRemaining.innerHTML = `Time Remaining: ${timeLeft}`;
+  }
+  setInterval(() => {
+    if (timeLeft > 0) {
+      timer();
+    }else if(timeLeft <= 0 && timerHasBeenSet === true){
+      //play the alarm then
+      //set the hasBeenSet to false
+      playAlarm();
+      timerHasBeenSet = false;
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,13 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="quoteBox">
+
+    </div>
+    <div>
+      <button id="newQuoteButton">New Quote!</button>
+      <button id="autoButton">Auto Cycle</button>
+    </div>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,28 +1,4 @@
-// DO NOT EDIT BELOW HERE
-
-// A function which will return one item, at
-// random, from the given array.
-//
-// Parameters
-// ----------
-// choices: an array of items to pick from.
-//
-// Returns
-// -------
-// One item of the given array.
-//
-// Examples of use
-// ---------------
-// pickFromArray([1,2,3,4])     //maybe returns 2
-// pickFromArray(coloursArray)  //maybe returns "#F38630"
-//
-// You DO NOT need to understand how this function works.
-function pickFromArray(choices) {
-  return choices[Math.floor(Math.random() * choices.length)];
-}
-
-// A list of quotes you can use in your app.
-// Feel free to edit them, and to add your own favourites.
+//had to move quotes up here to allow it to be initialized.
 const quotes = [
   {
     quote: "Life isn’t about getting and having, it’s about giving and being.",
@@ -490,3 +466,80 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+function quoteGenerator() {
+  //get div
+  const quoteBoxDiv = document.getElementById("quoteBox");
+  //clear the children of the div (old quote)
+  for (let i = 0; i < quoteBoxDiv.childNodes.length; i++) {
+    //start at the end
+    quoteBoxDiv.lastChild.remove();
+  }
+  //create quote <p>
+  const newQuotePEl = document.createElement("p");
+  //find chosen quote from list
+  const chosenQuote = pickFromArray(quotes);
+  console.log(chosenQuote);
+  //add quote to <p>
+  newQuotePEl.innerHTML = `"${chosenQuote.quote}"`;
+  //append <p>
+  quoteBoxDiv.appendChild(newQuotePEl);
+
+  //create <p> for author
+  const newQuoteAuthorPEl = document.createElement("p");
+  //add author to <p>
+  newQuoteAuthorPEl.innerHTML = `- ${chosenQuote.author}`;
+  //add id to author <p>
+  newQuoteAuthorPEl.setAttribute("id", "author");
+  //append author <p>
+  quoteBoxDiv.appendChild(newQuoteAuthorPEl)
+}
+quoteGenerator();
+let autoEnabled = false;
+function toggleAuto() {
+  if (autoEnabled === true) {
+    autoEnabled = false;
+  } else {
+    autoEnabled = true;
+    autoCycle();
+  }
+}
+function autoCycle() {
+  setInterval(function () {
+    if (autoEnabled === true) {
+      quoteGenerator(quotes);
+    }
+  }, 5000);
+}
+
+const buttonEl = document.getElementById("newQuoteButton");
+buttonEl.addEventListener("click", quoteGenerator);
+const autoButtonEl = document.getElementById("autoButton");
+autoButtonEl.addEventListener("click", toggleAuto)
+
+
+// DO NOT EDIT BELOW HERE
+
+// A function which will return one item, at
+// random, from the given array.
+//
+// Parameters
+// ----------
+// choices: an array of items to pick from.
+//
+// Returns
+// -------
+// One item of the given array.
+//
+// Examples of use
+// ---------------
+// pickFromArray([1,2,3,4])     //maybe returns 2
+// pickFromArray(coloursArray)  //maybe returns "#F38630"
+//
+// You DO NOT need to understand how this function works.
+function pickFromArray(choices) {
+  return choices[Math.floor(Math.random() * choices.length)];
+}
+
+// A list of quotes you can use in your app.
+// Feel free to edit them, and to add your own favourites.
diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,35 @@
 /** Write your CSS in here **/
+body{
+    background-color: crimson;
+}
+#quoteBox{
+    background-color: cornsilk;
+    padding: 8em;
+    margin: 5em;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    border-bottom: solid;
+    border-color: gray;
+    border-width: 1em;
+    border-radius: 5em;
+}
+#quoteBox p{
+    text-align: center;
+    font-size: 3em;
+    font-family:'Courier New', Courier, monospace;
+}
+#author{
+    font-size: 2em;
+    color: grey;
+    margin-top: 1em;
+}
+button{
+    padding: 1em;
+    margin-left: 80%;
+    border: none;
+    border-bottom: solid;
+    border-width: 0.1em;
+    border-radius: 0.5em;
+    border-color: brown;
+    background-color: salmon;
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,15 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="imageContainer">
+
+    </div>
+    <div id="buttonsContainer">
+      <button id="previousBtn">Previous</button>
+      <button id="nextBtn">Next</button>
+      <button id="autoBtn">Auto</button>
+      <input type="number" id="autoTimeInput" placeholder="auto cycle (seconds)">
+    </div>
     <script src="slideshow.js"></script>
   </body>
 </html>