CodeYourFuture · niamhmadden23 · Sep 1, 2021 · Sep 2, 2021 · Sep 2, 2021 · Sep 3, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/InClass/.DS_Store b/InClass/.DS_Store
diff --git a/InClass/Callbacks/.DS_Store b/InClass/Callbacks/.DS_Store
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,16 @@ 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
 ================
 */
+
+// task 1 - change background colour
+
+setTimeout(function () {
+  document.body.style.backgroundColor = "#111";
+}, 5000);
+
+// task 2
+
+setInterval(() => {
+  let differentColours = Math.floor(Math.random() * 10000).toString(16);
+  document.body.style.backgroundColor = `#${differentColours}`;
+}, 5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -63,6 +63,36 @@ const movies = [
 
 // create showMovies function
 
+function showMovies(movies) {
+  const moviesDiv = document.getElementById("all-movies");
+  movies.map((movie) => {
+    const movieParagraph = document.createElement("p");
+    moviesDiv.appendChild(movieParagraph);
+    const movieNumber = document.getElementById("movies-number");
+    movieNumber.innerText = movies.length;
+    movieParagraph.innerText = `${movie.title} directed by ${movie.director}`;
+    movieParagraph.style.backgroundColor = "#ffe6ff";
+  });
+}
+
 // create a new movie object for your favorite movie
 
+const myMovie = {
+  title: "Roma",
+  director: "Alfonso Cuaron",
+  type: "Historical",
+  haveWatched: true,
+};
+
 // create addMovies function
+
+// function addMovies(movie, callback) {
+//   setTimeout(function () {
+//     movies.push(movie);
+//     callback();
+//   }, 2000);
+// }
+
+// addMovies(showMovies, myMovie);
+// console.log(movies);
+showMovies(movies);
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -1,25 +1,27 @@
-console.log("Testing JS file loaded!")
+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 section = document.getElementsByTagName("section");
+// console.log(section);
 
-
-
-
-
+Array.from(section).forEach((el) => {
+  el.style.backgroundColor = "#fff";
+});
 
 // Task 2
 
 // Without changing any of the HTML or CSS, update the images on the page so that they are all centered.
 
+const images = document.querySelectorAll("img");
+images.forEach((img) => {
+  img.style.display = "block";
+  img.style.marginLeft = "auto";
+  img.style.marginRight = "auto";
+});
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
-
-
-
-
-
 // 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>.
diff --git a/mandatory/.DS_Store b/mandatory/.DS_Store
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,29 @@
-function setAlarm() {}
+function setAlarm() {
+  let alarmSet = document.getElementById("alarmSet").value;
+  const timeLeft = document.getElementById("timeRemaining");
+
+  const isInterval = setInterval(() => {
+    const minutes = Math.floor(alarmSet / 60)
+      .toString()
+      .padStart(2, "0");
+    const seconds = (alarmSet % 60).toString().padStart(2, "0");
+    timeLeft.innerText = `Time Remaining: ${minutes}:${seconds}`;
+    if (alarmSet === 0) {
+      clearInterval(isInterval);
+      playAlarm();
+    } else {
+      alarmSet--;
+      console.log(alarmSet);
+    }
+
+    const alarmSound = alarmPlaying(() => {
+      const playButton = document.getElementById("button");
+      if (alarmSet === 0) {
+        alarmPlaying(audio.play);
+      }
+    });
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -11,6 +11,12 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <h1>Random Quote of The Day</h1>
+    <div id="quote">
+      <p class="sentence"></p>
+      <p class="author"></p>
+      <button id="newQuote" type="button">Press for a new quote!</button>
+    </div>
     <!-- Write your HTML in here -->
     <script src="quotes.js"></script>
   </body>

diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -17,9 +17,9 @@
 // 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)];
-}
+// 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.
@@ -490,3 +490,16 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+const quoteButton = document.getElementById("author");
+quoteButton.addEventListener("click", pickQuote);
+
+function pickQuote() {
+  let randomNum = Math.floor(Math.random() * quotes.length);
+  const quoteDiv = (document.getElementById("quote").innerHTML =
+    quotes[randomNum]);
+}
+
+// pickQuote(quotes);
+
+//console.log(pickQuote(quotes));