CodeYourFuture · ATedy · Jan 27, 2021 · Jan 28, 2021 · Jan 28, 2021 · Jan 29, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -10,4 +10,21 @@ 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
 ================
-*/
+*/
+
+//Task 1
+  // setTimeout(function bgColor() {
+  //   document.body.style.backgroundColor = "blue";
+  // },5000);
+
+
+// Task-2
+
+
+setInterval(
+  function () {
+    //random hex colors generated
+     let randomColor = Math.floor(Math.random()*16777215).toString(16);
+    // let randomColor = Math.floor(Math.random() * 255);
+    document.body.style.backgroundColor = "#"+randomColor;
+  },5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -62,9 +62,42 @@ const movies = [
 ];
 
 // create showMovies function
+function showMovies(movies){
+  const allMovies = document.getElementById("all-movies")
+  movies.forEach((movie) =>{
+    let newPara = document.createElement('p');
+    newPara.innerHTML = `${movie.title} by ${movie.director}`;
+    allMovies.appendChild(newPara);
+  })
+  document.getElementById("movies-number").innerHTML = movies.length;;
+}
 
+ showMovies(movies);
 
+// setTimeout(showMovies, 3000);
 // create a new movie object for your favorite movie
+const myMovie = [];
+
+setTimeout(function addMovie(){
+  movies.map((movie) => {
+    if(movie.haveWatched === true){
+      myMovie.push(movie);
+    }
+  })
+ // return myMovie;
+ let newh1 = document.createElement("h1");
+ newh1.innerHTML = "My favourite Movies";
+ document.getElementById("all-movies").appendChild(newh1);
+ //call-back
+ showMovies(myMovie);}
+ , 2000);
+
+
+
+
+
+
+
 
 
 // create addMovies function
diff --git a/InClass/DOM-practice/index.html b/InClass/DOM-practice/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <title>The Mothers of Tech</title>
+          <title>The Mothers of Tech</title>
 
   <!-- <link rel="stylesheet" href="./bootstrap.min.css" /> -->
   <link rel="stylesheet" href="./styles.css" />

diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -4,22 +4,36 @@ console.log("Testing JS file loaded!")
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
-
-
-
-
+ const sec = document.getElementsByTagName('section');
+ for(let i = 0; i < sec.length; i++){
+   sec[i].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.
 
+const images = document.getElementsByTagName('img');
+console.log(images);
+ for(let j = 0; j < images.length; j++){
+   images[j].classList.add("content-title")
+ }
 
 
+// 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>.
 
+const para1 = sec[0].getElementsByTagName("p");
+para1[2].append(" She was born in 9th December, 1906.");
 
-// Task 3
+const para2 = sec[1].getElementsByTagName("p");
+ para2[1].append(" She was born in 27th August, 1918");
 
-// 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>.
+ const para3 = sec[2].getElementsByTagName("p");
+ console.log(para3);
+ para3[3].append(" She was born in 27th November, 1852")
+
+
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,13 @@
-function setAlarm() {}
+function setAlarm() {
+  // let timeRemainCounter = document.getElementById("timeRemaining");
+  // let inputText = document.getElementById("alarmSet");
+  // let btnSet = document.getElementById("set");
+  // let btnStop = document.getElementById("stop");
+  // console.log(inputText.value);
+  let timeRemainingValue = inputText.value;
+  timeRemainingValue--;
+  timeRemainCounter.innerHTML = `Time Remaining: 00:0${timeRemainingValue}`;
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/1-alarmclock/index.html b/mandatory/1-alarmclock/index.html
@@ -2,14 +2,12 @@
 <html>
   <head>
     <title>Alarm Clock</title>
-    <script src="alarmclock.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" />
+      crossorigin="anonymous"/>
+    <link rel="stylesheet" href="style.css"/>
   </head>
 
   <body>
@@ -24,5 +22,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
         <button id="stop" type="button">Stop Alarm</button>
       </div>
     </div>
+    <script src="alarmclock.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/index.html b/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,11 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="quote-container">
+      <h2 id="quote"></h2>
+      <p id="quote-author"></p>
+      <button id="quote-btn">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,3 +1,9 @@
+
+
+
+
+
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -490,3 +496,18 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+
+let btn = document.getElementById("quote-btn");
+
+ function randomQuoteGenerator() {
+    let quoteText =  document.getElementById("quote");
+    let para = document.getElementById("quote-author");
+    randomQuote =  quotes[Math.floor(Math.random() * quotes.length)];
+    quoteText.innerText = randomQuote.quote;
+    para.innerHTML = "- " + randomQuote.author;
+}
+// quoteFromArr();
+// console.log(btn);
+window.onload = randomQuoteGenerator();
+btn.addEventListener("click", randomQuoteGenerator);
diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,34 @@
 /** Write your CSS in here **/
+body{
+  background-color: rgb(241, 252, 252);
+}
+#quote-container{
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  background-color: antiquewhite;
+  display: block;
+  margin: 0 auto;
+  width: 60%;
+  height: 350px;
+  text-align: center;
+}
+
+#quote-btn{
+  position:absolute;
+  top: 300px;
+  left: 85%;
+  background-color: rgb(242, 245, 216);
+}
+#quote{
+  position: relative;
+  padding-top: 60px;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+#quote-author{
+  text-align: right;
+  padding-right: 50px;
+  font-size: 1.4rem;
+
+}
diff --git a/mandatory/3-slideshow/example-screenshots/Images.js b/mandatory/3-slideshow/example-screenshots/Images.js
@@ -0,0 +1,23 @@
+export const images = [
+  {
+    name: "image-1",
+    src: "https://images.unsplash.com/photo-1611185772530-2ab31d6ba876?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80",
+  },
+
+  {
+    name: "image-2",
+    src: "https://images.unsplash.com/photo-1611329532992-0b7ba27d85fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+  },
+  {
+    name: "image-3",
+    src: "https://images.unsplash.com/photo-1599108656750-54572dae5c9f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+  },
+  {
+    name: "image-4",
+    src: "https://images.unsplash.com/photo-1583160593462-6cbf88f6b165?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+  },
+  {
+    name: "image-5",
+    src: "https://images.unsplash.com/photo-1602131029384-a2ebef3ea73b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTB8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+  },
+];
diff --git a/mandatory/3-slideshow/index.html b/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,15 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="imageContainer">
+      <h2>Image Slideshow</h2>
+
+      <img id="carouselImage">
+      <button class="btn btn-info" id="forwardBtn">Forward</button>
+      <button class="btn btn-info" id="backwardBtn">Backward</button>
+      <button class="btn btn-info" id="autoBtn">Auto</button>
+      <button class="btn btn-info" id="autoStop">Stop</button>
+    </div>
+    <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,80 @@
 // Write your code here
+import images from "./Images.js";
+// const images = [
+//   {
+//     name: "image-1",
+//     src: "https://images.unsplash.com/photo-1611185772530-2ab31d6ba876?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80",
+//   },
+
+//   {
+//     name: "image-2",
+//     src: "https://images.unsplash.com/photo-1611329532992-0b7ba27d85fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+//   },
+//   {
+//     name: "image-3",
+//     src: "https://images.unsplash.com/photo-1599108656750-54572dae5c9f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+//   },
+//   {
+//     name: "image-4",
+//     src: "https://images.unsplash.com/photo-1583160593462-6cbf88f6b165?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+//   },
+//   {
+//     name: "image-5",
+//     src: "https://images.unsplash.com/photo-1602131029384-a2ebef3ea73b?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTB8fG5hdHVyZSUyMGJhY2tncm91bmR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+//   },
+// ];
+
+// timer handle for SetTimeout
+let timer = 0;
+let counter = 0;
+let btnForward = document.getElementById("forwardBtn");
+let btnBackward = document.getElementById("backwardBtn");
+let btnAuto = document.getElementById("autoBtn");
+let btnStop = document.getElementById("autoStop");
+
+function slideShow() {
+  let imageId = document.getElementById("carouselImage");
+  imageId.setAttribute("src", images[counter].src);
+}
+
+btnForward.addEventListener("click", () => {
+  counter++;
+  slideShow();
+  //  loops over the images
+  // console.log(counter);
+  if (counter === images.length - 1) {
+    counter = 0;
+  }
+});
+
+btnBackward.addEventListener("click", () => {
+  //  loops over the images
+  console.log(counter);
+  if (counter === 0) {
+    counter = 4;
+  }
+  slideShow();
+  counter--;
+});
+
+function autoSlide() {
+  counter++;
+  slideShow();
+  //  loops over the images
+  //  console.log(counter);
+  if (counter === images.length - 1) {
+    counter = 0;
+  }
+}
+
+//auto slide show btn
+btnAuto.addEventListener("click", () => {
+  timer = setInterval(autoSlide, 2000);
+});
+
+//stops auto loop
+btnStop.addEventListener("click", () => {
+  clearTimeout(timer);
+});
+
+window.onload = slideShow;
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,15 @@
 /** Write your CSS in here **/
+#imageContainer{
+  display: block;
+  margin: 0 auto;
+  background-color: rgb(215, 243, 250);
+  width: 50%;
+  text-align: center;
+
+}
+#carouselImage{
+  position: relative;
+  width: 100%;
+  height: 400px;
+
+}