CodeYourFuture · nirmeet-baweja · Jan 27, 2021 · Jan 29, 2021 · Jan 29, 2021 · Jan 29, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -10,4 +10,34 @@ 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
+ */
+let mainDiv = document.getElementById("main");
+let task1Complete = false;
+setTimeout(() => {
+    mainDiv.style.backgroundColor = "red";
+    task1Complete = true;
+    console.log("in timeout");
+    console.log("task 1 status" + task1Complete);
+  }, 5000);
+
+
+/*
+ * Task 2
+ */
+function task2() {
+  let colorList = [ "yellow", "blue", "green", "#efefef", "#0ae071"];
+  let count = 0;
+
+  if(task1Complete) {
+    setInterval(() => {
+      mainDiv.style.backgroundColor = colorList[count];
+      count = (count + 1) % colorList.length;
+    }, 1000)
+  }
+}
+
+setTimeout(task2, 7000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -13,13 +13,13 @@ Create a function called "showMovies" that
 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 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? 
+Can you make sure the new movie you just added is showing on the screen?
 TIP: use callbacks
 
 Task 4 - **Extra**
@@ -61,10 +61,71 @@ const movies = [
   },
 ];
 
+let moviesDisplayed = 0;
+
 // create showMovies function
+function showMovies() {
+  let allMovies = document.getElementById("all-movies");
+  let moviesNumber = document.getElementById("movies-number");
 
+  // show movies after 1s
+  setTimeout(() => {
+    // add the number of movies to the moviesNumber
+      moviesNumber.innerText = movies.length;
 
-// create a new movie object for your favorite movie
+    // display movies on the page
+    for(let i = moviesDisplayed; i < movies.length; i++) {
+      let para = document.createElement("p");
+      para.innerText = movies[i].title + " - " + movies[i].director;
+      allMovies.appendChild(para);
+      moviesDisplayed++;
+    }
+  }, 1000);
+}
+
+showMovies();
 
+// create a new movie object for your favorite movie
+const myFavMovie = {
+  title: "Inception",
+  director: "Christopher Nolan",
+  type: "sci-fi",
+  haveWatched: true,
+}
 
 // create addMovies function
+function addMovie(movie) {
+  // add this new movie to the movies array
+  setTimeout(() => {
+    movies.push(movie);
+  }, 1000);
+}
+
+addMovie(myFavMovie);
+setTimeout(showMovies, 2100);
+
+// task 4
+function task4() {
+
+  let submitbtn = document.getElementById("submitBtn");
+
+  submitbtn.addEventListener("click", event => {
+
+    event.preventDefault();
+
+    let moveTitle = document.getElementById("movieTitle");
+    let movieDirector = document.getElementById("movieDirector");
+    let movieGenre = document.getElementById("movieGenre");
+    let movieWatched = document.getElementById("movieWatched");
+    let newMovie = {
+      title: moveTitle.value,
+      director: movieDirector.value,
+      type: movieGenre.value,
+      haveWatched: movieWatched.value,
+    };
+    addMovie(newMovie);
+    setTimeout(showMovies, 2100);
+  });
+}
+
+task4();
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -16,14 +16,52 @@
 </head>
 
 <body>
+
   <div id="main">
     <div class="jumbotron">
       <h1>My movies</h1>
       <div id="all-movies">
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
     </div>
-    <script src="exercise.js"></script>
-</body>
 
+    <div id="form">
+      <h2>Tell us your favourite movie!</h2>
+      <form action="submit">
+        <div class="form-field">
+          <label for="movieTitle">Title of the movie</label>
+          <input type="text" id="movieTitle" required>
+        </div>
+
+        <div class="form-field">
+          <label for="movieDirector">Director of the movie</label>
+          <input type="text" id="movieDirector" required>
+        </div>
+
+        <div class="form-field">
+          <label for="movieGenre">Genre of the movie</label>
+          <select id="movieGenre" name="movieGenre">
+            <option value="comedy">Comedy</option>
+            <option value="horror">Horror</option>
+            <option value="sci-fi">Sci-fi</option>
+            <option value="thriller">Thriller</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label for="movieWatched">Have you watched the movie</label>
+          <select id="movieWatched" name="movieWatched">
+            <option value=true>Yes</option>
+            <option value=false>No</option>
+          </select>
+        </div>
+
+        <button id="submitBtn" type="submit">Submit</button>
+      </form>
+    </div>
+  </div>
+
+  <script src="exercise.js"></script>
+
+</body>
 </html>
diff --git a/InClass/DOM-practice/index.html b/InClass/DOM-practice/index.html
@@ -27,10 +27,10 @@ <h1>The Mothers of Computing</h1>
     </nav>
   </header>
 
-  <section>
+  <section id="grace-hopper">
     <img src="https://www.biography.com/.image/t_share/MTE5NTU2MzE2NjYxNTE1Nzg3/grace-hopper-21406809-1-402.jpg"
       alt="Grace Hopper" />
-    <h1 id="grace-hopper">Grace Hopper</h1>
+    <h1>Grace Hopper</h1>
 
     <p>
       Called the Queen of Software by some and Grandma COBOL by others, Navy
@@ -59,12 +59,12 @@ <h1 id="grace-hopper">Grace Hopper</h1>
 
   <hr />
 
-  <section>
+  <section id="katherine-johnson">
     <img
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Katherine_Johnson_1983.jpg/220px-Katherine_Johnson_1983.jpg"
       alt="Katherine Johnson" />
 
-    <h1 id="katherine-johnson">Katherine Johnson</h1>
+    <h1>Katherine Johnson</h1>
 
     <p>
       Being handpicked to be one of three black students to integrate West
@@ -110,12 +110,12 @@ <h1 id="katherine-johnson">Katherine Johnson</h1>
 
   <hr />
 
-  <section>
+  <section id="ada-lovelace">
     <img
       src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png"
       alt="Ada Lovelace" />
 
-    <h1 id="ada-lovelace">Ada Lovelace</h1>
+    <h1>Ada Lovelace</h1>
 
     <p>
       Ada Lovelace was unique in that she developed an algorithm for a

diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -4,9 +4,14 @@ console.log("Testing JS file loaded!")
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
+function task1() {
+  let sections = document.getElementsByTagName("section");
+  for(let i = 0; i < sections.length; i++) {
+    sections[i].style.backgroundColor = "#ffffff";
+  }
+}
 
-
-
+task1();
 
 
 // Task 2
@@ -15,11 +20,53 @@ console.log("Testing JS file loaded!")
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
+function task2() {
+  let imgs = document.getElementsByTagName("img");
+  for(let i = 0; i < imgs.length; i++) {
+    imgs[i].className += " content-title";
+  }
+}
 
-
-
+task2();
 
 
 // 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 = [
+  {
+    person: "grace-hopper",
+    birth: "9 December 1906",
+    death: "1 January 1992"
+  },
+  {
+    person: "katherine-johnson",
+    birth: "26 August 1918",
+    death: "24 February 2020"
+  },
+  {
+    person: "ada-lovelace",
+    birth: "10 December 1815",
+    death: "27 November 1852"
+  }
+];
+
+function task3() {
+  let sections = document.getElementsByTagName("section");
+
+  for(let i = 0; i < sections.length; i++) {
+    let newPara = document.createElement("p");
+
+    birth = dates.filter( value =>
+      value.person === sections[i].id).map(value => value.birth);
+
+    death = dates.filter( value =>
+      value.person === sections[i].id).map(value => value.death);
+
+    newPara.innerText = `Born: ${birth}. Died: ${death}`;
+    sections[i].appendChild(newPara);
+  }
+}
+
+task3();
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,35 @@
-function setAlarm() {}
+let isAlarmSet = false;
+
+function setBtnEventListener() {
+  let heading = document.getElementById("timeRemaining");
+  let timer;
+  let input = document.getElementById("alarmSet");
+  if(input.value !== "" && !isAlarmSet) {
+    console.log("Alarm has been set!");
+    isAlarmSet = true;
+    timer = input.value;
+    input.value = "";
+  }
+  let intervalId = setInterval(function() {
+    if(timer >= 0) {
+      let minutes = Math.floor(timer / 60);
+      let seconds = timer % 60;
+      timer--;
+      console.log("Timer decremented!");
+      heading.innerHTML = `Time Remaining: ${minutes.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}:${seconds.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}`;
+    }
+    if(timer === -1) {
+      playAlarm();
+      clearInterval(intervalId);
+      isAlarmSet = false;
+    }
+  }, 1000);
+}
+
+function setAlarm() {
+  let setBtn = document.getElementById("set");
+  setBtn.addEventListener("click", setBtnEventListener);
+}
 
 // DO NOT EDIT BELOW HERE
 

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"
@@ -12,6 +11,11 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div class="quoteContainer">
+      <h1 class="quoteHeading" id="quote"></h1>
+      <h2 id="author" class="authorHeading"></h2>
+      <button id="newQuoteBtn" class="btn">Get Inspired</button>
+    </div>
+    <script src="quotes.js"></script>
   </body>
 </html>