From 0d68bc7c816b59f5d8a26bd8b97b908ddd57c324 Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Tue, 25 Aug 2020 21:01:49 +0100
Subject: [PATCH 1/8] In Class exercise.js completed.

---
 .../mandatory/0-onlinelearning/youtube.md     |  6 +++---
 .../InClass/Callbacks/exercise-1/exercise.js  | 20 +++++++++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Week-3/Homework/mandatory/0-onlinelearning/youtube.md b/Week-3/Homework/mandatory/0-onlinelearning/youtube.md
index 60f0171..a4acda7 100644
--- a/Week-3/Homework/mandatory/0-onlinelearning/youtube.md
+++ b/Week-3/Homework/mandatory/0-onlinelearning/youtube.md
@@ -11,11 +11,11 @@ I'd like you to search online around these topics
 Here are some to get started:
 _Synchronous and Asynchronous Transmission_
 https://www.youtube.com/watch?v=SLjjgjp2bAA
-
+watched the video.
 _The Client Server Model | Clients and Servers_
 https://www.youtube.com/watch?v=L5BlpPU_muY
-
+watched the video.
 _How the Internet Works in 5 Minutes_
 https://www.youtube.com/watch?v=7_LPdttKXPc
-
+watched the video.
 Be sure to share what you find in your class channel!
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);
+
+

From f03d33f45b47380bb5609aab54f05ea87844647d Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Tue, 25 Aug 2020 21:59:03 +0100
Subject: [PATCH 2/8] In Class exercise 2 completed.

---
 .../InClass/Callbacks/exercise-2/exercise.js  | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

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

From f4f02821063a1423dc0e3a56cc8f0a6ef06556e4 Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Tue, 25 Aug 2020 22:27:02 +0100
Subject: [PATCH 3/8] In Class DOM Practice is Completed.

---
 Week-3/InClass/DOM-practice/main.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

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 <section> tags so that they have white backgrounds.
-
+  let getSection = document.querySelectorAll("section");
+   for(var i=0;i<getSection.length;i++){
+       getSection[i].style.backgroundColor ="white";
+   }
 
 
 
@@ -12,6 +15,11 @@ console.log("Testing JS file loaded!")
 // Task 2
 
 // Without changing any of the HTML or CSS, update the images on the page so that they are all centered.
+let getImages =document.querySelectorAll("img");
+for(var i=0;i<getImages.length;i++){
+    getImages[i].className = "content-title";
+}
+
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
@@ -23,3 +31,12 @@ console.log("Testing JS file loaded!")
 // 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>.
+  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<getSection.length;i++){
+ let newP = document.createElement("p");
+ newP.textContent = "Date of Birth is "+dateOfBirth[i]+" and Date of Death is "+dateOfDeath[i];
+ getSection[i].appendChild(newP);
+}

From 902e0b7dc4e9e79a102487992da2c3ffe0b6a5bd Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Tue, 25 Aug 2020 23:46:05 +0100
Subject: [PATCH 4/8] 1-alarmclock.js exercise completed.

---
 .../mandatory/1-alarmclock/alarmclock.js      | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
index 6ca81cd..d13b82d 100644
--- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
+++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,48 @@
-function setAlarm() {}
+function setAlarm() {
+  let getInputValue = document.querySelector("#alarmSet");
+ // getInputValue.textContent = "hello";
+  let value = getInputValue.value;
+  console.log(value);
+  let getTitle = document.querySelector("#timeRemaining");
+  
+  let timeRemaining = parseInt(value);
+   if (timeRemaining>0) {
+     if (timeRemaining<10){
+       timeRemaining = "0"+value;
+     }
+     
+     else {
+       timeRemaining = value;
+     }
+     getTitle.innerHTML = "Time Remaining in seconds: 00:" + timeRemaining;
+     
+     let counter = setInterval(() => {
+       timeRemaining--;
+       if(timeRemaining<0){
+         clearInterval(counter);
+         return;
+       }
+       if(timeRemaining>10){
+       getTitle.innerHTML = "Time Remaining in seconds: 00:" + timeRemaining;}
+       else {
+         getTitle.innerHTML = "Time Remaining in seconds: 00:0" + timeRemaining;
+       }
+
+       
+     }, 1000);
+    }
+    
+    let alarm = setTimeout(() => {
+      document.querySelector("body").style.backgroundColor = "lightpink";
+      playAlarm();
+      clearTimeout(alarm);
+      return;
+    }, timeRemaining*1000);
+
+    
+  
+
+}
 
 // DO NOT EDIT BELOW HERE
 

From 56db56425fbc4a3d003fe377ba3801f8f27f1b74 Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Sat, 29 Aug 2020 17:54:31 +0100
Subject: [PATCH 5/8] design layout of quote generator complete.

---
 .../mandatory/2-quotegenerator/index.html     |  7 +++
 .../mandatory/2-quotegenerator/style.css      | 48 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
index b6115be..ebeae4a 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/index.html
+++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -13,5 +13,12 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+  <div class="quoteTitle">
+  <h2>Quote Generator</h2>
+  </div>
+  <div class="quoteBox">  
+  
+    </div>
+    <button class="quoteButton">Generate New Quote</button>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
index 63cedf2..fafe52f 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/style.css
+++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +1,49 @@
 /** Write your CSS in here **/
+
+.quoteTitle{
+    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: coral;
+}
+.quoteBox{
+    height:300px ;
+    background-color: whitesmoke;
+    width: 50%;
+    margin: auto;
+    margin-top: 1%;
+    border-radius: 10px;
+    border: 1px solid white;
+    position: relative;
+    z-index: 1;
+    display: block;
+}
+.quoteButton{
+    z-index:3;
+    padding: 1%;
+    width:20%;
+    border:1px solid white;
+    font-weight: 700;
+    margin :auto;
+    margin-top:1%;
+    display: block;
+    border-radius: 5px;
+    color: rgb(20, 64, 196);
+}
+.quoteButton:hover{
+    border : 2px solid white;
+    background-color: royalblue;
+    color :white;
+}
+body{
+    background-color: coral;
+}
\ No newline at end of file

From 0069e3f507d71b80044938e7d5849f422793d796 Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Sat, 29 Aug 2020 20:06:57 +0100
Subject: [PATCH 6/8] 2- quote generator exercise completed.

---
 .../Homework/mandatory/2-quotegenerator/index.html  |  5 +++--
 .../Homework/mandatory/2-quotegenerator/quotes.js   | 13 ++++++++++++-
 .../Homework/mandatory/2-quotegenerator/style.css   | 11 +++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
index ebeae4a..d9bd37b 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/index.html
+++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <script src="quotes.js"></script>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -17,8 +16,10 @@
   <h2>Quote Generator</h2>
   </div>
   <div class="quoteBox">  
-  
+    <blockquote><h4>Do want a new quote? </h4></blockquote>
+    <h6></h6>
     </div>
     <button class="quoteButton">Generate New Quote</button>
+    <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
index 39ab245..e777f1a 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
+++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,14 @@
+let getQuoteButton = document.querySelector("button");
+console.log(getQuoteButton);
+let colors = ['#F44336','#EF9A9A','#FFCDD2','#EF5350','#E53935','#D32F2F','#C62828','#B71C1C','#FF8A80','#FF5252','#FF1744','#D50000','#F8BBD0','#F48FB1','#F06292','#EC407A','#E91E63','#D81B60','#C2185B','#AD1457','#880E4F','#FF80AB','#FF4081','#F50057','#C51162','#E1BEE7','#CE93D8','#BA68C8','#AB47BC','#9C27B0','#8E24AA','#7B1FA2','#6A1B9A','#4A148C','#EA80FC','#E040FB','#D500F9','#AA00FF','#D1C4E9','#B39DDB','#9575CD','#7E57C2','#673AB7','#5E35B1','#512DA8','#4527A0','#311B92','#B388FF','#7C4DFF','#651FFF','#6200EA','#C5CAE9','#9FA8DA','#7986CB','#5C6BC0','#3F51B5','#3949AB','#303F9F','#283593','#1A237E','#8C9EFF','#536DFE','#3D5AFE','#304FFE','#E3F2FD','#BBDEFB','#90CAF9','#64B5F6','#42A5F5','#2196F3','#1E88E5','#1976D2','#1565C0','#0D47A1','#82B1FF','#448AFF','#2979FF','#2962FF','#E1F5FE','#B3E5FC','#81D4FA','#4FC3F7','#29B6F6','#03A9F4','#039BE5','#0288D1','#0277BD','#01579B','#80D8FF','#40C4FF','#00B0FF','#0091EA','#E0F7FA','#B2EBF2','#80DEEA','#4DD0E1','#26C6DA','#00BCD4','#00ACC1','#0097A7','#00838F','#006064','#84FFFF','#18FFFF','#00E5FF','#00B8D4','#B2DFDB','#80CBC4','#4DB6AC','#26A69A','#009688','#00897B','#00796B','#00695C','#004D40','#A7FFEB','#64FFDA','#1DE9B6','#E57373','#A5D6A7','#81C784','#66BB6A','#4CAF50','#43A047','#388E3C','#2E7D32','#1B5E20','#B9F6CA','#69F0AE','#00E676','#00C853','#C5E1A5','#AED581','#9CCC65','#8BC34A','#7CB342','#689F38','#558B2F','#33691E','#CCFF90','#B2FF59','#76FF03','#64DD17','#F0F4C3','#E6EE9C','#DCE775','#D4E157','#CDDC39','#C0CA33','#AFB42B','#9E9D24','#827717','#F4FF81','#EEFF41','#C6FF00','#AEEA00','#FFFDE7','#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17', '#FFFF8D', '#FFFF00', '#FFEA00', '#FFD600', '#FFF8E1', '#FFECB3', '#FFE082', '#FFD54F', '#FFCA28', '#FFC107', '#FFB300', '#FFA000', '#FF8F00', '#FF6F00', '#FFE57F', '#FFD740', '#FFC400', '#FFAB00', '#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100', '#FFD180', '#FFAB40', '#FF9100', '#FF6D00', '#FBE9E7', '#FFCCBC', '#FFAB91', '#FF8A65', '#FF7043', '#FF5722', '#F4511E',  '#E64A19','#D84315','#BF360C' ,'#FF9E80', '#FF6E40', '#FF3D00','#DD2C00', '#EFEBE9','#D7CCC8', '#BCAAA4','#A1887F','#8D6E63','#795548', '#6D4C41', '#5D4037','#4E342E', '#3E2723', '#90A4AE','#00BFA5','#78909C','#607D8B','#546E7A','#455A64',  '#37474F', '#263238', '#000000',]
+getQuoteButton.addEventListener("click", function () {
+  console.log("iam clicked");
+   let randomQuote = pickFromArray(quotes);
+   document.querySelector("body").style.backgroundColor = pickFromArray(colors);
+  document.querySelector("h4").innerHTML = randomQuote.quote;
+ document.querySelector("h6").innerHTML = randomQuote.author;
+});
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -433,7 +444,7 @@ const quotes = [
   },
   {
     quote: "Dreaming, after all, is a form of planning.",
-    author: "Gloria Steinem",
+    author: "Gloria Steinem"
   },
   {
     quote:
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
index fafe52f..a1006c8 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/style.css
+++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -16,17 +16,24 @@
     color: coral;
 }
 .quoteBox{
-    height:300px ;
+    height:auto ;
     background-color: whitesmoke;
     width: 50%;
     margin: auto;
     margin-top: 1%;
+    padding: 2%;
     border-radius: 10px;
-    border: 1px solid white;
+    border: 2px solid white;
     position: relative;
     z-index: 1;
     display: block;
+    text-align: justify;
 }
+
+h6 {
+    text-align: right;
+}
+
 .quoteButton{
     z-index:3;
     padding: 1%;

From f723de4294b84b3c59b3b59e65c74a66c9067ccc Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Sat, 29 Aug 2020 20:16:32 +0100
Subject: [PATCH 7/8] update in random quote generator

---
 .../mandatory/2-quotegenerator/index.html     |  2 +-
 .../mandatory/2-quotegenerator/quotes.js      | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
index d9bd37b..932e798 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/index.html
+++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -16,7 +16,7 @@
   <h2>Quote Generator</h2>
   </div>
   <div class="quoteBox">  
-    <blockquote><h4>Do want a new quote? </h4></blockquote>
+    <blockquote><h4> </h4></blockquote>
     <h6></h6>
     </div>
     <button class="quoteButton">Generate New Quote</button>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
index e777f1a..8c97ca6 100644
--- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
+++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,12 +1,21 @@
 let getQuoteButton = document.querySelector("button");
-console.log(getQuoteButton);
+
 let colors = ['#F44336','#EF9A9A','#FFCDD2','#EF5350','#E53935','#D32F2F','#C62828','#B71C1C','#FF8A80','#FF5252','#FF1744','#D50000','#F8BBD0','#F48FB1','#F06292','#EC407A','#E91E63','#D81B60','#C2185B','#AD1457','#880E4F','#FF80AB','#FF4081','#F50057','#C51162','#E1BEE7','#CE93D8','#BA68C8','#AB47BC','#9C27B0','#8E24AA','#7B1FA2','#6A1B9A','#4A148C','#EA80FC','#E040FB','#D500F9','#AA00FF','#D1C4E9','#B39DDB','#9575CD','#7E57C2','#673AB7','#5E35B1','#512DA8','#4527A0','#311B92','#B388FF','#7C4DFF','#651FFF','#6200EA','#C5CAE9','#9FA8DA','#7986CB','#5C6BC0','#3F51B5','#3949AB','#303F9F','#283593','#1A237E','#8C9EFF','#536DFE','#3D5AFE','#304FFE','#E3F2FD','#BBDEFB','#90CAF9','#64B5F6','#42A5F5','#2196F3','#1E88E5','#1976D2','#1565C0','#0D47A1','#82B1FF','#448AFF','#2979FF','#2962FF','#E1F5FE','#B3E5FC','#81D4FA','#4FC3F7','#29B6F6','#03A9F4','#039BE5','#0288D1','#0277BD','#01579B','#80D8FF','#40C4FF','#00B0FF','#0091EA','#E0F7FA','#B2EBF2','#80DEEA','#4DD0E1','#26C6DA','#00BCD4','#00ACC1','#0097A7','#00838F','#006064','#84FFFF','#18FFFF','#00E5FF','#00B8D4','#B2DFDB','#80CBC4','#4DB6AC','#26A69A','#009688','#00897B','#00796B','#00695C','#004D40','#A7FFEB','#64FFDA','#1DE9B6','#E57373','#A5D6A7','#81C784','#66BB6A','#4CAF50','#43A047','#388E3C','#2E7D32','#1B5E20','#B9F6CA','#69F0AE','#00E676','#00C853','#C5E1A5','#AED581','#9CCC65','#8BC34A','#7CB342','#689F38','#558B2F','#33691E','#CCFF90','#B2FF59','#76FF03','#64DD17','#F0F4C3','#E6EE9C','#DCE775','#D4E157','#CDDC39','#C0CA33','#AFB42B','#9E9D24','#827717','#F4FF81','#EEFF41','#C6FF00','#AEEA00','#FFFDE7','#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17', '#FFFF8D', '#FFFF00', '#FFEA00', '#FFD600', '#FFF8E1', '#FFECB3', '#FFE082', '#FFD54F', '#FFCA28', '#FFC107', '#FFB300', '#FFA000', '#FF8F00', '#FF6F00', '#FFE57F', '#FFD740', '#FFC400', '#FFAB00', '#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100', '#FFD180', '#FFAB40', '#FF9100', '#FF6D00', '#FBE9E7', '#FFCCBC', '#FFAB91', '#FF8A65', '#FF7043', '#FF5722', '#F4511E',  '#E64A19','#D84315','#BF360C' ,'#FF9E80', '#FF6E40', '#FF3D00','#DD2C00', '#EFEBE9','#D7CCC8', '#BCAAA4','#A1887F','#8D6E63','#795548', '#6D4C41', '#5D4037','#4E342E', '#3E2723', '#90A4AE','#00BFA5','#78909C','#607D8B','#546E7A','#455A64',  '#37474F', '#263238', '#000000',]
+
+window.onload = (event) => {
+  var randomQuote = pickFromArray(quotes);
+  document.querySelector("h4").textContent = randomQuote.quote;
+  document.querySelector("h6").textContent = randomQuote.author;
+};
+
+
+
 getQuoteButton.addEventListener("click", function () {
+  var randomQuote = pickFromArray(quotes);
   console.log("iam clicked");
-   let randomQuote = pickFromArray(quotes);
-   document.querySelector("body").style.backgroundColor = pickFromArray(colors);
-  document.querySelector("h4").innerHTML = randomQuote.quote;
- document.querySelector("h6").innerHTML = randomQuote.author;
+  document.querySelector("body").style.backgroundColor = pickFromArray(colors);
+  document.querySelector("h4").textContent = randomQuote.quote;
+ document.querySelector("h6").textContent = randomQuote.author;
 });
 
 // DO NOT EDIT BELOW HERE

From 5b0674af94e45e79bf9bdd6d9383057bcc42d362 Mon Sep 17 00:00:00 2001
From: Ali Haider <alihaiderx736@gmail.com>
Date: Sun, 30 Aug 2020 00:20:21 +0100
Subject: [PATCH 8/8] 3- Slide Show Exercise Completed

---
 .../Homework/mandatory/3-slideshow/index.html | 16 +++-
 .../mandatory/3-slideshow/slideshow.js        | 96 +++++++++++++++++++
 .../Homework/mandatory/3-slideshow/style.css  | 59 ++++++++++++
 3 files changed, 170 insertions(+), 1 deletion(-)

diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
index 39cd40e..9889873 100644
--- a/Week-3/Homework/mandatory/3-slideshow/index.html
+++ b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <title>Slideshow</title>
-    <script src="slideshow.js"></script>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +12,20 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="slideshowTitle">
+      <h2>Image Carousel Slideshow</h2>
+    </div>
+    <div class="imageBox">
+        <img/>
+    </div>
+    <div class="buttons">
+    <button class="autoBackButton">Auto Back</button>
+    <button class="backButton">Back</button>
+    <button class="stopButton">Stop</button>
+    <button class="forwardButton">Forward</button>
+    <button class="autoForwardButton">Auto Forward</button>
+    </div>
+    <h6 class="counter slideshowTitle">1</h6>
+    <script src="slideshow.js"></script>
   </body>
 </html>
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