CodeYourFuture · AliHaider-1 · Aug 25, 2020 · Aug 25, 2020 · Aug 25, 2020 · Aug 25, 2020
diff --git 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/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
 

diff --git 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"
@@ -13,5 +12,14 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+  <div class="quoteTitle">
+  <h2>Quote Generator</h2>
+  </div>
+  <div class="quoteBox">  
+    <blockquote><h4> </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
@@ -1,3 +1,23 @@
+let getQuoteButton = document.querySelector("button");
+
+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");
+  document.querySelector("body").style.backgroundColor = pickFromArray(colors);
+  document.querySelector("h4").textContent = randomQuote.quote;
+ document.querySelector("h6").textContent = randomQuote.author;
+});
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -433,7 +453,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
@@ -1 +1,56 @@
 /** 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:auto ;
+    background-color: whitesmoke;
+    width: 50%;
+    margin: auto;
+    margin-top: 1%;
+    padding: 2%;
+    border-radius: 10px;
+    border: 2px solid white;
+    position: relative;
+    z-index: 1;
+    display: block;
+    text-align: justify;
+}
+
+h6 {
+    text-align: right;
+}
+
+.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;
+}
diff --git 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
@@ -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
@@ -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;
+}
diff --git 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
 ================
-*/
+*/
+
+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);
+
+