CodeYourFuture · samia-pk · Feb 3, 2021 · Feb 3, 2021 · Feb 4, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -1,13 +1,23 @@
-/*
-================
-EXERCISE 1
+let div = document.getElementById("main");
 
-Task 1
-Using setTimeout, change the background colour of the page after 5 seconds (5000 milliseconds).
+function changeColour() {
+  div.style.backgroundColor = "yellow";
+}
 
-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
+setTimeout(changeColour, 5000);
 
-Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
-================
-*/
+
+// task 2
+
+let i = 0;
+let colours = ["pink", "red", "green"  "#efefef", "#0ae071"];
+
+function changeColourFiveSeconds() {
+  div.style.backgroundColor = colours[i];
+  i++;
+
+  if (i > colours.length) {
+    i = 0;
+  };
+};
+setInterval(changeColourFiveSeconds, 5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -63,8 +63,45 @@ const movies = [
 
 // create showMovies function
 
+function showMovies () {
+
+let span = document.getElementById("movies-number");
+span.innerHTML = movies.length;
+
+for (let i = 0; i < movies.length; i ++) {
+let div = document.getElementById("all-movies");
+let p = document.createElement("p");
+
+setTimeout(function () {
+  p.innerHTML = `${movies[i].title} - ${movies[i].director}`;
+  delete movies[i];
+  div.appendChild(p);
+}, 1000);
+};
+};
+
+showMovies();
+
+
 
 // create a new movie object for your favorite movie
 
 
+let myMovies = {
+    title: "Hush",
+    director: "Mike Flanagan",
+    type: "Horror/Thriller",
+    haveWatched: true,
+};
+
+
 // create addMovies function
+
+function addMovies (movie) {
+    setTimeout(function () {
+      movies.push(movie);
+      showMovies(movies);
+    }, 2000);
+  };
+
+addMovies(myMovies);
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -23,6 +23,26 @@ <h1>My movies</h1>
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
     </div>
+    </div>
+  </div>
+
+ <form>
+    <label for="title">Title</label>
+      <input id="title" type="text"  placeholder="title"/>  
+<br/>
+    <label for="director">Director</label>
+      <input id="director" type="text" value="text" placeholder="director"/>  
+  <br/>
+    <label for="haveWatched">haveWatched</label>
+      <input id="haveWatched" haveWatched="text" value="text" placeholder="haveWatched"/> 
+  <br/>
+    <label for="movieGenre">movieGenre</label>
+      <input id="movieGenre" type="text" value="text" placeholder="movieGenre"/>   
+<br/>
+    <button id="saveBtn" type="button" value="submit">Save</button>  
+  </form>
+
+
     <script src="exercise.js"></script>
 </body>
 

diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -2,24 +2,32 @@ 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.
-
+// Without changing any of the HTML or CSS, update the <section> 
+// tags so that they have white backgrounds.
 
 
+let background = document.querySelectorAll("section").forEach(colour => 
+    colour.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.
+// 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.
 
-
+let images = document.querySelectorAll("img").forEach(pic => 
+    pic.style.cssText += "display: block; margin:auto"
+    );
 
 
 
 
 // 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>.
+// 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>.
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,55 @@
-function setAlarm() {}
+// function setAlarm() {
+//   let timeRemaining = document.getElementById("timeRemaining");
+//   let inputField = document.getElementById("alarmSet");
+
+//   let hour = inputField.valueAsNumber
+//   console.log(inputField)
+//   console.log(hour)
+
+// //   if (hour >= 10) {
+//      timeRemaining.innerText = "Time Remaining: 00:" + hour;
+//   } else{
+//        timeRemaining.innerText = "Time Remaining: 00:0" + hour;
+//   }
+
+//   let counter = hour;
+
+//   function startCounter(counter) {
+//     if (counter>0) { 
+//       counter--;
+//       setTimeout(function () {
+//        startCounter(counter)
+//         console.log(counter);
+//       }, 1000);
+//       timeRemaining.innerText = "Time Remaining: 00:" + (counter < 10 ? "0" + counter : counter )
+//     } else {
+//       playAlarm();
+//     }
+//   };
+//    startCounter(counter)
+
+
+// }
+
+let set = document.getElementById("alarmSet");
+let display = document.getElementById("timeRemaining");
+
+function setAlarm() {
+
+  if (set.value > 0){
+    set.value--;
+    let time = set.value;
+    let minutes = Math.floor(time/60);
+    let seconds = time % 60;
+    seconds = seconds < 10 ? "0" + seconds:seconds;
+    minutes = minutes < 10 ? "0" + minutes:minutes;
+    display.innerHTML =  `Time Remaining: ${minutes}:${seconds}`;
+  }  else if (display.innerHTML === "Time Remaining: " + "00:" + "00"){
+    playAlarm();
+  }
+}
+
+
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,11 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <h2>Quotes</h2>
+    <div id="Box">
+      <button id="btn" class="btn btn-success">Next quote</button>
+      <p id="output">Press for Quote</p>
+      <p id="author">author</p>
+    </div>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -490,3 +490,14 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+
+document.addEventListener("DOMContentLoaded", function generateRandom () {
+  let btn = document.getElementById("btn");
+  let p = document.getElementById("output");
+  let pAuthor = document.getElementById("author");
+  let num = quotes[Math.floor(Math.random() * quotes.length)];
+  p.innerHTML = num.quote;
+  pAuthor.innerHTML = num.author;
+btn.addEventListener("click", generateRandom);
+});
diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,37 @@
 /** Write your CSS in here **/
+body {
+    background-color: rgb(177, 167, 167);
+}
+
+
+#Box {
+    background-color: rgb(46, 141, 148);
+    border: 5px solid black;
+    height: 300px;
+    width: 60%;
+    margin: 0 auto;
+    text-align: center;
+}
+#btn {
+    margin: 10px auto;
+    height: 50px;
+    width: 250px;
+    border-radius: 5%;
+}
+
+#output {
+    margin: 10px auto;
+    font-size: 20px;
+    color: white;
+}
+
+h2 {
+    text-align: center;
+    margin: 2% 30% 3% 30%;
+    background-color: rgb(8, 8, 8);
+    color: white;
+    padding: 1%;
+}
+
+h3 {
+    color: white; }
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,17 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+
+   <div id='container'>
+      <p> Images </p>
+      <div id='img'>
+      <img id="images" src="/mandatory/3-slideshow/Images/img1.jpeg">
+      </div>
+
+      <button id="nextBtn"> Next Photo </button>
+     <button id="backBtn"> Previous Photo </button>
+    </div>
+
+
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,21 @@
 // Write your code here
+let nextBtn = document.getElementById('nextBtn');
+let backBtn = document.getElementById('backBtn');
+
+let pics = document.getElementById('images')
+
+let counter = 0;
+
+nextBtn.addEventListener('click', e =>{
+   if(counter<5){
+    counter++;
+    document.getElementById('images').src = `/mandatory/3-slideshow/Images/img${counter}.jpeg`; 
+  }
+})
+
+backBtn.addEventListener('click', e =>{
+   if(counter>1){
+    counter--;
+    document.getElementById('images').src = `/mandatory/3-slideshow/Images/img${counter}.jpeg`; 
+  }
+})
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,14 @@
 /** Write your CSS in here **/
+#imageContainer {
+    display: block;
+    margin: 0 auto;
+    background-color: rgb(26, 177, 214);
+    width: 50%;
+    text-align: center;
+}
+
+#carouselImage {
+    position: relative;
+    width: 100%;
+    height: 400px;
+}