diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
index 40f06b0..b9fc937 100644
--- a/InClass/Callbacks/exercise-1/exercise.js
+++ b/InClass/Callbacks/exercise-1/exercise.js
@@ -10,4 +10,34 @@ 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
================
-*/
\ No newline at end of file
+*/
+
+/*
+ * Task 1
+ */
+let mainDiv = document.getElementById("main");
+let task1Complete = false;
+setTimeout(() => {
+ mainDiv.style.backgroundColor = "red";
+ task1Complete = true;
+ console.log("in timeout");
+ console.log("task 1 status" + task1Complete);
+ }, 5000);
+
+
+/*
+ * Task 2
+ */
+function task2() {
+ let colorList = [ "yellow", "blue", "green", "#efefef", "#0ae071"];
+ let count = 0;
+
+ if(task1Complete) {
+ setInterval(() => {
+ mainDiv.style.backgroundColor = colorList[count];
+ count = (count + 1) % colorList.length;
+ }, 1000)
+ }
+}
+
+setTimeout(task2, 7000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
index eca9595..72b8b8e 100644
--- a/InClass/Callbacks/exercise-2/exercise.js
+++ b/InClass/Callbacks/exercise-2/exercise.js
@@ -13,13 +13,13 @@ Create a function called "showMovies" that
Task 2
Amend your function above to only show movies after 1 second. Remember to use setTimeout to achieve that
Create a new function called "addMovie"
-- it receives a movie object as an argument - your can create a new object for your favorite movie following using the "myMovies" objects as a guide
+- it receives a movie object as an argument - your can create a new object for your favorite movie following using the "myMovies" objects as a guide
- it adds the new movie to the list of movies after 2 seconds. Remember to setTimeout to achieve that
Call addMovies to add the new movie to the list and then showMovies to see the movies added on the screen.
How many movies can you see on your page?
Task 3
-Can you make sure the new movie you just added is showing on the screen?
+Can you make sure the new movie you just added is showing on the screen?
TIP: use callbacks
Task 4 - **Extra**
@@ -61,10 +61,71 @@ const movies = [
},
];
+let moviesDisplayed = 0;
+
// create showMovies function
+function showMovies() {
+ let allMovies = document.getElementById("all-movies");
+ let moviesNumber = document.getElementById("movies-number");
+ // show movies after 1s
+ setTimeout(() => {
+ // add the number of movies to the moviesNumber
+ moviesNumber.innerText = movies.length;
-// create a new movie object for your favorite movie
+ // display movies on the page
+ for(let i = moviesDisplayed; i < movies.length; i++) {
+ let para = document.createElement("p");
+ para.innerText = movies[i].title + " - " + movies[i].director;
+ allMovies.appendChild(para);
+ moviesDisplayed++;
+ }
+ }, 1000);
+}
+
+showMovies();
+// create a new movie object for your favorite movie
+const myFavMovie = {
+ title: "Inception",
+ director: "Christopher Nolan",
+ type: "sci-fi",
+ haveWatched: true,
+}
// create addMovies function
+function addMovie(movie) {
+ // add this new movie to the movies array
+ setTimeout(() => {
+ movies.push(movie);
+ }, 1000);
+}
+
+addMovie(myFavMovie);
+setTimeout(showMovies, 2100);
+
+// task 4
+function task4() {
+
+ let submitbtn = document.getElementById("submitBtn");
+
+ submitbtn.addEventListener("click", event => {
+
+ event.preventDefault();
+
+ let moveTitle = document.getElementById("movieTitle");
+ let movieDirector = document.getElementById("movieDirector");
+ let movieGenre = document.getElementById("movieGenre");
+ let movieWatched = document.getElementById("movieWatched");
+ let newMovie = {
+ title: moveTitle.value,
+ director: movieDirector.value,
+ type: movieGenre.value,
+ haveWatched: movieWatched.value,
+ };
+ addMovie(newMovie);
+ setTimeout(showMovies, 2100);
+ });
+}
+
+task4();
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
index bc9654c..dc04175 100644
--- a/InClass/Callbacks/exercise-2/index.html
+++ b/InClass/Callbacks/exercise-2/index.html
@@ -16,6 +16,7 @@
+