Glasgow Class 5 - Andrew Robertson - JavaScript-Core - 2 - Week 3

InClass/Callbacks/exercise-1/exercise.js

@@ -4,10 +4,26 @@ EXERCISE 1
 
 Task 1
 Using setTimeout, change the background colour of the page after 5 seconds (5000 milliseconds).
+*/
+setTimeout(() => {
+  document.querySelector("body").style.backgroundColor = "blue";
+}, 5000);
 
+/*
 Task 2
 Update your code to make the colour change every 5 seconds to something different. Hint: try searching for setInterval.  Complete the exercises in this CodePen
 
 Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
 ================
 */
+
+setInterval(() => {
+  const hexCode = "0123456789ABCDEF";
+  let colour = "#";
+
+  for (let i = 0; i < 6; i++) {
+    colour += hexCode[Math.floor(Math.random() * 16)];
+  }
+
+  document.querySelector("body").style.backgroundColor = colour;
+}, 5000);

InClass/Callbacks/exercise-2/exercise.js

@@ -61,8 +61,39 @@ const movies = [
   },
 ];
 
-// create showMovies function
+// Task 1: create showMovies function / Task 2: Add 1 second delay until movies display
+function showMovies(movies) {
+  let moviesList = document.querySelector("#all-movies");
 
-// create a new movie object for your favorite movie
+  //replaceChildren();
+  movies.forEach((movie, index) => {
+    let totalMovies = document.querySelector("#movies-number");
+    totalMovies.innerText = movies.length;
 
-// create addMovies function
+    setTimeout(() => {
+      let movieDetails = document.createElement("p");
+      moviesList.appendChild(movieDetails);
+      movieDetails.innerText = `${movie.title}, directed by ${movie.director}.`;
+    }, 1000 * index + 1);
+  });
+}
+
+//showMovies(movies);
+
+// Task 2: create a new movie object for your favourite movie
+const myFavMovie = {
+  title: "The Matrix",
+  director: "Wachowskis",
+  type: "Science Fiction",
+  haveWatched: true,
+};
+
+// Task 2-3: create addMovies function
+function addMovie(movie, callback) {
+  setTimeout(() => {
+    movies.push(movie);
+    callback(movies);
+  }, 2000);
+}
+
+addMovie(myFavMovie, showMovies);

InClass/DOM-practice/main.js

@@ -1,25 +1,39 @@
-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.
+let sections = document.querySelectorAll("section");
 
-
-
-
-
+sections.forEach((section) => {
+  section.style.backgroundColor = "white";
+});
 
 // Task 2
 
 // Without changing any of the HTML or CSS, update the images on the page so that they are all centered.
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
+let images = document.querySelectorAll("img");
 
-
-
-
-
+images.forEach((image) => {
+  image.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>.
+
+sections.forEach((section, index) => {
+  let p = document.createElement("p");
+  if (index === 0) {
+    section.appendChild(p).innerText =
+      "Born: December 9, 1906, Died: January 1, 1992.";
+  } else if (index === 1) {
+    section.appendChild(p).innerText =
+      "Born: August 26, 1918, Died: February 24, 2020.";
+  } else {
+    section.appendChild(p).innerText =
+      "Born: December 10, 1815, Died: November 27, 1852.";
+  }
+});

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,29 @@
-function setAlarm() {}
+setAlarm = () => {
+  let alarmTime = document.getElementById("alarmSet");
+
+  let timeRemaining = document.getElementById("timeRemaining");
+  let minutes = parseInt(alarmTime.value / 60);
+  let seconds = parseInt(alarmTime.value % 60);
+
+  let countDown = setInterval(() => {
+    let minutesString = minutes.toString().padStart(2, 0);
+    let secondsString = seconds.toString().padStart(2, 0);
+
+    if (seconds === 0 && minutes > 0) {
+      seconds = 60;
+      minutes--;
+    }
+
+    timeRemaining.innerText = `Time Remaining: ${minutesString} : ${secondsString}`;
+    seconds--;
+    alarmTime.value = 0;
+
+    if (seconds < 0) {
+      playAlarm();
+      clearInterval(countDown);
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

mandatory/2-quotegenerator/index.html

@@ -2,16 +2,10 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-      crossorigin="anonymous"
-    />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <article id="quote-container"></article>
     <script src="quotes.js"></script>
   </body>
 </html>