North_West_Class4-Amanda_Nwadukwe-JS_Core2_Week3

InClass/Callbacks/exercise-1/exercise.js

@@ -11,3 +11,20 @@ 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
 ================
 */
+
+//Answer to task 1
+// setTimeout(function(){
+//     let colorBase = "#a2";
+//     let randomIndex = Math.floor(Math.random() * 10);
+//     document.body.style.backgroundColor = colorBase + randomIndex;
+//     console.log(randomIndex);
+// }, 5000);
+
+//Answer to task 2
+function changeColor(){
+    let colorBase = "#a2";
+    let randomIndex = Math.floor(Math.random() * 10);
+    document.body.style.backgroundColor = colorBase + randomIndex;
+    console.log(randomIndex);
+}
+setInterval(changeColor, 5000);

InClass/Callbacks/exercise-2/exercise.js

@@ -34,6 +34,8 @@ 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 +63,66 @@ const movies = [
   },
 ];
 
-// create showMovies function
+let allMovies = document.getElementById("all-movies");
+let movieNumbers = document.getElementById("movies-number");
+
+//Answer to Task 1
+function showMovies(array){
+
+  //Iterating through the given array to create a p tag and it's content for each object in the array:
+  array.forEach(movie => {
+    let details = document.createElement("p");
+    details.innerHTML = `<h2>${movie.title}</h2>\n<h3>${movie.director}</h3>\n&nbsp`;
+    allMovies.append(details);
+  })
+
+  //Displaying the number of the movies
+  movieNumbers.innerText = array.length;
+}
+
+//Answer to Task 2
+function addMovie(object){
+  setTimeout(movies.push(object), 2000);
+}
+
+//Answer to Task 3
+// let newMovie = {
+//   title: "Beautiful Day in the Neighborhood",
+//   director: "Marielle Heller",
+//   type: "drama",
+//   haveWatched : true
+// }
+// addMovie(newMovie);
+
+
+//Answer to Task 4
+function createObject(){
+
+  //Creating and asigning variables to form values:
+  let newTitle, movieDirector, movieType, watchedOrNot, watchedOrNotArray, checked;
+  newTitle = document.getElementById("title").value;
+  movieDirector = document.getElementById("director").value;
+  movieType = document.getElementById("type").value;
+  watchedOrNot = document.getElementsByName("hasWatched");
+  watchedOrNotArray = Array.from(watchedOrNot);
+  checked = watchedOrNotArray.find(option =>  option.checked);
+
+  //Creating the new movie object
+  let newMovie = {
+    title: newTitle,
+    director: movieDirector,
+    type: movieType,
+    hasWatched: Boolean(checked.value)
+  }
+
+  //Adding the new movie object to the list of arrays called "movies" using the addMovie helper function:
+  addMovie(newMovie)
+}
+
+//form add movie button
+let addBtn = document.getElementById("addBtn");
 
-// create a new movie object for your favorite movie
+//Listening for when the button is clicked
+addBtn.addEventListener("click", createObject);
 
-// create addMovies function
+setTimeout(showMovies(movies), 5000);

InClass/Callbacks/exercise-2/index.html

@@ -23,6 +23,19 @@ <h1>My movies</h1>
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
     </div>
+    <form >
+      <label for="title">Title:</label><br>
+      <input type="text" id="title"><br>&nbsp<br>
+      <label for="description">Director:</label><br>
+      <input type="text" id="director"><br>&nbsp<br>
+      <label for="type">Type:</label><br>
+      <input type="text" id="type"><br>&nbsp<br>
+      <label for="true">True</label>
+      <input type="radio" id="true" name="hasWatched" value="true">
+      <label for="false">False</label>
+      <input type="radio" id="false" name="hasWatched" value="false">><br>&nbsp<br>
+      <button type="button" id="addBtn">Add Movie</button>
+  </form>
     <script src="exercise.js"></script>
 </body>
 

InClass/DOM-practice/main.js

@@ -4,7 +4,13 @@ console.log("Testing JS file loaded!")
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
+//Answer:
+//Accession the section tag
+let sections = document.getElementsByTagName("section");
+let sectionsArray = Array.from(sections);
 
+//Changing each section background to white(#ffffff)
+sectionsArray.forEach(section => section.style.backgroundColor = "#ffffff")
 
 
 
@@ -14,6 +20,13 @@ console.log("Testing JS file loaded!")
 // 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.getElementsByTagName("img");
+let imagesArray = Array.from(images);
+imagesArray.forEach(image => {
+    image.style.marginLeft = "auto";
+    image.style.marginRight = "auto";
+    image.style.display = "block";
+})
 
 
 
@@ -23,3 +36,15 @@ 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>.
+let sectionParagraphs = document.querySelectorAll("section p");
+let sectionParagraphsArray = Array.from(sectionParagraphs);
+let graceHopperDOB = "9 December 1906";
+let graceHopperDOD = "1 January 1992";
+let katJohnsonDOB = "26 August 1918";
+let katJohnsonDOD = "24 February 2020";
+let adaLovelaceDOB = "10 December 1815";
+let adaLovelaceDOD = "27 November 1852";
+
+sectionParagraphsArray[2].innerHTML += `<b>Date of Birth:</b> ${graceHopperDOB}\t<b>Date of Death:</b> ${graceHopperDOD}`;
+sectionParagraphsArray[4].innerHTML += `<b>Date of Birth:</b> ${katJohnsonDOB}\t<b>Date of Death:</b> ${katJohnsonDOD}`;
+sectionParagraphsArray[8].innerHTML += `<b>Date of Birth:</b> ${adaLovelaceDOB}\t<b>Date of Death:</b> ${adaLovelaceDOD}`;

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,68 @@
-function setAlarm() {}
+//Declaring variables
+let setAlarmBtn, stopAlarmBtn, pauseAlarmBtn, input, counter;
+
+//Assigning ids to variables
+setAlarmBtn = document.getElementById("set");
+stopAlarmBtn = document.getElementById("stop");
+pauseAlarmBtn = document.getElementById("pause");
+input = document.getElementById("alarmSet");
+counter = document.getElementById("timeRemaining");
+
+//Start alarm function
+function setAlarm() {
+  let hours, minutes;
+  if(input.value >= 60){
+    hours = Math.floor(input.value / 60);
+    minutes = input.value - hours * 60;
+    if(minutes < 10){
+      counter.innerText = `Time Remaining: ${hours}:0${minutes}`
+    } else {
+      counter.innerText = `Time Remaining: ${hours}:${minutes}`
+    }
+  } else {
+    minutes = input.value
+    if(minutes < 10){
+      counter.innerText = `Time Remaining: 00:0${minutes}`;
+    } else {
+      counter.innerText = `Time Remaining: 00:${minutes}`;
+    }
+  }
+  if(input.value > 0){
+    input.value--;
+  } else {
+    playAlarm();
+    setInterval(changeColor, 1000);
+    document.body.style.backgroundColor = "#ffffff";
+  }
+}
+
+//This function handles the countdown
+let countDown= function() {
+  setInterval(setAlarm, 1000);
+}
+
+//This function sets the background colour to red when it is called 
+function changeColor(){
+    document.body.style.backgroundColor = "red";
+}
+
+//This function sets the background colour to white when it is called 
+function plainBackground(){
+  document.body.style.backgroundColor = "#ffffff";
+}
+
+//Listening for events
+setAlarmBtn.addEventListener("click", countDown);
+stopAlarmBtn.addEventListener("click", function(){
+  clearInterval(countDown);
+});
+pauseAlarmBtn.addEventListener("click", function(){
+  setInterval(function(){
+    input.value++;
+  }, 1000);
+
+});
+
 
 // DO NOT EDIT BELOW HERE
 

mandatory/1-alarmclock/index.html

@@ -22,6 +22,7 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <div>
         <button id="set" type="button">Set Alarm</button>
         <button id="stop" type="button">Stop Alarm</button>
+        <button id="pause" type="button">Pause Alarm</button>
       </div>
     </div>
     <script src="alarmclock.js"></script>

mandatory/2-quotegenerator/index.html

@@ -11,7 +11,11 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div id="quote-container" class="quote-container">
+      <p id="quote" class="quote">CLICK THE BUTTON</p>
+      <button type="button" id="newQuoteBtn" class="newQuoteBtn">New quote</button>
+    </div>
+    <div class="circle1"></div>
     <script src="quotes.js"></script>
   </body>
 </html>

mandatory/2-quotegenerator/quotes.js

@@ -1,3 +1,11 @@
+let quoteP = document.getElementById("quote");
+let newQuoteBtn = document.getElementById("newQuoteBtn");
+function showQuote(quoteFromArray){
+  quoteP.innerHTML = `${quoteFromArray.quote}<br><i><b>-${quoteFromArray.author}</b></i>`;
+}
+
+
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -21,6 +29,7 @@ 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 +499,7 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+newQuoteBtn.addEventListener("click", function(){
+  showQuote(pickFromArray(quotes));
+})

mandatory/2-quotegenerator/style.css

@@ -1 +1,51 @@
-/** Write your CSS in here **/
+body{
+    background-color: #40e0d0;
+    display:flex;
+    justify-content: center;
+}
+.quote-container{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    background-color:#ffffff;
+    width:70vw;
+    height:70vh;
+}
+
+.quote-container p{
+    font-size:2rem;
+    padding:6rem;
+}
+
+.newQuoteBtn{
+    width:200px;
+    height:100px;
+    padding:1rem;
+    border-radius:10px;
+    font-size:1.5rem;
+    box-shadow:5px 10px;
+
+    border:10px solid #21CCBB;
+    font-weight:bold;
+    background-color:#ffffff;
+}
+
+.newQuoteBtn:hover{
+    background-color: #21CCBB;
+    border-color:#ffffff;
+    transition: all .5s linear;
+}
+
+/* Design */
+.circle1{
+    width:1000px;
+    height:1000px;
+    border-radius:50%;
+    background-color:#21CCBB;
+    position:fixed;
+    top:400px;
+    left:-200px;
+    z-index:-100;
+}
+

mandatory/3-slideshow/index.html

@@ -9,9 +9,36 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
+    <script src="https://kit.fontawesome.com/9bb64d8c48.js" crossorigin="anonymous"></script>
   </head>
   <body>
-    <!-- Write your HTML in here -->
-    <script src="slideshow.js"></script>
+    <div class="slider" id="slider">
+      <div class="image-container">
+        <img class="slideShowImage" src="img/camera.jpg" alt="A camera">
+      </div>
+      <div class="image-container">
+        <img class="slideShowImage" src="img/earpods.jpg" alt="Earpods">
+      </div>
+      <div class="image-container">
+        <img class="slideShowImage" src="img/gameboy.jpg" alt="A gameboy">
+      </div>
+      <div class="image-container">
+        <img class="slideShowImage lastImage" src="img/studySet.jpg" alt="Study set">
+      </div>
+    </div>
+    <div class="fowardBtnContainer" id="fowardBtnContainer">
+      <i class="fas fa-angle-double-right"></i>
+    </div>
+    <div class="backwardBtnContainer" id="backwardBtnContainer">
+      <i class="fas fa-angle-double-left"></i>
+    </div>
+    <div class="buttons">
+      <button class="autoBackBtn btn" id="autoBackBtn">Auto Back</button>
+      <button class="autoFrontBtn btn" id="autoFrontBtn">Auto Front</button>
+      <button class="stopBtn btn" id="stopBtn">Stop</button>
+    </div>
+
+
+  <script src="slideshow.js"></script>
   </body>
 </html>