South Africa Class-1 - Jonathan Heugh - JavaScript-Core-2-Week3

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "cSpell.words": [
+        "Corneliu",
+        "Porumboiu",
+        "Whannell",
+        "codepen"
+    ]
+}

InClass/Callbacks/exercise-1/exercise.js

@@ -5,9 +5,53 @@ EXERCISE 1
 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
 
 Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
 ================
-*/
+*/
+
+// Exercise 1 -Syllabus
+const greekGods = [
+  "Aphrodite",
+  "Ares",
+  "Artemis",
+  "Athena",
+  "Poseidon",
+  "Zeus",
+];
+
+// before running the code in your browser, discuss the expected order of each loop
+
+// synchronous - loop through the array of greek gods and print the index numbers and values to the console, e.g. '1. Ares'
+greekGods.forEach((item, i) => console.log(i, item));
+// 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()
+greekGods.forEach((element, i) => {
+  setTimeout(() => {
+    if (i === 2) {
+      console.log(i, element);
+    }
+  }, 2000);
+  if (i === 2) {
+    return;
+  }
+  console.log(i, element);
+});
+
+const body = document.querySelector("body");
+// Task 1
+setTimeout(() => {
+  body.style.backgroundColor = "blue";
+}, 5000);
+
+// Task 2
+let colours = ["red", "blue", "green", "purple"];
+
+let change = 0;
+setInterval(() => {
+  if (change === colours.length) change = 0;
+  body.style.backgroundColor = colours[change];
+  change++;
+}, 5000);

InClass/Callbacks/exercise-2/exercise.js

@@ -63,8 +63,35 @@ const movies = [
 
 // create showMovies function
 
+const contentDiv = document.getElementById("all-movies");
+const spanEl = document.getElementById("movies-number");
+
+const showMovies = (movie) => {
+  movie.forEach((item) => {
+    let pTag = document.createElement("p");
+    contentDiv.appendChild(pTag);
+    pTag.innerHTML = `${item.title} - ${item.director}`;
+    spanEl.innerHTML = `${movies.length}`;
+  });
+};
+showMovies(movies);
 
 // create a new movie object for your favorite movie
 
+const newMovie = {
+  title: "47 Ronin",
+  director: "Carl Rinsch",
+  type: "action",
+  haveWatched: true,
+};
+
 
 // create addMovies function
+
+const addMovie = (movie) => {
+  setTimeout(() => {
+    movie.push(newMovie);
+    showMovies(movies.slice(-1));
+  }, 2000);
+};
+addMovie(movies);

InClass/Callbacks/exercise-2/index.html

@@ -24,6 +24,7 @@ <h1>My movies</h1>
       </div>
     </div>
     <script src="exercise.js"></script>
+    </div>
 </body>
 
 </html>

InClass/DOM-practice/index.html

@@ -27,7 +27,7 @@ <h1>The Mothers of Computing</h1>
     </nav>
   </header>
 
-  <section>
+  <section id="grace">
     <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>
@@ -59,7 +59,7 @@ <h1 id="grace-hopper">Grace Hopper</h1>
 
   <hr />
 
-  <section>
+  <section id="katherine">
     <img
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Katherine_Johnson_1983.jpg/220px-Katherine_Johnson_1983.jpg"
       alt="Katherine Johnson" />
@@ -110,7 +110,7 @@ <h1 id="katherine-johnson">Katherine Johnson</h1>
 
   <hr />
 
-  <section>
+  <section id="ada">
     <img
       src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png"
       alt="Ada Lovelace" />
@@ -154,7 +154,7 @@ <h1 id="ada-lovelace">Ada Lovelace</h1>
   </section>
 
   <footer>
-    <p>Made with <3 by Bex</p>
+    <p>Made with 3 by Bex</p>
   </footer>
   <script src="./main.js"></script>
 </body>

InClass/DOM-practice/main.js

@@ -1,25 +1,40 @@
-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.
 
-
-
-
-
+const changeSectionColor = (colour) => {
+  let sectionTag = document.querySelectorAll("section");
+  sectionTag.forEach((item) => (item.style.backgroundColor = colour));
+};
+changeSectionColor("white");
 
 // Task 2
 
 // Without changing any of the HTML or CSS, update the images on the page so that they are all centered.
-
+const centerImages = () => {
+  let imgCenter = document.querySelectorAll("img");
+  imgCenter.forEach((element) => {
+    element.classList.add("content-title");
+  });
+};
+centerImages();
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
-
-
-
-
-
 // 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 grace = document.getElementById("grace");
+const katherine = document.getElementById("katherine");
+const ada = document.getElementById("ada");
+const pTag1 = document.createElement("p");
+const pTag2 = document.createElement("p");
+const pTag3 = document.createElement("p");
+pTag1.innerText = 'DOB: 9 December 1906' + ', ' + 'Died: 1 January 1992';
+grace.appendChild(pTag1);
+pTag2.innerText = "DOB: 26 August 1918" + ", " + "Died: 24 February 2020";
+katherine.appendChild(pTag2);
+pTag3.innerText = "DOB: 10 December 1815" + ", " + "Died: 27 November 1852";
+ada.appendChild(pTag3);

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,21 @@
-function setAlarm() {}
+let timerInterval = null;
+const inputTime = document.getElementById("alarmSet");
+const timeRemain = document.getElementById("timeRemaining");
+
+const setAlarm = () => {
+  let timeCountDown = inputTime.value;
+  timeRemain.innerHTML = `Time Remaining: 00:${inputTime.value}`;
+  let timerInterval = setInterval(() => {
+    timeRemain.innerHTML = `Time Remaining: 00:${timeCountDown}`;
+    if (timeCountDown > 0) {
+      timeCountDown -= 1;
+    }
+    if (timeCountDown === 0) {
+      clearInterval(timerInterval);
+      playAlarm();
+    }
+  }, 1000);
+};
 
 // DO NOT EDIT BELOW HERE
 

mandatory/1-alarmclock/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Alarm Clock</title>
-    <script src="alarmclock.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -24,5 +24,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
         <button id="stop" type="button">Stop Alarm</button>
       </div>
     </div>
+    <script src="alarmclock.js"></script>
   </body>
 </html>

mandatory/2-quotegenerator/index.html

@@ -2,7 +2,7 @@
 <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"
@@ -13,5 +13,14 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="container">
+      <h2>Quotes Generator of Famous People</h2>
+      <button id="quoteBtn" type="button">Press to display quote</button>
+      <blockquote>
+        <h2 id="quote">quote</h2>
+      </blockquote>
+      <h3 id="quoteAuthor">author</h3>
+    </div>
+    <script src="quotes.js"></script>
   </body>
 </html>

mandatory/2-quotegenerator/quotes.js

@@ -490,3 +490,18 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+const quote = document.getElementById('quote');
+const quoteAuthor = document.getElementById('quoteAuthor');
+const quoteBtn = document.querySelector('#quoteBtn');
+
+
+const displayQuote = () => {
+  let random = Math.floor(Math.random() * quotes.length);
+  quoteAuthor.innerHTML = `${quotes[random].author}`;
+  quote.innerHTML = `${quotes[random].quote}`;
+}
+
+quoteBtn.addEventListener("click", displayQuote);
+
+window.onload = displayQuote();

mandatory/2-quotegenerator/style.css

@@ -1 +1,46 @@
 /** Write your CSS in here **/
+body {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: aqua;
+    color: #333;
+    font-family: 'Calibri', sans-serif;
+    font-weight: 400;
+    text-transform: capitalize;
+}
+
+.container {
+    text-align: center;
+    padding: 2rem;
+    border-radius: 5px;
+    background-color: #fff;
+    flex: 0 0 80%;
+}
+
+#quoteBtn {
+    border: none;
+    color: #fff;
+    background: #753b08;
+    padding: 0.25rem 0.5rem;
+    border-radius: 7px;
+    font-size: 1.3rem;
+    cursor: pointer;
+    outline: none;
+}
+
+#quoteBtn:hover {
+    color: #ffd000;
+}
+
+blockquote {
+    border-left: 10px solid #753b08;
+    margin: 1.5rem;
+    padding: 0.5rem;
+    background-color: #f9f9f9;
+}
+
+#quoteAuthor {
+    color: #ffd000;
+}

mandatory/3-slideshow/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Slideshow</title>
-    <script src="slideshow.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +13,30 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
+
+    <div class="images">
+
+      <button type="button" class="btn auto-backBtn">
+        Auto Back
+      </button>
+      <button type="button" class="btn backBtn">
+        Back
+      </button>
+      <button type="button" class="btn stopBtn">
+        Stop
+      </button>
+      <button type="button" class="btn forwardBtn">
+        Forward
+      </button>
+      <button type="button" class="btn auto-forwardBtn">
+        Auto Forward
+      </button>
+
+    </div>
+
+
+
+    <script src="slideshow.js"></script>
   </body>
 </html>