CodeYourFuture · ironkamosi · Jan 27, 2021 · Jan 27, 2021 · Jan 28, 2021 · Jan 29, 2021
diff --git a/InClass/Callbacks/exercise-1/callback exercise 1 output.PNG b/InClass/Callbacks/exercise-1/callback exercise 1 output.PNG
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -4,10 +4,26 @@ 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
 ================
-*/
+*/
+
+let count = 0;
+
+function changeBackgroundColor() {
+  count++;
+  let main = document.getElementById("main");
+  if (count % 2 === 0) {
+    main.style.backgroundColor = "red";
+  } else {
+    main.style.backgroundColor = "green";
+  }
+}
+
+// Task 1 solution:
+setTimeout(changeBackgroundColor, 5000);
+
+// Task 2 solution:
+setInterval(changeBackgroundColor, 5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -34,6 +34,9 @@ TIP: Use the functions you created on tasks 1-3
 Prefer to work on a codepen? https://codepen.io/makanti/pen/MWwMgmW?editors
 ================
 */
+// Global variable
+let saveButton = document.getElementById("saveBtn");
+
 const movies = [
   {
     title: "Color Out of Space",
@@ -61,10 +64,47 @@ const movies = [
   },
 ];
 
-// create showMovies function
-
-
 // create a new movie object for your favorite movie
+const favMovies = {
+  title: "The Graduate",
+  director: "Mike Nichols",
+  type: "drama",
+  HaveWatched: true,
+};
 
+function showMovies() {
+  document.getElementById("movies-number").innerHTML = movies.length;
+  movies.forEach((element, index) => {
+    let allMoviesIdDiv = document.getElementById("all-movies");
+    let paragraph = document.createElement("p");
+    delete movies[index];
+    setTimeout(function () {
+      paragraph.innerHTML = `<strong>Movie Tile:</strong> ${element.title} <strong>Movie Director:</strong> ${element.director}`;
+      allMoviesIdDiv.appendChild(paragraph);
+    }, 1000);
+  });
+}
+showMovies();
 
+// 2nd step
 // create addMovies function
+function addMovies(movieObject) {
+  setTimeout(function () {
+    movies.push(movieObject);
+    showMovies(movies);
+  }, 2000);
+}
+addMovies(favMovies);
+
+// 3rd step  add new items to the movie list
+saveButton.addEventListener("click", (event) => {
+  event.preventDefault();
+  let createMovieEntries = {
+    title: document.getElementById("movie-title").value,
+    director: document.getElementById("movie-director").value,
+    type: document.getElementById("movie-type").value,
+    haveWatched: document.getElementById("movie-watched").value,
+  };
+  addMovies(createMovieEntries, movies);
+  document.getElementById("form").reset(); // clears form text
+});
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -23,6 +23,23 @@ <h1>My movies</h1>
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
     </div>
+  </div>
+  <div id="form-container">
+    <form id="form"> 
+      <label for="title">Movie title:</label>
+      <input id="movie-title" type="text" name="title" placeholder="Title">
+      <br>
+      <label for="director">Movie director:</label>
+      <input id="movie-director" type="text" name="director" placeholder="Director:">
+      <br>
+      <label for="type">Movie type:</label>
+      <input id="movie-type" type="text" name="type" placeholder="Type">
+      <br>
+      <label for="watched">Have you watched this movie?</label>
+      <input id="movie-watched" type="text" name="watched" placeholder="true or false">
+      <input id="saveBtn" type="submit" value="Save">
+    </form>
+  </div>
     <script src="exercise.js"></script>
 </body>
 

diff --git a/InClass/Callbacks/exercise-2/output movie list website.PNG b/InClass/Callbacks/exercise-2/output movie list website.PNG
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -1,25 +1,52 @@
-console.log("Testing JS file loaded!")
-
+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.
 
-
-
-
-
+function changeBackgroundColour() {
+  let sectionNewColor = document.getElementsByTagName("section");
+  for (let i = 0; i < sectionNewColor.length; i++) {
+    sectionNewColor[i].style.backgroundColor = "lightblue";
+  }
+}
+changeBackgroundColour();
 
 // 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.
-
-
-
-
-
+function imagePosition() {
+let imageElement = document.getElementsByTagName("img");
+  Array.from(imageElement).forEach((element) => {
+      element.style.display = "block";
+      element.style.margin = "auto";
+  });
+}
+imagePosition();
 
 // 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 femalePioneers = [
+    {
+        DOB: 1997,
+        DOD: 2055,
+    },
+    {
+        DOB: 1997,
+        DOD: 2081,
+    },
+    {
+        DOB: 1997,
+        DOD: 2011,
+    },
+];
+
+function heroines() {
+ let sections = document.getElementsByTagName("section");
+Array.from(sections).forEach((sections, index) => {
+    let p = document.createElement("p")
+    p.innerText = `Date of Birth: ${femalePioneers[index].DOB} Died in ${femalePioneers[index].DOD}`;
+    sections.append(p);
+})
+
+};
+
+heroines()
diff --git a/InClass/DOM-practice/output dom practice website.PNG b/InClass/DOM-practice/output dom practice website.PNG
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,36 @@
-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)
+
+
+}
+
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/1-alarmclock/output alarmclock webpage.PNG b/mandatory/1-alarmclock/output alarmclock webpage.PNG
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -2,7 +2,7 @@
 <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 +13,12 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="container"> 
+      <h1>Inspirational quotes by famous people</h1>
+      <div class ="quoteGenerator" id="quote"></div>
+      <div class ="quoteGenerator" id="author"></div>
+      <button id="button"> Get quote</button>
+    </div>
+    <script src="quotes.js"></script>
   </body>
-</html>
+  </html>
diff --git a/mandatory/2-quotegenerator/output quote generator.PNG b/mandatory/2-quotegenerator/output quote generator.PNG
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -20,7 +20,6 @@
 function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
 }
-
 // A list of quotes you can use in your app.
 // Feel free to edit them, and to add your own favourites.
 const quotes = [
@@ -490,3 +489,25 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+function quoteGenerator() {
+    let chosenQuote = quotes[Math.floor(Math.random() * quotes.length)];
+    document.getElementById("quote").innerHTML = chosenQuote.quote;
+    document.getElementById("author").innerHTML = chosenQuote.author;
+}
+
+function createRandomQuote() {
+
+  let body = document.getElementsByTagName("body");
+
+  document.body.append(button);
+
+  let btn = document.getElementById("button")
+  btn.addEventListener("click", quoteGenerator)
+  btn.innerHTML = "Start";
+   button.style.backgroundColor = "#D0FBF7";
+}
+
+window.onload = () => {
+  createRandomQuote(quotes);
+};
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"
@@ -12,6 +11,22 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+      <!-- WritIne your HTML in here -->
+      <h1>Jazz photos</h1>
+      <div id="photos">
+        <img id="photo0" src="" alt="">
+        <img id="photo1" src="" alt="">
+        <img id="photo2" src="" alt="">
+        <img id="photo3" src="" alt="">
+        <img id="photo4" src="" alt="">
+      </div>  
+      <div id="controls" >
+        <button class="buttons" id="auto-backward"></button>
+        <button class="buttons" id="backward"></button>
+        <button class="buttons" id="stop"></button>
+        <button class="buttons" id="forward"></button>
+        <button class="buttons" id="auto-forward"></button>    
+      </div> 
+        <script src="slideshow.js"></script> 
   </body>
 </html>
diff --git a/mandatory/3-slideshow/output slideshow.PNG b/mandatory/3-slideshow/output slideshow.PNG