Updated various exercises, some week 1, mainly week 2

CodeYourFuture · pchan2 · Jul 13, 2020 · Jul 13, 2020 · Jul 13, 2020 · Jul 13, 2020
commit 176364c02250e55fe4a79ccdf2002c7b8cdeb609
diff --git a/Week-1/Homework/projects/2-reading-list.js b/Week-1/Homework/projects/2-reading-list.js
@@ -33,7 +33,7 @@ let books = [
     alreadyRead: false
     }
 ];
-
+let exercise1 - books.map(x => `${x.title} by ${x.author}`).toString();
 let bookAndAuthor = `"${books[0].title}" by ${books[0].author}`;
 
 console.log(bookAndAuthor);
@@ -50,3 +50,19 @@ function hasAlreadyRead() {
 
 books.forEach(hasAlreadyRead());
 
+
+let exercise2 = books.map(x => x.alreadyRead === true ? `You already read ${x.title} by ${x.author}` :  `You still need to read $${x.title} by ${x.author}`).toString();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Week-1/InClass/F-object-keys/exercise-part-1.js b/Week-1/InClass/F-object-keys/exercise-part-1.js
@@ -17,7 +17,15 @@ let mentorsAges = {
 
 let mentorsNames = Object.keys(mentorsAges);
 
-let mentorsNamedUppercased = mentorsNames.toUpperCase();
+// error, see below Aman's solution -> let mentorsNamedUppercased = mentorsNames.toUpperCase();
+
+let Uppercased = function(x){
+  return x.toUpperCase();
+};
+  mentorsNamedUppercased = mentorsNames.map(Uppercased);
+
+  // OR Mursel's solution
+let mentorsNamedUppercased = mentorsNames.map(x => x.toUpperCase());
 
 // ONLY EDIT ABOVE THIS LINE
 

diff --git a/Week-2/Homework/mandatory/0-khanacademy/khan - createASolarSystem.html b/Week-2/Homework/mandatory/0-khanacademy/khan - createASolarSystem.html
@@ -0,0 +1,47 @@
+<!-- 
+    challenge https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-modification/pc/challenge-create-a-solar-system
+    documentation https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-modification/a/summary-dom-modification-techniques
+-->
+
+ <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Challenge: Create a solar system</title>
+        <style>
+            body {
+                background-color: black;
+                padding: 10px;
+            }
+            .planet {
+                width: 100px;
+                height: 100px;
+                border-radius: 50%;
+                text-align: center;
+                padding: 10px;
+                position: relative;
+            }
+            .moon {
+                position: absolute;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background: rgb(237, 237, 237);
+            }
+        </style>
+    </head>
+    <body>
+
+
+    <script>
+        var planet = document.createElement('div');
+        planet.className = 'planet';
+        planet.style.backgroundColor = 'blue';
+        document.body.appendChild(planet);
+
+        var moon = document.createElement('div');
+        moon.className = 'moon';
+        planet.appendChild(moon);
+    </script>
+    </body>
+</html>
diff --git a/Week-2/Homework/mandatory/0-khanacademy/khan-audio.html b/Week-2/Homework/mandatory/0-khanacademy/khan-audio.html
@@ -0,0 +1,33 @@
+<!-- 
+    https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pt/preventing-default-behavior-of-events
+    summary of DOM events https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/a/summary-dom-events
+-->
+
+ <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Preventing default behavior of events</title>
+    </head>
+    <body>
+
+        <a id="ohnoes" href="https://www.kasandbox.org/programming-sounds/rpg/giant-no.mp3">What does Oh Noes say?</a>
+
+      <script>
+        // Step 1: Find the element we want the event on
+        var ohnoesEl = document.getElementById("ohnoes");
+        // Step 2: Define the event listener function
+        var onOhNoesClick = function(e) {
+            // prevent browser to take you to the MP3 website by default
+            e.preventDefault();
+
+            var audioEl = document.createElement("audio");
+            audioEl.src = "https://www.kasandbox.org/programming-sounds/rpg/giant-no.mp3";
+            audioEl.autoplay = "true";
+            document.body.appendChild(audioEl);
+        };
+        // Step 3: Attach event listener to element
+        ohnoesEl.addEventListener("click", onOhNoesClick)
+      </script>
+    </body>
+</html>
diff --git a/Week-2/Homework/mandatory/0-khanacademy/khan-catClicker.html b/Week-2/Homework/mandatory/0-khanacademy/khan-catClicker.html
@@ -0,0 +1,39 @@
+<!-- 
+    https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pc/challenge-cat-clicker
+ -->
+
+ <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Challenge: Cat Clicker</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;  
+            }
+        </style>
+    </head>
+    <body>
+        <h2>Pet me!</h2>
+        <img id="cat-pic" src="https://www.kasandbox.org/programming-images/animals/thumbs/cat.png">
+        <br>
+
+        <div id="cat-chat"></div>
+
+        <script>
+        // find the cat image element and store it in a variable.
+        var catEl = document.getElementById('cat-pic');
+
+        // define a callback function that changes the inner text of the 'cat-chat' div to say 'Meow',
+        var onCatClick = function() {
+            var catChatEl = document.getElementById('cat-chat');
+            catChatEl.textContent = 'Meow';
+        }
+
+        //  assign the callback function as the event listener for the 'click' event for the cat image.
+        // documentation https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+        // target.addEventListener(type, listener [, options]);
+        catEl.addEventListener('click', onCatClick);
+        </script>
+    </body>
+</html>
diff --git a/Week-2/Homework/mandatory/0-khanacademy/khan-catstache-mouseEvent.html b/Week-2/Homework/mandatory/0-khanacademy/khan-catstache-mouseEvent.html
@@ -0,0 +1,33 @@
+<!-- 
+    https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pc/challenge-cat-stache
+ -->
+
+ <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Challenge: Cat-stache</title>
+        <style>
+            #mustache-pic {
+                position: absolute;
+            }
+        </style>
+    </head>
+    <body>
+
+        <img id="cat-pic" src="https://www.kasandbox.org/programming-images/animals/cat.png" width="300" alt="cat photo">
+
+        <img id="mustache-pic" src="https://www.kasandbox.org/programming-images/misc/mustache.png" alt="mustache" width="100">
+
+        <script>
+            var catPic = document.getElementById("cat-pic");
+            var onCatClick = function(e) {
+                var stashePic = document.getElementById("mustache-pic");  
+                stashePic.style.top = e.clientY +"px";
+                stashePic.style.left = e.clientX +"px";
+            };
+            catPic.addEventListener("click", onCatClick);
+
+        </script>
+    </body>
+</html>
diff --git a/...omework/mandatory/0-khanacademy/khan.html → ...ry/0-khanacademy/khan-getElementByID.html b/...omework/mandatory/0-khanacademy/khan.html → ...ry/0-khanacademy/khan-getElementByID.html
diff --git a/Week-2/Homework/mandatory/0-khanacademy/khan-value.html b/Week-2/Homework/mandatory/0-khanacademy/khan-value.html
@@ -0,0 +1,45 @@
+<!-- 
+    https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pc/challenge-mad-libs
+ -->
+
+ <!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8" />
+  <title>Challenge: Mad Libs</title>
+ </head>
+ <body>
+
+    <h1>Mad Libs</h1>
+
+    <ul>
+      <li>Noun: <input type="text" id="noun"></li>
+      <li>Adjective: <input type="text" id="adjective"></li>
+      <li>Someone's Name: <input type="text" id="person"></li>
+    </ul>
+
+    <button id="lib-button">Lib it!</button>
+
+    <p>Generated story: 
+    <span id="story"></span>
+    </p>
+
+    <script>
+        var libButton = document.getElementById('lib-button');
+        var libIt = function() {
+            var storyDiv = document.getElementById("story");
+
+            // attach value at the end so we can see what is inputted.
+            var noun = document.getElementById('noun').value;
+            var adjective = document.getElementById('adjective').value;
+            var person = document.getElementById('person').value;
+
+            // create a string
+            storyDiv.innerHTML = noun + " " + adjective + " " + person;
+        };
+        libButton.addEventListener('click', libIt);
+
+    </script>
+
+ </body>
+</html>
diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js
@@ -15,8 +15,42 @@
  */
 function exerciseOne(arrayOfPeople) {
   let content = document.querySelector("#content");
+  for (let i = 0; i < arrayOfPeople.length; i++) {
+    content[i] = content[i].createElement('h1');
+    content[i] = content[i].createElement('h2');
+  }
 }
 
+// SA's version
+function exerciseOne(arrayOfPeople) {
+  let content = document.querySelector("#content");
+  for(let i=0; i < arrayOfPeople.length; i++){
+    //create h1 element
+    let h1Els =  document.createElement('h1');
+    let h2Els =  document.createElement('h2');
+    //add text with name from arrayOfPeople
+    h1Els.textContent = arrayOfPeople[i].name;
+    h2Els.textContent = arrayOfPeople[i].job;
+    //add to parent node
+    content.appendChild(h1Els);
+    content.appendChild(h2Els);
+  }
+
+//homework club - Martin Armstrong
+function exerciseOne(arrayOfPeople) {
+  let content = document.querySelector("#content");
+
+  arrayOfPeople.forEach(person => {
+    h1 = document.createElement('h1');
+    h2 = document.createElement('h2');
+
+    h1.textContent = person.name;
+    h2.textContent = person.job;
+
+    content.append.Child(h1);
+    content.append.Child(h2);
+  });
+}
 /**
  *
  * Create a list of shopping items. You should use an unordered list.
@@ -25,9 +59,37 @@ function exerciseOne(arrayOfPeople) {
  *
  */
 function exerciseTwo(shopping) {
-  //Write your code in here
+  // create a div element and assign it to a variable "shoppingList"
+  //let shoppingList = document.createElement('div');
+
+  // give the div an ID 'content'
+  //shoppingList.setAttribute('id', 'content');
+
+  let contentDiv = document.getElementById('content');
+  // create Element of unordered list inside div
+  let list = document.createElement('ul');
+  contentDiv.appendChild(list);
+
+  shopping.forEach(shoppingItem => {
+    let li = document.createElement('li');
+    li.textContent = shoppingItem; // alt version to lines 76-77
+    //let arrItem = document.createTextNode(shoppingItem);
+    //li.appendChild(arrItem);
+    list.appendChild(li);
+  } )
 }
 
+  // FOR LOOP - create Element of list items inside ul, times the array length
+  /*for (let i = 0; i < shopping.length; i++) {
+    let li = document.createElement('li');
+    let arrItem = document.createTextNode(shopping[i]);
+    li.appendChild(arrItem);
+    document.getElementsByTagName('ul').appendChild(li);
+  }
+  return shoppingList;
+}*/
+
+
 /**
     I'd like to display my three favorite books inside a nice webpage!
 
@@ -58,9 +120,31 @@ function exerciseTwo(shopping) {
     The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
 **/
 function exerciseThree(books) {
-  //Write your code in here
-}
+  books[0].src = "https://www.google.com/aclk?sa=l&ai=DChcSEwispaDaveHqAhVxgFAGHTSdAEUYABAFGgJkZw&sig=AOD64_1azV9IPe6WEzVXOxoeLptI5aprfQ&adurl&ctype=5&ved=2ahUKEwj80JbaveHqAhWhgXMKHfWCDy4Qvhd6BAgBEDM";
+books[1].src = "https://www.google.com/aclk?sa=L&ai=DChcSEwjUjY3HvuHqAhUG-FEKHXVLDpwYABAHGgJ3cw&sig=AOD64_24Xuw_dw8fpfKPysyJKm5IlNdttQ&adurl&ctype=5&ved=2ahUKEwjzr4PHvuHqAhUClRoKHY3KD38Qvhd6BAgBEEA";
+books[2].src = "https://www.google.com/aclk?sa=L&ai=DChcSEwjUjY3HvuHqAhUG-FEKHXVLDpwYABAHGgJ3cw&sig=AOD64_24Xuw_dw8fpfKPysyJKm5IlNdttQ&adurl&ctype=5&ved=2ahUKEwjzr4PHvuHqAhUClRoKHY3KD38Qvhd6BAgBEEA"
+let contentDiv = document.getElementById('content');
+let ul = document.createElement('ul');
+contentDiv.appendChild(ul);
+books.forEach(book => {
+      //  create a <p> element 
+     //Assign textContent with the book title and author 
+     // append it to the page.
+     let li = document.createElement('li');
+     let p = document.createElement('p');
+     let img = document.createElement('img');
+     p.textContent = book.title + " - " + book.author;
+     li.appendChild(p);
+     li.appendChild(img);
+     ul.appendChild(li);
 
+     if(alreadyRead === true) {
+       backgroundColor = 'green';
+     } else {
+      backgroundColor = 'red';
+     }
+  })
+}
 //
 //
 //