Homework & InClass

Put some finishing touches to my homework and also sorted my Inclass homework
CodeYourFuture · Ade0211 · Jul 27, 2020 · Jul 27, 2020 · Jul 28, 2020 · Jul 29, 2020
commit 26ce043ebeb74c32dc38dd2c636cbf23367572da
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,29 +1,24 @@
-function setAlarm() {
-// let Date = new Date();
-  // let myClock = document.getElementById("set");
-  let alarmSet = document.getElementById("alarmSet");
-   remainingTime = document.getElementById("timeRemaining");
-  let time = parseInt(alarmSet.value); 
-
-
-  // 125seconds= 02:05
-
- let timeIn = setInterval(function(){
-   let min = Math.floor(time/60);
-   let sec = time-min * 60;
-
-    remainingTime.textContent = ("Time Remaining: ") + (min>9?min:"0" +min) + ":" + (sec>9?sec:"0" + sec);
-
-        if(time === 0){
-          playAlarm();
-
-       return clearInterval(timeIn);
-
-        }
-        time--;
-  }, 1000);
-
-}
+    function setAlarm() {
+      let alarmSet = document.getElementById("alarmSet");
+      remainingTime = document.getElementById("timeRemaining");
+      let time = parseInt(alarmSet.value); 
+
+    let timeIn = setInterval(function(){
+      let min = Math.floor(time/60);
+      let sec = time-min * 60;
+
+        remainingTime.textContent = ("Time Remaining: ") + (min>9?min:"0" +min) + ":" + (sec>9?sec:"0" + sec);
+
+            if(time === 0){
+              playAlarm();
+
+          return clearInterval(timeIn);
+
+            }
+            time--;
+      }, 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
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+
     <title>Quote Generator</title>
     <link
       rel="stylesheet"

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -26,6 +26,7 @@
 
   //   return quotes[Math.floor(Math.random() * quotes.length)] ;
 
+
   // }
   //Function to randomly select a quote value and return a random quote object from the quotes array
   function getRandomQuote () {

diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -1,17 +1,44 @@
-<!DOCTYPE html>
-<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"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <!-- Write your HTML in here -->
-  </body>
-</html>
+    <!DOCTYPE html>
+    <html>
+
+      <head>
+        <title>Slideshow</title>
+
+        <link
+          rel="stylesheet"
+          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+          crossorigin="anonymous"
+        />
+
+        <link rel="stylesheet" href="style.css" />
+      </head>
+      <body>
+        <div class="container">
+          <div class="img-slider"> 
+            <img src="https://images.pexels.com/photos/1724374/pexels-photo-1724374.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="lastClone" alt="">
+            <img src="https://images.pexels.com/photos/4552368/pexels-photo-4552368.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+
+          <img src="https://images.pexels.com/photos/4613880/pexels-photo-4613880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+
+          <img src="https://images.pexels.com/photos/1100946/pexels-photo-1100946.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+
+          <img src="https://images.pexels.com/photos/1724374/pexels-photo-1724374.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img src="https://images.pexels.com/photos/3820132/pexels-photo-3820132.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img src="https://images.pexels.com/photos/4508667/pexels-photo-4508667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img src="https://images.pexels.com/photos/4614167/pexels-photo-4614167.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img src="https://images.pexels.com/photos/4046262/pexels-photo-4046262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img src="https://images.pexels.com/photos/3184434/pexels-photo-3184434.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
+          <img class="img" src="https://images.pexels.com/photos/4755027/pexels-photo-4755027.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="firstClone" alt="">
+
+        </div>
+        </div>
+      <div class="myBtn">
+        <button id="previousBtn">Back</button>
+        <button id="forwardBtn">Forward</button>
+      </div>
+        <!-- Write your HTML in here -->
+        <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,42 @@
-// Write your code here
+
+const container = document.querySelector(".img-slider");
+
+const imgSlider = document.querySelectorAll(".img-slider img");
+
+const previousBtn = document.querySelector("#previousBtn");
+const forwardBtn = document.querySelector("#forwardBtn");
+let counter = 1;
+const size = imgSlider[0].clientWidth;
+container.style.transform = `translateX(`+ (-size *counter) + `px)`;
+
+forwardBtn.addEventListener("click", ()=>{
+    if(counter >= imgSlider.length -1) return;
+    container.style.transition = "transform 0.4s ease-in-out";
+    counter++;
+
+    container.style.transform = `translateX(`+ (-size *counter) + `px)`;
+})
+
+previousBtn.addEventListener("click", ()=>{
+    if(counter <= 0) return;
+    container.style.transition = "transform 0.4s ease-in-out";
+    counter--;
+
+    container.style.transform = `translateX(`+ (-size *counter) + `px)`;
+})
+
+container.addEventListener('transitionend', ()=> {
+
+    if(imgSlider[counter].id === 'lastClone'){
+        container.style.transition = "none";
+        counter = imgSlider.length - 2;
+        container.style.transform = `translateX(`+ (-size *counter) + `px)`;
+    }
+    if(imgSlider[counter].id === 'firstClone'){
+        container.style.transition = "none";
+        counter = imgSlider.length - counter;
+        container.style.transform = `translateX(`+ (-size *counter) + `px)`;
+    }
+
+
+    });
diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css
@@ -1 +1,38 @@
 /** Write your CSS in here **/
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container{
+
+    width: 30%;
+    margin: auto;
+    overflow: hidden; 
+    border: 4px solid black;
+    position: relative;
+}
+.img-slider{
+
+    display: flex;
+    width: 100%;
+
+
+}
+ .myBtn{
+display: flex;
+justify-content: center;
+
+}
+#previousBtn{
+    padding: 10px;
+    border-radius: 5px;
+    background-color: royalblue;
+}
+#forwardBtn{
+    padding: 10px;
+    border-radius: 5px;
+    background-color: skyblue;
+}
diff --git a/Week-3/InClass/Callbacks/exercise-1/exercise.js b/Week-3/InClass/Callbacks/exercise-1/exercise.js
@@ -2,12 +2,35 @@
 ================
 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
 ================
-*/
+*/
+//Task 1
+setTimeout(function(){
+
+    document.body.style.backgroundColor = "blue";
+
+}, 5000);
+
+//Task 2
+
+function getRandomColor () {
+    let color1 = Math.floor(Math.random() * 255 );
+    let color2 = Math.floor(Math.random() * 255 );
+    let color3 = Math.floor(Math.random() * 20 );
+    let randomColor = 'rgb(' + color1 + ',' + color2 + ',' + color3 + ')';
+    return randomColor;
+  }
+
+setInterval(function change() {
+
+  document.body.style.backgroundColor = getRandomColor();
+}, 5000);
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ @@
       //   return quotes[Math.floor(Math.random() * quotes.length)] ;
       // }
       //Function to randomly select a quote value and return a random quote object from the quotes array
       function getRandomQuote () {
@@ Expand Down @@