CodeYourFuture · dharmaguadeloupe · Aug 4, 2021 · Aug 4, 2021 · Aug 12, 2021 · Aug 30, 2021
diff --git a/InClass/Callbacks/exercise-0/exericise.js b/InClass/Callbacks/exercise-0/exericise.js
@@ -0,0 +1,34 @@
+/* Exercise (1)
+Before running the code in your browser, discuss the expected order of each loop
+
+1. Synchronous - Write code that loops through the array of greek gods and print the index numbers and values to the console, e.g. '1. Ares'
+
+2. Asynchronous - Same as before but the index and the value of the god at position 2 in array should be printed after 2 seconds. Use: setTimeout() */
+
+const greekGods = [
+  "Aphrodite",
+  "Ares",
+  "Artemis",
+  "Athena",
+  "Poseidon",
+  "Zeus",
+];
+
+// Synchronous
+for(let i = 0; i < greekGods.length; i++) {
+  console.log(`${i}. ${greekGods[i]}`);
+};
+
+// Asynchronous
+for(let i = 0; i < greekGods.length; i++) {
+  // if god is at 2nd position, wait 2 seconds before printing their name
+  if (i === 2) {
+    // 2000 milliseconds = 2 seconds
+    setTimeout(function () {
+      console.log(`${i}. ${greekGods[i]}`);
+    }, 2000);
+  } else {
+    // otherwise print them in order
+    console.log(`${i}. ${greekGods[i]}`);
+  }
+};
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,12 @@ 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
 ================
 */
+
+const content = document.body;
+let randomColor = Math.floor(Math.random()*16777215).toString(16);
+
+function changeColor(){
+ content.style.backgroundColor = `#${randomColor}`
+}
+
+setInterval (changeColor, 5000)
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -4,33 +4,6 @@ Exercise 2
 ----------
 You are given the following list of movies
 
-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"
-
-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?
-
-Task 3
-Can you make sure the new movie you just added is showing on the screen? 
-TIP: use callbacks
-
-Task 4 - **Extra**
-Create a form anywhere on your page. The form should have
-- 4 input text fields, one for each property of your movie object
-- a "save" button.
-When the button is clicked
-- The field values should be used to create a new movie object literal
-- The new movie is then added to the list of movies and gets displayed on your page
-TIP: Use the functions you created on tasks 1-3
-
 Prefer to work on a codepen? https://codepen.io/makanti/pen/MWwMgmW?editors
 ================
 */
@@ -60,9 +33,83 @@ const movies = [
     haveWatched: false,
   },
 ];
+/* 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" 
+
+Task 2
+Amend your function above to only show movies after 1 second. Remember to use setTimeout to achieve that*/
 
 // create showMovies function
+function showMovies() {
+  const allMovies = document.getElementById("all-movies");
+  const numMovies = document.getElementById("movies-number");
+  numMovies.innerText = `${movies.length}`;
+  //movies added after 1 sec
+  setTimeout(() => {
+
+  movies.forEach((movie) => {
+    const movieInfo = allMovies.appendChild(document.createElement("p"));
+    movieInfo.className = "alert alert-info";
+    movieInfo.innerText = `${movie.title} directed by ${movie.director}`;
+    });
+  }, 1000);
+};
+
+//showMovies();
 
 // create a new movie object for your favorite movie
+const myMovie = {
+  title: "2001: A Space Odyssey",
+  director: "Stanley Kubrick",
+  type: "Adventure, Sci-Fi",
+  haveWatched: true
+}
+/* Create a new function called "addMovie"
+- it receives a movie object as an argument - you 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? */
 
 // create addMovies function
+function addMovie(movie, callback) {
+  setTimeout(function() {
+    movies.push(movie);
+    callback();
+  }, 2000);
+}
+/* Task 3
+Can you make sure the new movie you just added is showing on the screen? 
+TIP: use callbacks */
+
+addMovie(myMovie, showMovies);
+
+/* Task 4 - **Extra**
+Create a form anywhere on your page. The form should have
+- 4 input text fields, one for each property of your movie object
+- a "save" button.
+When the button is clicked
+- The field values should be used to create a new movie object literal
+- The new movie is then added to the list of movies and gets displayed on your page
+TIP: Use the functions you created on tasks 1-3 */
+
+const submit = document.getElementById("submit");
+const titleField = document.getElementById("title");
+const directorField = document.getElementById("director");
+const genreField = document.getElementById("type");
+const seenField = document.getElementById("seen");
+
+submit.addEventListener("click", (event) => {
+  event.preventDefault();
+
+  const addNewMovie = {
+    title: titleField.value,
+    director: directorField.value,
+    type: genreField.value,
+    haveWatched: seenField.checked
+  };
+
+  addMovie(addNewMovie, showMovies);
+});
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -7,12 +7,9 @@
   <title>CodeYourFuture - Callbacks</title>
   <meta name="description" content="Callbacks">
   <meta name="author" content="CodeYourFuture">
+  <link href="style.css" rel="stylesheet" type="text/css">
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
-  <style>
-    body {
-      padding: 30px;
-    }
-  </style>
+
 </head>
 
 <body>
@@ -22,6 +19,59 @@ <h1>My movies</h1>
       <div id="all-movies">
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
+      <form id="add-movies">
+        <fieldset>
+          <legend>Add New Movie:</legend>
+
+          <label class="form" for="title">
+            Title
+            <br/>
+            <input
+            placeholder="Movie Title"
+            class="form-field"
+            id="title"
+            name="title"
+            required
+            />
+          </label>
+
+          <label class="form" for="director">
+            Director
+            <br/>
+            <input
+            placeholder="Directed By"
+            class="form-field"
+            id="director"
+            name="director"
+            required
+            />
+          </label>
+
+          <label class="form" for="type">
+            Genre
+            <br/>
+            <input
+            placeholder="Genre"
+            class="form-field"
+            id="type"
+            name="type"
+            required
+            />
+          </label>
+
+          <label class="form" for="seen">
+            Watched
+            <br/>
+            <input
+            class="form-field"
+            id="seen"
+            name="seen"
+            type="checkbox"
+            />
+          </label>
+        </fieldset>
+        <button type="submit" id="submit" class="btn">Save</button>
+      </form>
     </div>
     <script src="exercise.js"></script>
 </body>

diff --git a/InClass/Callbacks/exercise-2/style.css b/InClass/Callbacks/exercise-2/style.css
@@ -0,0 +1,14 @@
+body {
+  padding: 30px;
+}
+
+#add-movies {
+  padding-top: 30px;
+}
+
+form {
+  padding: 20px;
+}
+.form-field {
+  margin-right: 20px;
+}
diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -3,23 +3,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.
-
-
-
-
-
+const sections = Array.from(document.getElementsByTagName("section"));
+sections.forEach(section => {
+  section.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 = Array.from(document.querySelectorAll("img"));
+images.forEach((image) => image.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 array = [
+  "Born: December 9, 1906, New York City, United States Died: January 1, 1992 (aged 85) Arlington, Virginia , United States",
 
+  "Born: August 26, 1918, White Sulphur Springs, West Virginia, United States Died: February 24, 2020 (aged 101), Newport News, United States",
 
+  "Born: December 10, 1815, London, England Died: November 27, 1852 (aged 36), Marylebone, London, England"
+]
 
-
-// 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>.
+ sections.forEach((section, index) => {
+  const newPara = section.appendChild(document.createElement("p"));
+  newPara.innerText = array[index];
+})
+
diff --git a/extra/1-quote-generator-revisited/task.md b/extra/1-quote-generator-revisited/task.md
@@ -14,3 +14,4 @@ For this task you will return to your quote generator and improve it with "auto-
 Use https://rot13.com/ to decipher this hint:
 
 `Pubbfr bar bs frgGvzrbhg be frgVagreiny.`
+Choose one of seTimeout or setInterval
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,19 @@
-function setAlarm() {}
+function setAlarm() {
+  const timer = document.getElementById("timeRemaining");
+  let alarmInput = document.getElementById("alarmSet").value;
+
+  let counter = setInterval(() => {
+    const minutes = Math.floor(alarmInput / 60).toString().padStart(2, "0");
+    const seconds = (alarmInput % 60).toString().padStart(2, "0");
+    timer.innerText = `Time Remaining: ${minutes}:${seconds}`;
+    if(alarmInput === 0) {
+      clearInterval(counter)
+      playAlarm();
+    } else {
+      alarmInput--;
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/Images/orange-quotation-marks-png-7-1030x773 (1).png b/mandatory/2-quotegenerator/Images/orange-quotation-marks-png-7-1030x773 (1).png
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -9,9 +9,24 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
+    <script src="https://kit.fontawesome.com/dacd99bd9d.js" crossorigin="anonymous"></script>
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <h1 id="heading">Quote Generator</h1>
+    <section id=jumbotron>
+      <div id="quote-container">
+        <blockquote>
+          <i class="fas fa-quote-left"></i>
+          <p id="quotes"></p>
+        </blockquote>
+          <p id="authors"></p>
+          <button id="newQuote">Generate New Quote</button>
+          <label class="switch">
+            <input id= "checkbox" type="checkbox">
+            <span class="slider round"></span>
+          </label>
+      </div>
+    </section>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,30 @@
+const quoteContainer = document.getElementById("quotes");
+const authorContainer = document.getElementById("authors");
+const newQuote = document.getElementById("newQuote");
+const checkBox = document.getElementById("checkbox");
+let intervalInput;
+
+const generateQuote = () => {
+  const randomQuote = pickFromArray(quotes);
+  quoteContainer.innerText = randomQuote.quote;
+  authorContainer.innerText = randomQuote.author;
+}
+
+newQuote.addEventListener("click", generateQuote);
+
+/*Extra*/
+checkBox.addEventListener("click", () => {
+  clearInterval(intervalInput);
+  if(checkBox.checked) {
+    intervalInput = setInterval(generateQuote, 60000);
+  } else {
+    clearInterval(intervalInput);
+  }
+})
+
+
+
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@ For this task you will return to your quote generator and improve it with "auto-
		Use https://rot13.com/ to decipher this hint:

		`Pubbfr bar bs frgGvzrbhg be frgVagreiny.`
		Choose one of seTimeout or setInterval