CodeYourFuture · Halla-S · Oct 20, 2021 · Oct 20, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -5,9 +5,21 @@ 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(() => {
+ document.body.style.backgroundColor = "pink";
+}, 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
@@ -60,9 +60,79 @@ const movies = [
     haveWatched: false,
   },
 ];
-
+// Task one
 // create showMovies function
 
-// create a new movie object for your favorite movie
+function showMovies(){
+  let newDiv = document.querySelector("#all-movies");
+  movies.forEach(movie => {
+    const para = document.createElement("p");
+
+    para.innerText = `Name of the Movie: ${movie.title} Name of the director${movie.director}`
+    newDiv.appendChild(para);
+  });
+  let numberOfMovies = document.getElementById("movies-number");
+  numberOfMovies.innerText = movies.length
+
+}
+showMovies()
+//----------------------------------------------
+//Task 2
+
+// Amend your function above to only show movies after 1 second. Remember to use setTimeout to achieve that
+//setTimeout(showMovies,1000)
+
+// 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?
+
+
+const myMovies = [
+  {
+    title: "Rat Race",
+    director: "Jerry Zucker",
+    type: "comedy",
+    haveWatched: true,
+  },
+  {
+    title: "The Bucket List",
+    director: "Rob Reiner",
+    type: "comedy-drama",
+    haveWatched: false,
+  },
+  {
+    title: "Beaches",
+    director: "Garry Marshall",
+    type: "comedy-drama",
+    haveWatched: true,
+  },
+  {
+    title: "Riding in Cars with Boys",
+    director: "Penny Marshall",
+    type: "biographical film ",
+    haveWatched: false,
+  },
+];
+
+
+
+function addMovies() {
+  function display(movie) {
+    let newDiv = document.querySelector("#all-movies");
+    const para = document.createElement("p");
+    para.innerText = `Name of the Movie: ${movie.title} Name of the director${movie.director}`;
+    newDiv.appendChild(para);
+    let numberOfMovies = document.getElementById("movies-number");
+    numberOfMovies.innerText = movies.length + myMovies.length;
 
-// create addMovies function
+
+  }
+  myMovies.forEach((movie, index) => {
+    setTimeout(display, index * 5000, movie);
+
+
+  });
+}
+addMovies();
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -3,15 +3,17 @@ 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 tags = document.querySelectorAll("section");
+tags.forEach(tag => tag.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.
+let images = document.querySelectorAll("img");
+console.log(images);
+images.forEach((image)=>{
+ image.style.display = "block"
+ image.style.margin = "0 auto"})
+
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
@@ -23,3 +25,17 @@ 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>.
+
+const Dates = ["Birth: 9 December  1906 Death: 1 January 1992","Birth: 26 August 1918  Death: 24 February 2020","Birth: 10 December 1815  Death: 27 November 1852"]
+
+tags = document.querySelectorAll("section");
+console.log(tags);
+let i=0;
+tags.forEach((section) =>{ 
+ let lastP = section.children;
+ lastP[lastP.length-2].innerText += `${Dates[i]}`;
+ i++
+ });
+
+
+ //console.log(section); 
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,25 +1,50 @@
-function setAlarm() {}
+function setAlarm() {
+  let timeRemaining = document.getElementById("timeRemaining");
+  let alarmSet = document.getElementById("alarmSet").value;
+  //let timeValue = document.getElementsByTagName("input");
+
+  //console.log(timeValue);
+
+  setInterval(() => {
+    if (alarmSet > 0) {
+      alarmSet--;
+      let minutes = Math.floor(alarmSet / 60);
+      let seconds = alarmSet % 60;
+      if (minutes < 10) {
+        minutes = `0${minutes}`;
+      }
+      if (seconds < 10) {
+        seconds = `0${seconds}`;
+      }
+      timeRemaining.innerText = `Time Remaining: ${minutes} : ${seconds}`;
+
+      if (alarmSet === 0) {
+        playAlarm();
+      }
+    }
+  }, 1000);
+
+}
+function pauseAlarm(){
+  clearInterval()
+}
+
 
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
-
 function setup() {
   document.getElementById("set").addEventListener("click", () => {
     setAlarm();
   });
-
   document.getElementById("stop").addEventListener("click", () => {
     pauseAlarm();
   });
 }
-
 function playAlarm() {
   audio.play();
 }
-
 function pauseAlarm() {
   audio.pause();
 }
-
 window.onload = setup;
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,46 @@
+let divCont = document.createElement("div");
+let quote = document.createElement("h5");
+let author = document.createElement("h6");
+let generateBtn = document.createElement("button");
+document.body.appendChild(divCont);
+let checkBox = document.createElement("input");
+let label = document.createElement("label");
+
+
+
+// checkbox.type = "checkbox";
+// checkbox.name = "name";
+// checkbox.value = "value";
+// checkbox.id = "checkbox1";
+// label.htmlFor = "checkbox1";
+//divCont.appendChild(checkBox);
+divCont.appendChild(quote);
+divCont.appendChild(author);
+divCont.appendChild(generateBtn);
+//divCont.ariaHasPopup(label)
+ divCont.className = "container";
+generateBtn.className = "button"
+
+
+
+
+
+author.style.marginLeft = "30%";
+author.style.marginTop = "3%";
+
+generateBtn.innerText = "Generate a Random Quote";
+generateBtn.addEventListener("click",generateRandomQuote)
+
+function generateRandomQuote() {
+  let pickedQuote= pickFromArray(quotes);
+quote.innerText =pickedQuote.quote; 
+  author.innerText = pickedQuote.author;
+}
+window.onload = generateRandomQuote;
+
+
+
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,16 @@
 /** Write your CSS in here **/
+.container{
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 20%;
+
+}
+.button{
+ background-color : 	#ADD8E6;
+ color: #0F52BA;
+ border: none;
+ border-radius: 5%;
+ margin-top: 5%;
+}
+
diff --git a/mandatory/3-slideshow/example-screenshots/pexels-bri-schneiter-346529.jpg b/mandatory/3-slideshow/example-screenshots/pexels-bri-schneiter-346529.jpg
diff --git a/mandatory/3-slideshow/example-screenshots/pexels-creative-vix-9754.jpg b/mandatory/3-slideshow/example-screenshots/pexels-creative-vix-9754.jpg
diff --git a/...atory/3-slideshow/example-screenshots/pexels-eberhard-grossgasteiger-443446.jpg b/...atory/3-slideshow/example-screenshots/pexels-eberhard-grossgasteiger-443446.jpg
diff --git a/mandatory/3-slideshow/example-screenshots/pexels-sagui-andrea-618833.jpg b/mandatory/3-slideshow/example-screenshots/pexels-sagui-andrea-618833.jpg
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,8 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
     <script src="slideshow.js"></script>
+
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,71 @@
 // Write your code here
+const imgs = [
+  "/mandatory/3-slideshow/example-screenshots/pexels-bri-schneiter-346529.jpg",
+  "/mandatory/3-slideshow/example-screenshots/pexels-creative-vix-9754.jpg",
+  "/mandatory/3-slideshow/example-screenshots/pexels-eberhard-grossgasteiger-443446.jpg",
+  "/mandatory/3-slideshow/example-screenshots/pexels-sagui-andrea-618833.jpg",
+];
+
+const newDiv = document.createElement("div");
+newDiv.className = "newDiv";
+let h5 = document.createElement("h5");
+h5.innerText = "Mountains";
+const forward = document.createElement("button");
+forward.innerText = "Forward";
+const back = document.createElement("button");
+back.innerText = "Back";
+const auto = document.createElement("button");
+auto.innerText = "Auto";
+const Stop = document.createElement("button");
+Stop.innerText = "Stop";
+const btnDiv = document.createElement("div");
+const newImg = document.createElement("img");
+document.body.appendChild(h5);
+document.body.appendChild(newDiv);
+newDiv.appendChild(btnDiv);
+btnDiv.appendChild(auto);
+btnDiv.appendChild(Stop);
+btnDiv.appendChild(forward);
+btnDiv.appendChild(back);
+var i = 0;
+function changeForward() {
+  newImg.src = imgs[i];
+  newDiv.appendChild(newImg);
+  newImg.className = "newImg";
+  if (i < imgs.length - 1) {
+    i++;
+  } else {
+    i = 0;
+  }
+}
+function changeBack() {
+  newImg.src = imgs[i];
+  newDiv.appendChild(newImg);
+  newImg.className = "newImg";
+  if (i > 0) {
+    i--;
+  } else {
+    i = imgs.length - 1;
+  }
+}
+
+
+forward.addEventListener("click", changeForward);
+back.addEventListener("click", changeBack);
+auto.addEventListener("click",autoSlide);
+Stop.addEventListener("click", stopSlide);
+
+let interval;
+function autoSlide(){
+ interval = setInterval(changeBack, 500);
+}
+
+function stopSlide(){
+ clearInterval(interval);
+}
+
+
+
+
+
+window.onload = changeForward;
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,17 @@
 /** Write your CSS in here **/
+.newImg{
+ width : 500px;
+ height: 500px;
+ display: block ;
+ margin-bottom: 2%;
+}
+.newDiv{
+ display:flex;
+ flex-direction: column-reverse;
+ align-items: center;
+
+}
+h5{
+ text-align: center;
+
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,8 @@ @@
       </head>
       <body>
         <!-- Write your HTML in here -->
         <script src="slideshow.js"></script>
       </body>
     </html>