+
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
index b55091c..d2db87e 100644
--- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js
+++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,192 @@
// Write your code here
+//alert("java");
+
+
+let images=[//array of objects
+ { key:0,
+ src:"https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:1,
+ src:"https://images.unsplash.com/photo-1570824104453-508955ab713e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:2,
+ src:"https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:3,
+ src:"https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:4,
+ src:"https://images.unsplash.com/photo-1527416876370-fb74d128c3dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:5,
+ src:"https://images.unsplash.com/photo-1548366086-7f1b76106622?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:6,
+ src:"https://images.unsplash.com/photo-1561991524-9eaa9f7d910b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ },
+ { key:7,
+ src:"https://images.unsplash.com/photo-1519221342713-8cd041ea8893?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+ }
+]
+////////////when load webpage
+let key=0;
+document.querySelector(".img").src=images[0].src;
+document.querySelector(".btn-frd").disabled=false;
+document.querySelector(".btn-bck").disabled=true;
+document.querySelector(".btn-frdAuto").disabled=false;
+document.querySelector(".btn-bckAuto").disabled=true;
+document.querySelector(".btn-stop").disabled=true;
+//////////////////////function to go next slide
+let forward=document.querySelector(".btn-frd");
+forward.addEventListener("click",function(){
+
+ let img=document.querySelector(".img");
+ images.forEach(function(each){
+ if(each.src===img.src){
+ // alert(typeof each.key);
+ key=each.key;
+ return;
+ }else{
+ console.log("move")
+ }
+ });
+ if(key+1===images.length){
+ document.querySelector(".btn-frd").disabled=true;
+ document.querySelector(".btn-frdAuto").disabled=true;
+ }else{
+ document.querySelector(".img").src=images[key+1].src;
+ document.querySelector("span").textContent=key+1;
+ document.querySelector(".btn-bck").disabled=false;
+ document.querySelector(".btn-bckAuto").disabled=false;
+ }
+});
+//////////////////////function to go previous slide
+let backward=document.querySelector(".btn-bck");
+backward.addEventListener("click",function(){
+
+ let img=document.querySelector(".img");
+ images.forEach(function(each){
+ if(each.src===img.src){
+ // alert(typeof each.key);
+ key=each.key;
+ return;
+ }else{
+ console.log("move")
+ }
+ });
+ if(key-1<0){
+ document.querySelector(".btn-bck").disabled=true;
+ document.querySelector(".btn-bckAuto").disabled=true;
+ }else{
+ document.querySelector(".img").src=images[key-1].src;
+ document.querySelector("span").textContent=key-1;
+ document.querySelector(".btn-frd").disabled=false;
+ document.querySelector(".btn-frdAuto").disabled=false;
+ }
+});
+///////////////////////////interval used in auto move function
+let intervalFrd,intervalBck;
+//////////////////////////////auto forward
+let autoforward=document.querySelector(".btn-frdAuto");
+autoforward.addEventListener("click",function(){
+///////////////making all buttne disabled except stop buttonn
+document.querySelector(".btn-frd").disabled=true;
+document.querySelector(".btn-bck").disabled=true;
+document.querySelector(".btn-frdAuto").disabled=true;
+document.querySelector(".btn-bckAuto").disabled=true;
+document.querySelector(".btn-stop").disabled=false;
+/////////////////////////////////////
+ let img=document.querySelector(".img");
+ images.forEach(function(each){
+ if(each.src===img.src){
+ // alert(typeof each.key);
+ key=each.key;
+ return;
+ }else{
+ console.log("move")
+ }
+ });
+ if(key+1===images.length){
+ document.querySelector(".btn-frdAuto").disabled=true;
+ document.querySelector(".btn-frd").disabled=true;
+ document.querySelector(".btn-bck").disabled=false;
+ document.querySelector(".btn-bckAuto").disabled=false;
+ }else{
+
+
+ // document.querySelector(".btn-bck").disabled=false;
+ // document.querySelector(".btn-bckAuto").disabled=false;
+ intervalFrd=setInterval(function(){
+ if(key+1===images.length){
+ document.querySelector(".btn-bckAuto").disabled=false;
+ document.querySelector(".btn-bck").disabled=false;
+ document.querySelector(".btn-stop").disabled=true;
+ clearInterval(intervalFrd);
+ return;
+ }
+ key=key+1;
+ document.querySelector(".img").src=images[key].src;
+ document.querySelector("span").textContent=key;
+
+ },1000);
+ }
+});
+/////////////////////////////auto backward
+let autobackward=document.querySelector(".btn-bckAuto");
+autobackward.addEventListener("click",function(){
+ ///////////////making all buttne disabled except stop buttonn
+ document.querySelector(".btn-frd").disabled=true;
+ document.querySelector(".btn-bck").disabled=true;
+ document.querySelector(".btn-frdAuto").disabled=true;
+ document.querySelector(".btn-bckAuto").disabled=true;
+ document.querySelector(".btn-stop").disabled=false;
+ // document.querySelector(".btn-stop").style.border="0.12rem solid #008000";
+ /////////////////////////////////////
+ let img=document.querySelector(".img");
+ images.forEach(function(each){
+ if(each.src===img.src){
+ // alert(typeof each.key);
+ key=each.key;
+ return;
+ }else{
+ console.log("move")
+ }
+ });
+ if(key-1===-1){
+ document.querySelector(".btn-bckAuto").disabled=true;
+ document.querySelector(".btn-bck").disabled=true;
+ document.querySelector(".btn-frd").disabled=false;
+ document.querySelector(".btn-frdAuto").disabled=false;
+ }else{
+
+
+ // document.querySelector(".btn-bck").disabled=false;
+ // document.querySelector(".btn-bckAuto").disabled=false;
+ intervalFrd=setInterval(function(){
+ if(key-1===-1){
+ document.querySelector(".btn-frdAuto").disabled=false;
+ document.querySelector(".btn-frd").disabled=false;
+ document.querySelector(".btn-stop").disabled=true;
+ clearInterval(intervalFrd);
+ return;
+ }
+ key=key-1;
+ document.querySelector(".img").src=images[key].src;
+ document.querySelector("span").textContent=key;
+
+ },1000);
+ }
+ });
+//////////////////////////////////stop
+let btnStop=document.querySelector(".btn-stop");
+btnStop.addEventListener("click",function(){
+ document.querySelector(".btn-frd").disabled=false;
+ document.querySelector(".btn-bck").disabled=false;
+ document.querySelector(".btn-frdAuto").disabled=false;
+ document.querySelector(".btn-bckAuto").disabled=false;
+ clearInterval(intervalFrd);
+ clearInterval(intervalBck);
+ // document.querySelector(".btn-stop").style.border="0.12 solid #db7093";
+
+ document.querySelector(".btn-stop").disabled=true;
+})
\ No newline at end of file
diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css
index 63cedf2..b7f180d 100644
--- a/Week-3/Homework/mandatory/3-slideshow/style.css
+++ b/Week-3/Homework/mandatory/3-slideshow/style.css
@@ -1 +1,55 @@
/** Write your CSS in here **/
+*{
+ margin: 0px;
+ padding: 0px;
+}
+body{
+ height:100vh;
+ width: 100vw;
+ font-size: 10px;
+ font-family: monospace;
+}
+.container{
+ display: flex;
+ width:100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+.main{
+ padding:0.2rem;
+ height: auto;
+ width: 71%;
+ background-color: turquoise;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.h4{
+ font-size: 1.8rem;
+}
+.img-container{
+ width:100%;
+ height:24rem;
+ border:0.1rem solid hotpink;
+}
+.img{
+ width:100%;
+ height:100%;
+}
+.btn-bar{
+ padding-top: 0rem;
+ width:23rem;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+}
+.btn{
+ height:2rem;
+ width:auto;
+ font-size: 0.6rem;
+ font-weight: bold;
+ background-color:palevioletred;
+ color: white;
+}
diff --git a/Week-3/InClass/Callbacks/exercise-1/exercise.js b/Week-3/InClass/Callbacks/exercise-1/exercise.js
index 40f06b0..24252ee 100644
--- a/Week-3/InClass/Callbacks/exercise-1/exercise.js
+++ b/Week-3/InClass/Callbacks/exercise-1/exercise.js
@@ -3,11 +3,23 @@
EXERCISE 1
Task 1
-Using setTimeout, change the background colour of the page after 5 seconds (5000 milliseconds).
-
+Using setTimeout, change the background colour of the
+page after 5 seconds (5000 milliseconds).
+*/
+setTimeout(function(){
+ 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
+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 arrColor=["red","green","yellow","blue","purple"];
+setInterval(function(){
+ document.querySelector("body").style.backgroundColor=arrColor[Math.floor(Math.random()*arrColor.length)];
+},5000)
\ No newline at end of file
diff --git a/Week-3/InClass/Callbacks/exercise-2/exercise.js b/Week-3/InClass/Callbacks/exercise-2/exercise.js
index eca9595..4f7013d 100644
--- a/Week-3/InClass/Callbacks/exercise-2/exercise.js
+++ b/Week-3/InClass/Callbacks/exercise-2/exercise.js
@@ -7,16 +7,19 @@ You are given the following list of movies
Task 1
Create a function called "showMovies" that
- iterates through the "movies" array and
-- for each movie, it creates a
element with the movie title and director and append it to the #all-movies div.
+- for each movie, it creates a
element with
+the movie title and director and append it
+to the #all-movies div.
- it sets the innerText of the #movies-number element to the total number of the movies in the array "movies"
-
+*/
+/*
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 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?
+How many movies can you see on your page=8
Task 3
Can you make sure the new movie you just added is showing on the screen?
@@ -61,10 +64,51 @@ const movies = [
},
];
-// create showMovies function
+// create showMovies function//#all-movies //#movies-number
+let paragraph;
+function showMovies(){
+ if(movies.length===4){
+ movies.forEach(function(each){
+ paragraph=document.createElement("p");
+ paragraph.textContent=each.title+" by "+each.director;
+ document.querySelector("#all-movies").appendChild(paragraph);
+ document.querySelector("#movies-number").innerHTML=movies.length;
+ })
+}else{
+
+ paragraph=document.createElement("p");
+ paragraph.textContent=movies[movies.length-1].title+" by "+movies[movies.length-1].director;
+ document.querySelector("#all-movies").appendChild(paragraph);
+ document.querySelector("#movies-number").innerHTML=movies.length;
-// create a new movie object for your favorite movie
+}
+}
+
+let set=setTimeout(function(){
+ showMovies();
+ clearInterval(set);
+ return;
+},1000);
+// create a new movie object for your favorite
+//movie//myMovies
+let myMovies={
+ title: "code-your-future",
+ director: "zubeda",
+ type: "web development",
+ haveWatched: true
+};
// create addMovies function
+function addMovies(myMovies){
+ setTimeout(function(){
+ movies.push(myMovies);
+
+ showMovies();
+ },2000)
+
+
+}
+
+addMovies(myMovies);
diff --git a/Week-3/InClass/DOM-practice/main.js b/Week-3/InClass/DOM-practice/main.js
index be9f609..ee969c0 100644
--- a/Week-3/InClass/DOM-practice/main.js
+++ b/Week-3/InClass/DOM-practice/main.js
@@ -2,24 +2,35 @@ 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.
-
-
-
-
-
-
+// Without changing any of the HTML or CSS, update the
+// tags so that they have white backgrounds.
+let arrSection=document.querySelectorAll("section");
+arrSection.forEach(function(each){
+ each.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.
-
-
-
-
-
-
+// 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 arrImg=document.querySelectorAll("img");
+arrImg.forEach(function(each){
+ each.style.display="block";
+ each.style.marginLeft="auto";
+ each.style.marginRight="auto";
+});
// 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 .
+let dateOfBirthAndDeath=["Born: 9 December 1906 and Died: 1 January 1992",
+"Born: 26 August 1918 and Date of death: 24 February 2020",
+"Born: 10 December 1815 and Died: 27 November 1852"];
+let paragraph;
+for(i=0;i<3;i++){
+ paragraph=document.createElement("p");
+ paragraph.style.backgroundColor="red";
+ paragraph.textContent=dateOfBirthAndDeath[i];
+ arrSection[i].appendChild(paragraph);
+}
-// 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 .