+
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
index b55091c..5d179ea 100644
--- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js
+++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,97 @@
// Write your code here
+
+let catImages = ["https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?ixlib=rb-1.2.1&auto=format&fit=crop&w=983&q=80",
+"https://images.unsplash.com/photo-1561389881-a5d8d5549588?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
+"https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1101&q=80",
+"https://images.unsplash.com/photo-1556513583-056edaa0d23e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80",
+"https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1042&q=80",
+"https://images.unsplash.com/photo-1531853749260-4447dc77f7e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
+"https://images.unsplash.com/photo-1570537446001-4d4f8139bac0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
+"https://images.unsplash.com/photo-1561389881-dac6bb97f175?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"];
+var counter = 0;
+var rcounter=0;
+var setAutoBack;
+var setAutoForward;
+let getImage = document.querySelector("img");
+getImage.src = catImages[0];
+let forwardButton = document.querySelector(".forwardButton");
+forwardButton.addEventListener("click", function(){
+
+ counter= rcounter;
+ if (counter > catImages.length-2){
+ counter=-1;
+ }
+ counter++;
+ getImage.src= catImages[counter];
+
+ rcounter =counter;
+ console.log(counter);
+ document.querySelector("h6").textContent =counter+1;
+
+});
+
+let backButton = document.querySelector(".backButton");
+backButton.addEventListener("click", function () {
+ if (rcounter <= 0) {
+ rcounter = catImages.length;
+
+ }
+ rcounter--;
+ console.log(rcounter);
+ getImage.src = catImages[rcounter];
+
+
+ document.querySelector("h6").textContent = rcounter+1;
+});
+let autoForwardButton = document.querySelector(".autoForwardButton");
+autoForwardButton.addEventListener("click", function () {
+ clearInterval(setAutoBack);
+ counter= rcounter;
+
+ setAutoForward = setInterval(function(){
+
+
+
+
+ console.log(counter);
+
+ if (counter > catImages.length - 2) {
+ counter = -1;
+ }
+ counter++;
+ getImage.src = catImages[counter];
+ document.querySelector("h6").textContent = counter+1;
+ },2000);
+
+});
+
+let autoBackButton = document.querySelector(".autoBackButton");
+autoBackButton.addEventListener("click", function () {
+ clearInterval(setAutoForward);
+ rcounter= counter;
+
+ setAutoBack= setInterval(function () {
+
+
+ if (rcounter <= 0) {
+ rcounter = catImages.length;
+
+ }
+ rcounter--;
+ console.log(rcounter);
+ getImage.src = catImages[rcounter];
+ document.querySelector("h6").textContent = rcounter+1;
+ counter=rcounter;
+
+ }, 2000);
+
+
+});
+
+let stopButton = document.querySelector(".stopButton");
+
+stopButton.addEventListener("click", function(){
+ clearInterval(setAutoForward);
+ clearInterval(setAutoBack);
+});
+
diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css
index 63cedf2..c1b31b9 100644
--- a/Week-3/Homework/mandatory/3-slideshow/style.css
+++ b/Week-3/Homework/mandatory/3-slideshow/style.css
@@ -1 +1,60 @@
/** Write your CSS in here **/
+.slideshowTitle{
+ height:auto ;
+ background-color: whitesmoke;
+ width: 40%;
+ margin: auto;
+ margin-top: 1%;
+ margin-bottom: 1%;
+ border-radius: 10px;
+ border: 1px solid white;
+ position: relative;
+ z-index: 2;
+ padding : 1%;
+ text-align: center;
+ color: royalblue;
+}
+.imageBox{
+ height:60vh;
+ background-color: whitesmoke;
+ width: 50vw;
+ margin: auto;
+ margin-top: 1%;
+ padding: 2%;
+ border-radius: 10px;
+ border: 2px solid white;
+ position: relative;
+ z-index: 1;
+ text-align: center;
+
+}
+img{
+ width: 45vw;
+ height: 50vh;
+}
+
+.autoBackButton,.backButton,.stopButton,.forwardButton,.autoForwardButton{
+ z-index:3;
+ padding: 1%;
+ width:20%;
+ border:1px solid white;
+ font-weight: 700;
+ margin: 1%;
+ margin-top:1%;
+ border-radius: 5px;
+ color: green;
+}
+.autoBackButton:hover,.backButton:hover,.stopButton:hover,.forwardButton:hover,.autoForwardButton:hover{
+ border : 2px solid white;
+ background-color: green;
+ color :white;
+}
+.buttons{
+ display: flex;
+ margin : auto;
+ width: 50%;
+}
+
+body{
+ background-color: royalblue;
+}
\ No newline at end of file
diff --git a/Week-3/InClass/Callbacks/exercise-1/exercise.js b/Week-3/InClass/Callbacks/exercise-1/exercise.js
index 40f06b0..c9ada10 100644
--- a/Week-3/InClass/Callbacks/exercise-1/exercise.js
+++ b/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).
-
+
+
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
================
-*/
\ No newline at end of file
+*/
+
+let colors = ["red", "blue", "green", "yellow", "orange", "purple"];
+let backgroundChange = document.querySelector("body");
+
+function changeColor() {
+ let randomColor = Math.floor(Math.random() * colors.length);
+ document.body.style.backgroundColor = colors[randomColor];
+}
+
+setTimeout(changeColor, 5000);
+
+//task 2
+setInterval(changeColor, 5000);
+
+
diff --git a/Week-3/InClass/Callbacks/exercise-2/exercise.js b/Week-3/InClass/Callbacks/exercise-2/exercise.js
index eca9595..0b1bb72 100644
--- a/Week-3/InClass/Callbacks/exercise-2/exercise.js
+++ b/Week-3/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**
@@ -62,9 +62,42 @@ const movies = [
];
// create showMovies function
+//Task 1
+ var createParagraph;
+function showMovies(){
+ movies.forEach(function (movie) {
+ createParagraph = document.createElement("p");
+ createParagraph.textContent = movie.title + " by " + movie.director;
+ document.querySelector("#all-movies").appendChild(createParagraph);
+ document.querySelector("#movies-number").innerHTML = movies.length;
+ })
+
+
+}
+//showMovies();
+//Task 2
+ var createTimeout = setTimeout(function (){
+ showMovies();
+ clearTimeout(createTimeout);
+ return;
+ },1000);
// create a new movie object for your favorite movie
-
+var myMovies = {
+ title : "Superman",
+ director : "ABC",
+ type : "Action",
+ haveWatched: true
+}
// create addMovies function
+ function addMovies (movies){
+ setTimeout(function(){
+ movies.push(myMovies);
+ showMovies();
+ },2000);
+ }
+
+ addMovies(movies);
+
\ No newline at end of file
diff --git a/Week-3/InClass/DOM-practice/main.js b/Week-3/InClass/DOM-practice/main.js
index be9f609..08593b3 100644
--- a/Week-3/InClass/DOM-practice/main.js
+++ b/Week-3/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 tags so that they have white backgrounds.
-
+ let getSection = document.querySelectorAll("section");
+ for(var i=0;i.
+ let dateOfBirth = ["9-12-1906","26-8-1918","10-12-1815"];
+let dateOfDeath = ["1-1-1992", "24-2-2020", "27-11-2020"];
+
+
+for(var i=0;i