CodeYourFuture · Aaron-CYF · Oct 15, 2021 · Oct 19, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,7 @@ 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
 ================
 */
+
+setTimeout(() => {
+    document.body.style.backgroundColor = "#" + ("00000" + Math.floor(Math.random() * 16777216).toString(16)).slice(-6);
+}, 5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -62,7 +62,46 @@ const movies = [
 ];
 
 // create showMovies function
+function showMovies() {
+  let allMovies = document.querySelector("#all-movies");
+  while (allMovies.children[1]) allMovies.removeChild(allMovies.children[1]);
+  movies.forEach((movie, i) => {
+    let timeout = 1000;
+    let newP = document.createElement('p');
+    newP.innerText = `${movie.title} - ${movie.director}`;
+   setTimeout(() => {
+     document.querySelector("#all-movies").append(newP)
+   }, timeout * (i+1)); 
+  });
+  document.querySelector('#movies-number').innerText = movies.length;
+}
 
 // create a new movie object for your favorite movie
+const favMovie = {
+  title: "The Matrix",
+  director: "Wachoski Sisters",
+  type: "sci-fi",
+  haveWatched: true,
+}
 
 // create addMovies function
+function addMovie(movie, callback) {
+  setTimeout(() => {
+    movies.push(movie);
+    callback();
+  }, 2000);
+}
+
+addMovie(favMovie, showMovies);
+
+document.querySelector('button').addEventListener("click", saveForm);
+
+function saveForm() {
+  let movie = {
+    title: document.getElementById("title").value,
+    director: document.getElementById("director").value,
+    type: document.getElementById("type").value,
+    haveWatched: document.getElementById("haveWatched").value,
+  };
+  addMovie(movie, showMovies);
+}
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -23,6 +23,17 @@ <h1>My movies</h1>
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
     </div>
+    <form onsubmit="return false">
+      <label for="title">Title: </label>
+      <input type="text" name="title" id="title"><br>
+      <label for="director">Director: </label>
+      <input type="text" name="director" id="director"><br>
+      <label for="type">Type: </label>
+      <input type="text" name="type" id="type"><br>
+      <label for="haveWatched">Have Watched: </label>
+      <input type="text" name="haveWatched" id="haveWatched"><br>
+      <button action="">Save</button>
+    </form>
     <script src="exercise.js"></script>
 </body>
 

diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -3,7 +3,7 @@ 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.
-
+document.querySelectorAll('section').forEach(sec => sec.style.backgroundColor = "white");
 
 
 
@@ -15,11 +15,21 @@ console.log("Testing JS file loaded!")
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
-
+document.querySelectorAll("img").forEach(img => img.classList.add("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>.
+
+document.querySelectorAll("section").forEach((sec, i) => {
+    let newP = document.createElement('p');
+    let dob = "";
+    if (i === 0) dob = "December 9, 1906";
+    if (i === 1) dob = "August 26, 1918";
+    if (i === 2) dob = "December 10, 1815";
+    newP.innerText = `DOB: ${dob}`;
+    sec.appendChild(newP);
+});
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,36 @@
-function setAlarm() {}
+var currentTimer = 0;
+var intervalHandle;
+
+function setAlarm() {
+  let enteredNum = document.getElementById('alarmSet').value;
+  console.log(enteredNum);
+  if (enteredNum.includes(":")) {
+    currentTimer = Math.floor(Number(enteredNum.split(":")[0]) * 60) + Number(enteredNum.split(":")[1]);
+  } else if (!isNaN(Number(enteredNum))) {
+    currentTimer = enteredNum;
+  }
+  if (currentTimer > 0) {
+    setTimeRemaining();
+
+    intervalHandle = setInterval(() => {
+      currentTimer--;
+      setTimeRemaining();
+      if (currentTimer <= 0) {
+        playAlarm();
+        clearInterval(intervalHandle);
+      }
+    }, 1000);
+  }
+}
+
+function setTimeRemaining(time = currentTimer) {
+  document.querySelector("#timeRemaining").innerText = `Time Remaining: ${("0" + Math.floor(time / 60)).slice(-2)}:${("0" + (time % 60)).slice(-2)}`;
+}
+
+
+document.querySelector("#stop").addEventListener("click", () => {
+  clearInterval(intervalHandle);
+})
 
 // 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 -->
+    <main class="container h-100 d-flex justify-content-center">
+      <div class="my-auto p-5">
+        <h1 id="quoteText" class="text-center mt-5 mb-0 display-5"></h1>
+        <h5 class="text-right my-4"></h5>
+        <div class="mt-1 px-3 py-2 float-right" onclick="getNewQuote()" id="newQuote">New quote</div>
+      </div>
+    </main>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,28 @@
+const vw = () => Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+const vh = () => Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+function getNewQuote() {
+  let newQuote = pickFromArray(quotes);
+  let fontSize = 150;
+  let divHeight = () => document.querySelector("h1").parentElement.getBoundingClientRect().height;
+  let divWidth = () => document.querySelector("h1").parentElement.getBoundingClientRect().width;
+  document.querySelector("h1").innerText = newQuote.quote;
+  document.querySelector("h5").innerText = "-" + newQuote.author;
+  document.querySelector("h1").style.fontSize = "";
+
+  console.log(divHeight());
+  console.log("vh= ", vh());
+
+  if (divHeight() > vh() || divWidth() > vw()) {
+    while ((divHeight() > vh() || divWidth() > vw()) && fontSize > 0) {
+      document.querySelector("h1").style.fontSize = `${fontSize}%`;
+      fontSize -= 10;
+    }
+  }
+}
+
+window.onload = getNewQuote;
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,23 @@
 /** Write your CSS in here **/
+body {
+    background-color: orange;
+    height: 100vh;
+}
+
+main div {
+    background-color: white;
+    color: orange;
+}
+
+#newQuote {
+    background-color: orange;
+    color: white;
+    display: inline;
+    cursor: pointer;
+}
+
+@media screen and (max-height: 599px) {
+    #quoteText {
+        margin-top: -5% !important;
+    }
+}