NW1-Erin Dyson-JS2-W3

InClass/Callbacks/exercise-1/exercise.js

@@ -11,3 +11,21 @@ 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
 ================
 */
+
+var temp = document.getElementById("main");
+//temp.style.backgroundColor = "blue";
+
+
+// window.body.setTimeout(() => {
+//     temp.style.backgroundColor = "brown";
+// }, 1000);
+
+const colorArray = ["blue","black","brown","orange","red","white","grey","pink","green"];
+
+setInterval(function(){
+    // for (let index = 0; index < colorArray.length; index++) {
+    //     //const element = array[index];
+    //      temp.style.backgroundColor = colorArray[index];
+    // }
+    temp.style.backgroundColor = colorArray[Math.floor(Math.random() * 10)];
+}, 5000); 

InClass/Callbacks/exercise-2/exercise.js

@@ -19,7 +19,7 @@ Call addMovies to add the new movie to the list and then showMovies to see the m
 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 t he screen? 
 TIP: use callbacks
 
 Task 4 - **Extra**
@@ -63,6 +63,53 @@ const movies = [
 
 // create showMovies function
 
+const cl = console.log;
+var allMovies = document.getElementById("all-movies");
+var numberMovies = document.getElementById("movies-number");
+
+function showMovies() {
+  setTimeout(function(){
+    numberMovies.innerText = `${movies.length + favoriteMovie.length}`
+
+    for (let index = 0; index < movies.length; index++) {
+    const currentMovie = movies[index];
+      cl(currentMovie);
+      //cl(flexOuterContainer.innerHTML)
+      allMovies.innerHTML += `
+      <p class="episodeTitle">${currentMovie.title} by ${currentMovie.director}</p>
+      `;
+  }
+  }, 1000);
+};  
+
+const favoriteMovie = [
+    {
+      title: "A Place Beyond the Pines",
+      director: "Someone",
+      type: "Amazing",
+      haveWatched: true,
+    }
+  ];
+
+function addMovie(movie) {
+  showMovies();
+  setTimeout(function(){
+
+    for (let index = 0; index < movie.length; index++) {
+      const currentMovie = movie[index];
+        //cl(flexOuterContainer.innerHTML)
+        allMovies.innerHTML += `
+        <p class="episodeTitle">${currentMovie.title} by ${currentMovie.director}</p>
+        `;
+      }
+
+  }, 2000); 
+}
+
+addMovie(favoriteMovie);
+
+
+
 // create a new movie object for your favorite movie
 
 // create addMovies function

InClass/DOM-practice/main.js

@@ -4,8 +4,38 @@ console.log("Testing JS file loaded!")
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
-
-
+const dates = [
+    {
+        name : "Grace Hopper",
+        birthDate : "9 December 1906",
+        deathDate : "1 January 1992",
+    },
+    {
+        name : "Katherine Johnson",
+        birthDate : "26 August 1918",
+        deathDate : "24 February 2020",
+    },    
+    {
+        name : "Ada Lovelace",
+        birthDate : "10 December 1815",
+        deathDate : "27 November 1852",
+    }
+];
+
+
+var section = document.getElementsByTagName("section");
+console.log(section);
+
+for (let index = 0; index < section.length; index++) {
+    const element = section[index];
+    element.style.backgroundColor = "white";
+
+   let newElement = document.createElement("p");
+   newElement.innerText = `Date of Birth : ${dates[index].birthDate} 
+   Date of Death : ${dates[index].deathDate}`;
+   element.appendChild(newElement);
+
+}
 
 
 
@@ -15,6 +45,14 @@ console.log("Testing JS file loaded!")
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
+var img = document.getElementsByTagName("img");
+console.log(img);
+
+for (let index = 0; index < img.length; index++) {
+    const element = img[index];
+    element.classList.add("content-title")
+
+}
 
 
 
@@ -23,3 +61,13 @@ console.log("Testing JS file loaded!")
 // 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>.
+
+
+for (let index = 0; index < img.length; index++) {
+    const element = img[index];
+    element.classList.add("content-title")
+
+}
+
+
+

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,110 @@
-function setAlarm() {}
+const cl = console.log
+
+const setAlarmButton = document.getElementById("set");
+const stopAlarmButton = document.getElementById("stop");
+const userTimeInput = document.getElementById("alarmSet");
+const h1ClockElement = document.getElementById("spanTimeRemaining");
+const buttonDiv = document.getElementById("buttonDiv");
+
+
+let pushTimeLeft = 0;
+let numberOfResumesAdded = 0;
+
+
+//This eventListener will trigger when the set alarm button is clicked
+// It will run the setAlarm function and reset the backgroundColor
+setAlarmButton.addEventListener("click", function(){
+  setAlarm();
+  document.body.style.backgroundColor = "white";
+})
+
+
+// This is the main function of the script. It takes in an optional 
+//paramater (resumeTime) which will start the clock from the paused 
+// time assuming the clock was paused whilst running. If not it starts
+// clock from the user input. 
+function setAlarm(resumeTime) {
+  if(resumeTime === undefined){
+    var timeValue = userTimeInput.value;
+  } else {
+    var timeValue = resumeTime;
+  }
+
+  var timer = setInterval(updateH1Element, 1000);
+  timer; //cl("Outer time : " + timeValue);
+
+  function updateH1Element() {
+    cl("inner time : " + timeValue);
+
+     if (timeValue>0){
+      timeValue -= 1;
+      var minutes = Math.floor(timeValue / 60);
+      var seconds = timeValue - minutes * 60;
+      let twentyFourHourFormat = `${minutes}:${seconds}`
+      let lessThanTen = `${minutes}:0${seconds}`
+
+      // These first two if statements make sure the clock still displays
+      // properly when 9 seconds left -> 00.09
+      if (seconds < 10){
+        h1ClockElement.innerText = `${lessThanTen}`;
+      } else {
+        h1ClockElement.innerText = `${twentyFourHourFormat}`;
+      }
+
+     // This last else statement will run when there are 0 seconds left
+     // after the current countdown. It will stop the timer from 
+     // running in the background and change backgroundColor  
+     } else {
+      window.clearInterval(timer);
+      playAlarm()
+      document.body.style.backgroundColor = "#dc3545";
+     } 
+
+   // This variable will allow me to use the timeValue globally  
+   pushTimeLeft = timeValue;  
+
+  }
+
+// When the stopButton is pushed, if there are 0 seconds left on the 
+// counter then the stopButton will pause the audio. If the stopButton
+// is pressed whilst there is time left on the countdown then it will 
+// create a new button to allow the user to resume their original 
+// timer. The button uses a counter (numberOfResumesAdded) to make 
+// sure that only one "resume" button is added to the DOM. When 
+// resume is clicked, it will pass the current countdown time back 
+// to the 'setAlarm' function so it doesn't restart from userInput value
+stopAlarmButton.addEventListener("click", function(){
+    cl("stop clicked");
+    cl(pushTimeLeft);
+
+    if(pushTimeLeft === 0){
+      pauseAlarm();
+    } else if (pushTimeLeft > 0) {
+      //cl(timeValue)
+      window.clearInterval(timer);
+      cl("else run")
+      cl("Stop - clear interval : " + pushTimeLeft)
+      var resumeButton = document.createElement("button");
+      resumeButton.id = "resume";
+      resumeButton.type = "button";
+      resumeButton.textContent = "Resume Timer";
+
+      if (numberOfResumesAdded < 1){
+        numberOfResumesAdded += 1 ;
+        buttonDiv.appendChild(resumeButton);
+      }
+
+      let resumeButtonID = document.getElementById("resume");
+      //cl(resumeButtonID);
+      resumeButtonID.addEventListener("click",function(){
+        setAlarm(pushTimeLeft);
+      })
+    }
+  });
+
+}
+
+
 
 // DO NOT EDIT BELOW HERE
 

mandatory/1-alarmclock/index.html

@@ -1,29 +1,27 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Alarm Clock</title>
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="style.css" />
-  </head>
 
-  <body>
-    <div class="centre">
-      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
-      <div>
-        Set Time to:
-        <input id="alarmSet" type="number" />
-      </div>
-      <div>
-        <button id="set" type="button">Set Alarm</button>
-        <button id="stop" type="button">Stop Alarm</button>
-      </div>
+<head>
+  <meta charset="utf-8" />
+  <title>Alarm Clock</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div class="centre">
+    <h1 id="h1TimeRemaining">Time Remaining: <span id="spanTimeRemaining">00:00</span></h1>
+    <div>
+      Set Time to:
+      <input id="alarmSet" type="number" />
+    </div>
+    <div id="buttonDiv">
+      <button id="set" type="button">Set Alarm</button>
+      <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
-  </body>
-</html>
+  </div>
+  <script src="alarmclock.js"></script>
+</body>
+
+</html>

mandatory/2-quotegenerator/index.html

@@ -1,17 +1,35 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Quote Generator</title>
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <!-- Write your HTML in here -->
-    <script src="quotes.js"></script>
-  </body>
-</html>
+
+<head>
+  <title>Quote Generator</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
+  </style>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <!-- Write your HTML in here -->
+  <div id="innerBox">
+
+    <div class="innerQuoteContainer">
+      <h1 id="innerQuote">Placeholder Quote</h1>
+    </div>
+
+    <div id="innerBoxLowerHalf">
+      <h2 id="innerAuthor">By Placeholder</h2>
+      <button id="innerButton" class="buttons">New Quote</button>
+      <button id="autoButton" class="buttons">Autoplay Quotes</button>
+      <button id="stopButton" class="buttons">Stop Autoplay</button>
+    </div>
+
+  </div>
+
+
+  <script src="quotes.js"></script>
+</body>
+
+</html>