CodeYourFuture · Sinead-CYF · Oct 11, 2021 · Oct 13, 2021 · Oct 13, 2021 · Oct 14, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -6,8 +6,23 @@ 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
+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 colours = ["blue", "green", "pink"];
+let index = 0;
+
+function colourChange (){
+    document.body.style.backgroundColor = colours[index];
+    index = (index + 1) % colours.length;
+    setInterval(colourChange, 5000);
+}
+
+colourChange();
+
+
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -1,39 +1,3 @@
-/*
-================
-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
-================
-*/
 const movies = [
   {
     title: "Color Out of Space",
@@ -61,8 +25,155 @@ const movies = [
   },
 ];
 
-// create showMovies function
+/***************************************************************************************
+
+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 DONE 
+
+****************************************************************************************/
+
+//GLOBAL ELEMENTS 
+const movieArea = document.querySelector("#all-movies"); //div
+const moviesNum = document.querySelector("#movies-number"); //div
+
+//CREATE HTML ELEMENTS & CONTENT 
+function displayMov (movie) {
+  let paraEls = document.createElement("p");
+  movieArea.appendChild(paraEls);
+  paraEls.innerText = `${movie.title} - ${movie.director}.`;
+}
+
+//DISPLAY EACH MOVIE WITH TIME DELAY & UPDATE MOVIE COUNTER  
+function displayMovies() {
+  moviesNum.textContent = movies.length; //update movie count
+  movieArea.innerText = ""; //clear any previous values;
+  movies.forEach((movie, index) => { //display each movie after 1 second delay 
+    setTimeout(() => {
+      displayMov(movie);
+    }, index * 1000); 
+  });
+}
+
+
+//CALL MOVIE DISPLAY FUNCTION
+displayMovies();
+
+/******************************************************************************************
+
+Task 3
+
+- create a new movie object for your favorite movie 
+- 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?
+
+- Can you make sure the new movie you just added is showing on the screen? 
+TIP: use callbacks  
+
+*****************************************************************************************/
+
+//REQUIRED TO PUSH NEW MOVIE OBJECTS INTO CURRENT ARRAY & UPDATE MOVIE COUNTER 
+function addMovie(movie) {
+  movies.push(movie); //push new mov into array
+  setTimeout(() => { //add timer 
+    displayMov(movie); //call displayMov function 
+  }, 2000); //2sec delay to stop the original function and new function over lapping 
+  moviesNum.innerText = movies.length;//update movie count 
+}
+
+//THESE CAN BE REMOVED IF I DONT WANT TO ADD myFavMovie OBJECT BEFORE INPUTTED OBJECTS BELOW
+
+//CREAT NEW MOVIE OBJECT 
+const myFavMovie = {
+  title: "The Lord of the Rings",
+  director: "Peter Jackson",
+  type: "Fantasy",
+  haveWatched: true,
+};
+
+//ADD myFavMovie WITH A TIME DELAY WITH addMovie CALLBACK  
+setTimeout(() => {
+  addMovie(myFavMovie);
+}, 2000); // adds new submitted movies after 1 sec
+
+
+/***************************************************************************************
+
+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 
+
+****************************************************************************************/
+
+//FORM TITLE INPUT 
+const form = document.getElementsByTagName("form")[0]; //grabbing form element (hard coded)
+const inputTitle = document.createElement("input"); //creating movie title input element 
+inputTitle.type = "text"; //input type text 
+inputTitle.setAttribute("placeholder", "Title"); //set attribute for placeholder
+form.appendChild(inputTitle); //append title input to form 
+
+//FORM DIRECTOR INPUT 
+const inputDirector = document.createElement("input"); //creating movie director input 
+inputDirector.type = "text"; //setting text as input type 
+inputDirector.setAttribute("placeholder", "Director");// creating attribute placeholder
+form.appendChild(inputDirector); //append director input to form
+
+//FORM TYPE (OF MOVIE) INPUT 
+const inputType = document.createElement("input"); //create typeOfMovie input 
+inputType.type = "text"; //input type text 
+inputType.setAttribute("placeholder", "Type"); //attribute for placeholder 
+form.appendChild(inputType); //append to form 
+
+//FORM haveWatched INPUT  
+const inputWatched = document.createElement("input"); //create haveWatched input area
+inputWatched.type = "checkbox"; //input type checkbox 
+const boxLabel = document.createElement("label"); //create label for checkbox
+boxLabel.innerText = "Watched?"; //create label text 
+form.appendChild(boxLabel); // append label to form 
+form.appendChild(inputWatched); //append checkbox to form 
+
+//FORM SUBMIT BUTTON
+const btn = document.createElement("button"); //create button
+btn.innerText = "submit"; //button text 
+form.appendChild(btn); //append 
+
+//BUTTON EVENT LISTENER 
+btn.addEventListener("click", (event) => { //add event listener
+  event.preventDefault(); //prevent page from reloading 
+  console.log(event); //debugging check console 
+  const movie = { //creating new object to be pushed 
+    title:inputTitle.value, //grabbing values from input fields
+    director: inputDirector.value,
+    type: inputType.value,
+    haveWatched: inputWatched.checked
+  }
+  addMovie(movie); //calling addMovie function to push new object to array on click 
+})
 
-// create a new movie object for your favorite movie
 
-// create addMovies function
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -19,9 +19,13 @@
   <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>
+      <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
+
+      <form>
+
+      </form>
+      <div id="all-movies"></div>
+
     </div>
     <script src="exercise.js"></script>
 </body>

diff --git a/InClass/DOM-practice/main.js b/InClass/DOM-practice/main.js
@@ -1,25 +1,46 @@
-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.
-
-
-
+// Without changing any of the HTML or CSS, update
+// the <section> tags so that they have white backgrounds.
 
+let sectionEls = document.querySelectorAll("section");
 
+sectionEls.forEach((element) => {
+  element.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.
-
-
+// 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");
 
+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>.
+// 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>.
+
+sectionEls.forEach((section, index) => {
+    let paras = document.createElement("p");
+    if (index === 0) {
+      section.appendChild(paras).textContent =
+        "Born: December 9, 1906, Died: January 1, 1992.";
+    } else if (index === 1) {
+      section.appendChild(paras).textContent =
+        "Born: August 26, 1918, Died: February 24, 2020.";
+    } else {
+      section.appendChild(paras).textContent =
+        "Born: December 10, 1815, Died: November 27, 1852.";
+    }
+  });
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,43 @@
-function setAlarm() {}
+function setAlarm() {
+  let startAlarm = document.getElementById("alarmSet"); //get value input field
+  const timeRemaining = document.getElementById("timeRemaining"); //time remaining field
+  let startTime = startAlarm.value; //start time = input value
+
+  let time = Math.floor(startTime * 60); //converts given input number into seconds.
+
+  // var for storage.
+  let intervalId;
+
+  //grab event ID
+  intervalId = setInterval(countdown, 1000); //call the countdown function every one second.
+
+  function countdown() {
+    const minutes = Math.floor(time / 60); //minutes calc, rounded down to whole number
+    let seconds = time % 60; //how does this work?? "modulo" time/60 > remainder
+    seconds = seconds < 10 ? `0` + seconds : seconds; //if seconds less than ten add a "0" (formatting)
+    timeRemaining.innerHTML = `Time Remaining: ${minutes}:${seconds}`; //display time in time remaining field
+
+    if (time === 0) {
+      //if time is 0
+      timeRemaining.innerHTML = `Time Remaining: 00:00`; //display TIME REMAINING
+      playAlarm(); //play alarm
+      clearInterval(intervalId); //ensures alarm runs once not every second.
+      let colours = ["blue", "lilac", "pink", "purple", "orange"]; //colours array
+      let index = 0; //starting index
+      function changeColour() {
+        //change colours function
+        document.querySelector(".centre").style.backgroundColor = //grab element
+          colours[index]; //array value
+        index = (index + 1) % colours.length; //iterate remainder??
+        setTimeout(changeColour, 1000); //set timeout callback //clear interval only clears interval functions
+      }
+
+      changeColour(); //call change colour
+    } else if (time > 0) {
+      time--; //decrease time.
+    }
+  }
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/1-alarmclock/task.md b/mandatory/1-alarmclock/task.md
@@ -25,8 +25,12 @@ Only read this section if you really need to! It's good to work this out for you
 ### Steps to complete
 
 1. When the `Set Alarm` button is clicked, get the value of the input field
+
+
 2. When you have the input field value, set the title to the correct value
+
 3. Work out how to update the `Time Remaining` title every second
+
 4. When the remaining time left is 0, play the alarm sound
 
 ## Extra Tasks