CodeYourFuture · dotdashdon · Oct 19, 2021 · Oct 19, 2021 · Oct 19, 2021 · Oct 23, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,14 @@ Update your code to make the colour change every 5 seconds to something differen
 Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
 ================
 */
+
+setTimeout(() => {
+ document.body.style.backgroundColor = "red";
+}, 5000)
+
+
+//Task2:
+const colors = ["blue", "red", "pink", "green"]; 
+let i = 0;
+setInterval(() => {document.body.style.backgroundColor = colors[i];
+i = (i + 1) % colors.length;} , 2000); 
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -33,6 +33,7 @@ TIP: Use the functions you created on tasks 1-3
 
 Prefer to work on a codepen? https://codepen.io/makanti/pen/MWwMgmW?editors
 ================
+
 */
 const movies = [
   {
@@ -61,7 +62,38 @@ const movies = [
   },
 ];
 
-// create showMovies function
+
+
+
+// Task 1
+// Create a function called "showMovies" that
+// - iterates through the "movies" array and
+// - for each movie, it creates a <p> 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"
+// // create showMovies function
+  function showMovies () {
+
+    let content = document.getElementById("all-movies");
+    let span = document.getElementById("movies-number");
+    msContentScript.innerHTML ="";
+    movies.forEach(movie => {
+
+      let p = document.createElement ("p");
+      p.innerText = `Title: ${movie.title}, Director: ${movie.director}`
+    })
+  }
+
+//   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?
+
+function addMovie () {
+
+}
 
 // create a new movie object for your favorite movie
 

diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -20,8 +20,8 @@
     <div class="jumbotron">
       <h1>My movies</h1>
       <div id="all-movies">
-        <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
+        <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
     </div>
     <script src="exercise.js"></script>
 </body>

diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,34 @@
-function setAlarm() {}
+function setAlarm() {
+  let setTimeInput = document.getElementById("alarmSet").value;
+  let timeRemaining = document.getElementById("timeRemaining");
+
+  let minutes = Math.floor(setTimeInput / 60);
+  let seconds = setTimeInput - minutes * 60
+
+  timeRemaining.innerHTML = `Time Remaining: ${minutes < 10 ? "0" + minutes : minutes}:${seconds < 10 ? "0" + seconds : seconds}`;
+
+  //let colors = ["red", "yellow", "blue", "green", "purple", "orange", "pink"]
+  let everySecond = setInterval( () => {
+     if(setTimeInput > 0){
+      setTimeInput -= 1;
+      let minutes = Math.floor(setTimeInput / 60);
+      let seconds = setTimeInput - minutes * 60;
+      timeRemaining.innerHTML = `Time Remaining: ${minutes < 10 ? "0" + minutes : minutes}:${seconds < 10 ? "0" + seconds : seconds}`;
+     }
+
+     if(setTimeInput == 0){
+       clearInterval(everySecond)
+       playAlarm();
+     }
+  }, 1000)
+
+}
+
+
+
+
+
+
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/1-alarmclock/index.html b/mandatory/1-alarmclock/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -26,4 +26,30 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
     </div>
     <script src="alarmclock.js"></script>
   </body>
-</html>
+</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>
+    <!-- Write your HTML in here -->
+    <div id="imageContainer">
+
+    </div>
+    <div id="buttonsContainer">
+      <button id="previousBtn">Previous</button>
+      <button id="nextBtn">Next</button>
+      <button id="autoBtn">Auto</button>
+    </div>
+    <script src="slideshow.js"></script>
+  </body>
+</html>
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -11,7 +11,16 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div  class="container">
+    <h1>Random Quote Generator</h1>
+    <div id="quoteDisplay">
+    <!---quotes will be displayed here-->
+    </div>
+    <button onclick="newQuote()" >Click here for new quote</button>
+</div>
     <script src="quotes.js"></script>
   </body>
 </html>
+
+
+
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,5 +1,13 @@
-// DO NOT EDIT BELOW HERE
 
+function newQuote() {
+let randomNumber =Math.floor(Math.random()* (quotes.length));
+let quoteObject = quotes[randomNumber];
+document.getElementById('quoteDisplay').innerHTML=`
+<p>${quoteObject.quote} (${quoteObject.author})</p>
+`
+}
+
+// DO NOT EDIT BELOW HERE
 // A function which will return one item, at
 // random, from the given array.
 //

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,4 @@
 /** Write your CSS in here **/
+* {
+    box-sizing:border-box;
+}
diff --git a/mandatory/3-slideshow/image1.jpg b/mandatory/3-slideshow/image1.jpg
diff --git a/mandatory/3-slideshow/image2.jpg b/mandatory/3-slideshow/image2.jpg
diff --git a/mandatory/3-slideshow/image3.jpg b/mandatory/3-slideshow/image3.jpg
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -15,3 +15,34 @@
     <script src="slideshow.js"></script>
   </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">
+      <h1>Tea</h1>
+      <!-- <img id="image-gallery" src="https://images.unsplash.com/photo-1596804731986-5a7c5e7786c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" width="500" height="600"/> -->
+        <div id="buttons">
+        <button class="btn" id="auto-bk">Auto-back</button>
+        <button class="btn" id="bk">Back</button>
+        <button class="btn" id="stop">Stop</button>
+        <button class="btn" id="auto-forward">Forward</button>
+        <button class="btn" id="auto-fwd">Auto-forward</button>
+      </div> 
+
+    <img name="slide" width="500" height="400"/>
+
+
+    </div>
+    <script src="slideshow.js"></script>
+  </body>
+</html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,26 @@
-// Write your code here
+
+var  i =0; //start point 
+let images = []; //images array 
+let time = 3000; // time between switch
+
+//Image List 
+images[0] = 'image1.jpg';
+images[1] = 'image2.jpg';
+images[2] = 'image3.jpg';
+
+//change image 
+function changeImg(){
+    document.slide.src =images[i];
+//check index length
+    if (i< images.length-1){
+i++ // adding 1 to index 
+    }else {
+        i=0;  //reset back to zero
+    }
+//run function every x seconds 
+    setTimeout("changeImg()", time);
+}
+ //run function when page loads
+window.onload =changeImg;
+
+//let image = document.getElementById("image");
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,24 @@
-/** Write your CSS in here **/
+
+@import url('https://fonts.googleapis.com/css2?family=poppins&display=swap');
+
+* {
+    box-sizing:border-box;
+}
+
+.container {
+    /*display: flex;*/
+margin-top: 5rem;
+    width: 90vw;
+    border-radius: 3px;
+    background-color: rgb(184, 245, 245);
+}
+
+.h1 {
+align-items: center;
+
+}
+
+.btn {
+    font-size: 24px;
+
+}