From 4cee9526b7ed1647129926e1443938f2877293c1 Mon Sep 17 00:00:00 2001
From: Sohail Haqyar <haqyarsohail@gmail.com>
Date: Thu, 2 Jan 2020 17:53:51 +0200
Subject: [PATCH 01/10] Social Hackers Academy Stamped

---
 README.md       | 8 ++++----
 Week1/MAKEME.md | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 34103e174..f2daf04b7 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-> Please help us improve and share your feedback! If you find better tutorials
-> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
 
 # Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend)
 
@@ -81,8 +79,10 @@ With this out of the way we can get started!
 
 Did you finish the module? High five!
 
-If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js!
+If you feel ready for the next challenge, click [here](https://www.github.com/SocialHackersCodeSchool/Node.js) to go to Node.js!
+
+## Credit:
+This curriculum is developed by HackYourFuture, modifications, and changes can be found in this Fork. (edited) 
 
-_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
 
 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index 7b3cb47b8..645733b59 100644
--- a/Week1/MAKEME.md
+++ b/Week1/MAKEME.md
@@ -73,7 +73,7 @@ Figure 1 below shows an example of what your application will look like.
 
 This application does 2 things:
 
-1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture).
+1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/SocialHackersCodeSchool).
 2. It displays those repositories in an alphabetically-oreded list. When a user clicks on any of the repository names it will show more details about it.
 
 ### Getting an overview

From 81754dad6030d37d29180d3545d22a213f29184c Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:44:20 -0600
Subject: [PATCH 02/10] Create readme.txt

---
 Week1/homework/readme.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 Week1/homework/readme.txt

diff --git a/Week1/homework/readme.txt b/Week1/homework/readme.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/Week1/homework/readme.txt
@@ -0,0 +1 @@
+

From ccb178dfe3e4fe04503b66624beb6290e9b2eb39 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:45:16 -0600
Subject: [PATCH 03/10] Create Who.js

---
 Week1/homework/jsexercises/Who.js | 51 +++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 Week1/homework/jsexercises/Who.js

diff --git a/Week1/homework/jsexercises/Who.js b/Week1/homework/jsexercises/Who.js
new file mode 100644
index 000000000..fb3033709
--- /dev/null
+++ b/Week1/homework/jsexercises/Who.js
@@ -0,0 +1,51 @@
+// Write a function that makes an API call to https://www.randomuser.me/api
+
+//     Inside the same file write two functions: one with XMLHttpRequest, and the other with axios
+//     Each function should make an API call to the given endpoint: https://www.randomuser.me/api
+//     Log the received data to the console
+//     Incorporate error handling
+
+
+// STEP 1 with XMLHttpRequest
+var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
+
+const getData = () => {
+    const promise = new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();   
+        xhr.open('GET', "https://www.randomuser.me/api", true);
+        xhr.send();
+        xhr.addEventListener("readystatechange", processRequest, false);
+
+        function processRequest(e) {  
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                const dato = JSON.parse(xhr.responseText);  
+                const specificData = dato.results[0].name.first;
+                resolve(specificData); // We could just send dato for all the general data
+            }
+        }
+
+        xhr.onerror = () => {
+            reject("Something ain't going well...");
+        }
+    });
+    return promise;
+}
+
+getData()
+    .then(responseData => console.log(responseData))
+    .catch(err => {
+        console.log(err);
+    }); 
+
+// STEP 2 AXIOS
+const axios = require('axios'); // We have to load in the library first
+
+axios
+  .get('https://www.randomuser.me/api')
+  .then(responseText => {
+    const specificData = responseText.data.results[0].name.first;
+    console.log(specificData);  // We could just send responseText.data for all the general data
+    })
+  .catch(function(error) {
+    console.log("Something went wrong. Error " + error + " destected.");
+  });

From 9db134facd05af9931786f8e86a7ebd2cfcee115 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:45:47 -0600
Subject: [PATCH 04/10] Add files via upload

---
 .../jsexercises/DogGallery/dogGallery.css     |  73 +++++++++++
 .../jsexercises/DogGallery/dogGallery.html    | 102 ++++++++++++++++
 .../jsexercises/DogGallery/dogGallery.js      |  66 ++++++++++
 Week1/homework/jsexercises/Humor/humor.css    |  45 +++++++
 Week1/homework/jsexercises/Humor/humor.html   |  85 +++++++++++++
 Week1/homework/jsexercises/Humor/humor.js     |  66 ++++++++++
 Week1/homework/jsexercises/PROJECT/hyf.png    | Bin 0 -> 9116 bytes
 Week1/homework/jsexercises/PROJECT/index.html |  27 ++++
 Week1/homework/jsexercises/PROJECT/index.js   | 115 ++++++++++++++++++
 Week1/homework/jsexercises/PROJECT/style.css  |  50 ++++++++
 10 files changed, 629 insertions(+)
 create mode 100644 Week1/homework/jsexercises/DogGallery/dogGallery.css
 create mode 100644 Week1/homework/jsexercises/DogGallery/dogGallery.html
 create mode 100644 Week1/homework/jsexercises/DogGallery/dogGallery.js
 create mode 100644 Week1/homework/jsexercises/Humor/humor.css
 create mode 100644 Week1/homework/jsexercises/Humor/humor.html
 create mode 100644 Week1/homework/jsexercises/Humor/humor.js
 create mode 100644 Week1/homework/jsexercises/PROJECT/hyf.png
 create mode 100644 Week1/homework/jsexercises/PROJECT/index.html
 create mode 100644 Week1/homework/jsexercises/PROJECT/index.js
 create mode 100644 Week1/homework/jsexercises/PROJECT/style.css

diff --git a/Week1/homework/jsexercises/DogGallery/dogGallery.css b/Week1/homework/jsexercises/DogGallery/dogGallery.css
new file mode 100644
index 000000000..e2b355fe4
--- /dev/null
+++ b/Week1/homework/jsexercises/DogGallery/dogGallery.css
@@ -0,0 +1,73 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+    }
+    
+    body {
+        background: rgb(44, 43, 43);
+    }
+
+    body div {
+        float: left;
+        padding-bottom: 10vh;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        color: white;
+    }
+
+    body div div {
+        padding: 2%;
+        max-height: 20%;
+        width: 100%;
+        display: flex;
+        flex-flow: row; 
+        justify-content: center;
+    }
+    
+    h1 {
+        margin-top: 50px;
+    }
+    
+    p {
+        margin-top: 30px;
+        margin-bottom: 10px;
+        font-size: 120%;
+    }
+    
+    img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 2vh;
+        margin-bottom: 2vh;
+        height: 20vh;
+    }
+
+    input[type=button] {
+        width: 30%;
+        height: 50%;
+        margin-right: 3%;
+        margin-left: 3%;
+        font-size: 4vh;
+    }
+
+    .leftSide {
+        width: 20%;
+        background: rgb(44, 43, 43);
+    }
+
+    .centerSide {
+        height: auto;
+        min-height: 100vh;
+        width: 60%;
+        background: rgb(0, 0, 0);
+    }
+    
+    .rightSide {
+        width: 20%;
+        background: rgb(44, 43, 43);
+    }
+    
+    
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/DogGallery/dogGallery.html b/Week1/homework/jsexercises/DogGallery/dogGallery.html
new file mode 100644
index 000000000..d9dc97114
--- /dev/null
+++ b/Week1/homework/jsexercises/DogGallery/dogGallery.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Time</title>
+    <link rel="stylesheet" href="dogGallery.css">
+  </head>
+  <body>
+     <!-- LEFT COLUMN-->
+     <div class="leftSide">&nbsp</div>
+
+     <!-- CENTER COLUMN-->
+     <div class="centerSide">
+       <h1>Dog Gallery</h1>
+       <div>
+        <input type="button" id="xhr" value="XHR">
+        <input type="button" id="axios" value="AXIOS">
+       </div>
+       <ul id="dogGallery"></ul>
+     </div>
+
+     <!-- RIGHT COLUMN-->
+     <div class="rightSide">&nbsp</div>
+     
+     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+     <script>
+    
+    const xhrButton = document.querySelector("#xhr");
+    const axiosButton = document.querySelector("#axios");
+
+    xhrButton.addEventListener("click", getXHRData);
+    axiosButton.addEventListener("click", getAxiosData)
+
+    // WITH XHR
+    const getData = () => {
+        const promise = new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
+        xhr.send();
+        xhr.addEventListener("readystatechange", processRequest, false);
+
+        function processRequest(e) {
+          if (xhr.readyState == 4 && xhr.status == 200) {
+            const dato = JSON.parse(xhr.responseText);
+            resolve(dato); // We could just send dato for all the general data
+          }
+        }
+
+        xhr.onerror = () => {
+          reject("Something ain't going well...");
+        }
+      });
+      return promise;
+    }
+
+    function getXHRData(){
+      getData()
+        .then(responseData => {
+          console.log(responseData);
+          loadNewElements(responseData.message, "xhr");
+        })
+        .catch(err => {
+          console.log(err);
+        }); 
+    }
+      
+      // WITH AXIOS
+    function getAxiosData(){
+      axios
+        .get('https://dog.ceo/api/breeds/image/random')
+        .then(responseText => {
+        console.log(responseText.data);  // We could just send responseText.data for all the general data
+        loadNewElements(responseText.data.message, "axios");
+        })
+        .catch(function(error) {
+        console.log("Something went wrong. Error '" + error + "' detected.");
+        });
+    }
+
+        function loadNewElements(srcData, technique){
+          const div = document.querySelector(".centerSide");
+          const listItem = document.createElement("li");
+          const parr = document.createElement("p");
+          const img = document.createElement("img");
+    
+          if(technique.toLowerCase() === "axios"){
+            parr.innerHTML = "Image retrieved with Axios:";
+            img.src = srcData;
+          } else if(technique.toLowerCase() === "xhr") {
+            parr.innerHTML = "Image retrieved with XHR:";
+            img.src = srcData;
+          } else
+            console.log("Error: Technique not accepted...")
+          
+          listItem.appendChild(parr);
+          listItem.appendChild(img);
+          div.appendChild(listItem);
+      }
+     </script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/DogGallery/dogGallery.js b/Week1/homework/jsexercises/DogGallery/dogGallery.js
new file mode 100644
index 000000000..a19f88239
--- /dev/null
+++ b/Week1/homework/jsexercises/DogGallery/dogGallery.js
@@ -0,0 +1,66 @@
+
+// Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
+// Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
+// Log the received data to the console
+// Render the img property into an <img> tag in the DOM
+// Incorporate error handling
+
+// STEP 1 with XMLHttpRequest
+//const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
+//const xhr2 = new XMLHttpRequest();  
+/*
+const getData = () => {
+    const promise = new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();   
+        xhr.open('GET', "https://xkcd.com/info.0.json", true);
+        xhr.send();
+        xhr.addEventListener("readystatechange", processRequest, false);
+
+        function processRequest(e) {  
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                const dato = JSON.parse(xhr.responseText);
+                resolve(dato); // We could just send dato for all the general data
+            }
+        }
+
+        xhr.onerror = () => {
+            reject("Something ain't going well...");
+        }
+    });
+    return promise;
+}
+
+getData()
+    .then(responseData => {
+        console.log(responseData);
+        loadNewElements();
+    })
+    .catch(err => {
+        console.log(err);
+    }); 
+*/
+// STEP 2 AXIOS
+
+const axios = require('axios'); // We have to load in the library first
+
+axios
+  .get('https://xkcd.com/info.0.json')
+  .then(responseText => {
+    //const specificData = responseText.data.results[0].name.first;
+    console.log(responseText.data.img);  // We could just send responseText.data for all the general data
+    })
+  .catch(function(error) {
+    console.log("Something went wrong. Error '" + error + "' detected.");
+  });
+ 
+
+  function loadNewElements(){
+    const div = document.querySelector(".centerSide");
+    const parr1 = document.createElement("p");
+    // const parr2 = document.createElement("p");
+    // const img1 = document.createElement("img");
+    // const img2 = document.createElement("img");
+
+    parr1.innerHTML = "Image with XHR:"
+    div.appendChild(parr1);
+  }
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/Humor/humor.css b/Week1/homework/jsexercises/Humor/humor.css
new file mode 100644
index 000000000..ad118fa17
--- /dev/null
+++ b/Week1/homework/jsexercises/Humor/humor.css
@@ -0,0 +1,45 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+    }
+    
+    body div {
+        height: 100vh;
+        float: left;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        color: white;
+    }
+    
+    h1 {
+        margin-top: 50px;
+    }
+    
+    p {
+        margin-top: 30px;
+        margin-bottom: 10px;
+        font-size: 120%;
+    }
+    
+    img {
+        width: 40vw;
+    }
+
+    .leftSide {
+        width: 20%;
+        background: rgb(44, 43, 43);
+    }
+    
+    .centerSide {
+        width: 60%;
+        background: rgb(0, 0, 0);
+    }
+    
+    .rightSide {
+        width: 20%;
+        background: rgb(44, 43, 43);
+    }
+    
+    
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/Humor/humor.html b/Week1/homework/jsexercises/Humor/humor.html
new file mode 100644
index 000000000..d43c3063e
--- /dev/null
+++ b/Week1/homework/jsexercises/Humor/humor.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Time</title>
+    <link rel="stylesheet" href="humor.css">
+  </head>
+  <body>
+     <!-- LEFT COLUMN-->
+     <div class="leftSide">&nbsp</div>
+
+     <!-- CENTER COLUMN-->
+     <div class="centerSide">
+       <h1>XHR and AXIOS</h1>
+     </div>
+
+     <!-- RIGHT COLUMN-->
+     <div class="rightSide">&nbsp</div>
+     
+     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+     <script>
+      // WITH XHR
+      const getData = () => {
+        const promise = new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', 'https://xkcd.now.sh/?comic=latest', true);
+        xhr.send();
+        xhr.addEventListener("readystatechange", processRequest, false);
+
+        function processRequest(e) {
+          if (xhr.readyState == 4 && xhr.status == 200) {
+            const dato = JSON.parse(xhr.responseText);
+            resolve(dato); // We could just send dato for all the general data
+          }
+        }
+
+        xhr.onerror = () => {
+          reject("Something ain't going well...");
+        }
+      });
+      return promise;
+    }
+
+      getData()
+        .then(responseData => {
+          console.log(responseData);
+          loadNewElements(responseData.img, "xhr");
+        })
+        .catch(err => {
+          console.log(err);
+        }); 
+      
+      // WITH AXIOS
+      axios
+        .get('https://xkcd.now.sh/?comic=latest')
+        .then(responseText => {
+        console.log(responseText.data);  // We could just send responseText.data for all the general data
+        loadNewElements(responseText.data.img, "axios");
+        })
+        .catch(function(error) {
+        console.log("Something went wrong. Error '" + error + "' detected.");
+        });
+ 
+
+        function loadNewElements(srcData, technique){
+          const div = document.querySelector(".centerSide");
+          const parr1 = document.createElement("p");
+          const img = document.createElement("img");
+    
+          if(technique.toLowerCase() === "axios"){
+            parr1.innerHTML = "Image with AXIOS:"
+            img.src = srcData;
+          } else if(technique.toLowerCase() === "xhr") {
+            parr1.innerHTML = "Image with XHR:"
+            img.src = srcData;
+          } else
+            console.log("Error: Technique not accepted...")
+          
+          div.appendChild(parr1);
+          div.appendChild(img);
+      }
+     </script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/Humor/humor.js b/Week1/homework/jsexercises/Humor/humor.js
new file mode 100644
index 000000000..a19f88239
--- /dev/null
+++ b/Week1/homework/jsexercises/Humor/humor.js
@@ -0,0 +1,66 @@
+
+// Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
+// Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
+// Log the received data to the console
+// Render the img property into an <img> tag in the DOM
+// Incorporate error handling
+
+// STEP 1 with XMLHttpRequest
+//const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
+//const xhr2 = new XMLHttpRequest();  
+/*
+const getData = () => {
+    const promise = new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();   
+        xhr.open('GET', "https://xkcd.com/info.0.json", true);
+        xhr.send();
+        xhr.addEventListener("readystatechange", processRequest, false);
+
+        function processRequest(e) {  
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                const dato = JSON.parse(xhr.responseText);
+                resolve(dato); // We could just send dato for all the general data
+            }
+        }
+
+        xhr.onerror = () => {
+            reject("Something ain't going well...");
+        }
+    });
+    return promise;
+}
+
+getData()
+    .then(responseData => {
+        console.log(responseData);
+        loadNewElements();
+    })
+    .catch(err => {
+        console.log(err);
+    }); 
+*/
+// STEP 2 AXIOS
+
+const axios = require('axios'); // We have to load in the library first
+
+axios
+  .get('https://xkcd.com/info.0.json')
+  .then(responseText => {
+    //const specificData = responseText.data.results[0].name.first;
+    console.log(responseText.data.img);  // We could just send responseText.data for all the general data
+    })
+  .catch(function(error) {
+    console.log("Something went wrong. Error '" + error + "' detected.");
+  });
+ 
+
+  function loadNewElements(){
+    const div = document.querySelector(".centerSide");
+    const parr1 = document.createElement("p");
+    // const parr2 = document.createElement("p");
+    // const img1 = document.createElement("img");
+    // const img2 = document.createElement("img");
+
+    parr1.innerHTML = "Image with XHR:"
+    div.appendChild(parr1);
+  }
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/PROJECT/hyf.png b/Week1/homework/jsexercises/PROJECT/hyf.png
new file mode 100644
index 0000000000000000000000000000000000000000..76bc5a13b4a53ea97a6c09ca5fe399f40ab20e4e
GIT binary patch
literal 9116
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
GkN*WepL25n

literal 0
HcmV?d00001

diff --git a/Week1/homework/jsexercises/PROJECT/index.html b/Week1/homework/jsexercises/PROJECT/index.html
new file mode 100644
index 000000000..b70aa21a7
--- /dev/null
+++ b/Week1/homework/jsexercises/PROJECT/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="theme-color" content="#000000">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <link rel="apple-touch-icon" href="./hyf.png">
+  <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+  <title>HYF-GITHUB</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <div id="root">
+    <div class="mainTitle">
+      <h1><span>HYF Repositories</span></h1>
+    </div>
+  </div>
+  <script src="./index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Week1/homework/jsexercises/PROJECT/index.js b/Week1/homework/jsexercises/PROJECT/index.js
new file mode 100644
index 000000000..bf6c0edfb
--- /dev/null
+++ b/Week1/homework/jsexercises/PROJECT/index.js
@@ -0,0 +1,115 @@
+'use strict';
+
+{
+  function fetchJSON(url, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status <= 299) {
+        cb(null, xhr.response);
+      } else {
+        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => cb(new Error('Network request failed'));
+    xhr.send();
+  }
+
+  function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+
+    Object.entries(options).forEach(([key, value]) => {
+      // JS3-1 START Modified Lines
+      if (key === 'errText') {
+        elem.innerHTML = value;
+      } else {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        if (key === 'text') {
+          innerSpan.innerHTML += "<strong>Repository:</strong>  ";
+          innerLink.target = "_blank";
+          innerLink.innerText = value;
+          innerLink.href = options.url;
+          innerSpan.appendChild(innerLink);
+          innerSpan.innerHTML += "<br/>";
+        } else if (key === 'desc') {
+          innerSpan.innerHTML += "<strong>Description:</strong> " + value + "<br/>";
+        } else if (key === 'forks') {
+          innerSpan.innerHTML += "<strong>Forks:</strong>           " + value + "<br/>";
+        } else if (key === 'update') {
+          innerSpan.innerHTML += "<strong>Update:</strong>        " + formatDate(value);
+        } else if (key === 'url') {
+          console.log(innerSpan.innerHTML);
+        }
+        // JS3-1 END Modified Lines
+        else {
+          elem.setAttribute(key, value);
+        }
+        elem.appendChild(innerSpan);
+      }
+    });
+    parent.appendChild(elem);
+    //elem.innerHTML += "</span>";  // JS3-1 Modified Line
+    return elem;
+  }
+
+  // JS3-1 Modified line
+  function renderRepoDetails(repo, ul) {
+    createAndAppend('li', ul, {
+      text: repo.name, desc: repo.description, forks: repo.forks,
+      update: repo.updated_at, url: repo.html_url
+    });
+  }
+
+  // JS3-1 START Function that formats the Dates
+  function formatDate(sentDate) {
+    let date = new Date(sentDate);
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    let seconds = date.getSeconds();
+    let ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    seconds = seconds < 10 ? '0' + seconds : seconds;
+    const strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
+    return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + ",  " + strTime;
+  }
+  // JS3-1 END
+  // JS3-1 START Function that sorts th array
+  function sortArray(arrayToSort) {
+    arrayToSort.sort(function (a, b) {
+      if (a.name.toLowerCase() > b.name.toLowerCase()) {
+        return 1;
+      }
+      if (a.name.toLowerCase() < b.name.toLowerCase()) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+    });
+    return arrayToSort;
+  }
+  // JS3-1 END
+
+  function main(url) {
+    fetchJSON(url, (err, repos) => {
+      const root = document.getElementById('root');
+      if (err) {
+        createAndAppend('div', root, {
+          errText: err.message,   //JS3-1 Modified Line
+          class: 'alert-error',
+        });
+        return;
+      }
+      const ul = createAndAppend('ul', root);
+      repos = sortArray(repos);  //JS3-1 Sort the array of objects before displaying them
+      repos.forEach(repo => renderRepoDetails(repo, ul));
+    });
+  }
+
+const HYF_REPOS_URL =
+  'https://api.github.com/orgs/HackYourFuture/repos?per_page=10';
+  window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/Week1/homework/jsexercises/PROJECT/style.css b/Week1/homework/jsexercises/PROJECT/style.css
new file mode 100644
index 000000000..fb5757a62
--- /dev/null
+++ b/Week1/homework/jsexercises/PROJECT/style.css
@@ -0,0 +1,50 @@
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+
+li {
+  margin: 3px;
+  padding: 3vh;
+  border-style: hidden;
+  border-color: rgb(194, 191, 191);
+  border-width: 2px;
+  box-shadow: 1px 1px 5px #7e7b7b;
+}
+
+li span {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-family: sans-serif;
+  white-space: pre-wrap;
+}
+
+a {
+  text-decoration: underline;
+  color: blue;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+.mainTitle{
+  background-color: rgb(63, 81, 181);
+  color: white;
+  font-family: sans-serif;
+  font-size: 50%;
+  padding: 3vh;
+}
+
+.mainTitle span {
+  font-weight: normal;
+}
+
+.alert-error {
+  margin-top: 4px;
+  padding: 3vh;
+  background-color: rgb(248, 215, 218);
+  color: rgb(92, 60, 60);
+}
\ No newline at end of file

From 8965734721c7b4139231152a7c1cb67c685f064a Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:46:29 -0600
Subject: [PATCH 05/10] Create readme.txt

---
 Week2/homework/readme.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 Week2/homework/readme.txt

diff --git a/Week2/homework/readme.txt b/Week2/homework/readme.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/Week2/homework/readme.txt
@@ -0,0 +1 @@
+

From c008c3befc2e8c09121c91a7127b8ccff4620585 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:46:59 -0600
Subject: [PATCH 06/10] Create readme.txt

---
 Week2/homework/jsexercises/readme.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 Week2/homework/jsexercises/readme.txt

diff --git a/Week2/homework/jsexercises/readme.txt b/Week2/homework/jsexercises/readme.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/Week2/homework/jsexercises/readme.txt
@@ -0,0 +1 @@
+

From 05b54a59e286e630940e9a7bf473cad575f26927 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Tue, 25 Feb 2020 00:47:20 -0600
Subject: [PATCH 07/10] Add files via upload

---
 Week2/homework/jsexercises/PROJECT/hyf.png    | Bin 0 -> 9116 bytes
 Week2/homework/jsexercises/PROJECT/index.html |  34 +++
 Week2/homework/jsexercises/PROJECT/index.js   | 250 ++++++++++++++++++
 Week2/homework/jsexercises/PROJECT/style.css  | 159 +++++++++++
 4 files changed, 443 insertions(+)
 create mode 100644 Week2/homework/jsexercises/PROJECT/hyf.png
 create mode 100644 Week2/homework/jsexercises/PROJECT/index.html
 create mode 100644 Week2/homework/jsexercises/PROJECT/index.js
 create mode 100644 Week2/homework/jsexercises/PROJECT/style.css

diff --git a/Week2/homework/jsexercises/PROJECT/hyf.png b/Week2/homework/jsexercises/PROJECT/hyf.png
new file mode 100644
index 0000000000000000000000000000000000000000..76bc5a13b4a53ea97a6c09ca5fe399f40ab20e4e
GIT binary patch
literal 9116
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
GkN*WepL25n

literal 0
HcmV?d00001

diff --git a/Week2/homework/jsexercises/PROJECT/index.html b/Week2/homework/jsexercises/PROJECT/index.html
new file mode 100644
index 000000000..fc915cbc5
--- /dev/null
+++ b/Week2/homework/jsexercises/PROJECT/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="theme-color" content="#000000">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <link rel="apple-touch-icon" href="./hyf.png">
+  <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+  <title>HYF-GITHUB</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <div id="root">
+    <div class="mainTitle">
+      <h1><span>HYF Repositories</span></h1>
+      <select id="repositories"></select>
+    </div>
+    <div class="containers">
+      <section class="repo-container"></section>
+      <section class="contributors-container">
+        <div id="contributions">Contributions</div>
+      </section>
+    </div>
+  </div>
+  <script src="./index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Week2/homework/jsexercises/PROJECT/index.js b/Week2/homework/jsexercises/PROJECT/index.js
new file mode 100644
index 000000000..319662ec7
--- /dev/null
+++ b/Week2/homework/jsexercises/PROJECT/index.js
@@ -0,0 +1,250 @@
+'use strict';
+
+{
+  //JS3-2 START Select Listener
+  const selectEl = document.querySelector("#repositories");
+  selectEl.addEventListener("change", (event) => {
+    displaySelectedRepo(event.target.value);
+    displayContributors(event.target.value);  //JS3-2 After all the Li Elements are created keeps only the selected one visible.
+  });
+
+  //JS3-2 END Select Listener
+  /* JS3-2 Modified function (Now with fetch)
+  function fetchJSON(url, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status <= 299) {
+        cb(null, xhr.response);
+      } else {
+        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => cb(new Error('Network request failed'));
+    xhr.send();
+  } */
+
+  //JS3-2 START New fetchJSON function that uses fetch instead of xhr
+  function fetchJSON(url, cb) {
+    fetch(url)
+    .then(res => res.json())
+    .then(data => cb(null, data))
+    .catch(err => cb(new Error(`Network error.`)))
+  }
+  //JS3-2 END
+
+  //JS3-2 START New  function that uses fetch instead of xhr
+  function fetchJSONContributors(contrData) {
+    Promise.all(contrData.map(dato => {
+      fetch(dato.url)
+      .then(res => res.json())
+      .then(data => contributorsAux(null, data, dato.id))
+    }))
+    .then(res2 => console.log("Everything went well.."))
+    .catch(res => console.log("One URL failed..."))
+  }
+  //JS3-2 END
+
+  function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+
+    Object.entries(options).forEach(([key, value]) => {
+      // JS3-1 START Modified Lines
+      if (key === 'errText') {
+        elem.innerHTML = value;
+      } else {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        if (key === 'text') {
+          innerSpan.innerHTML += "<strong>Repository:</strong>  ";
+          innerLink.target = "_blank";
+          innerLink.innerText = value;
+          innerLink.href = options.url;
+          innerSpan.appendChild(innerLink);
+          innerSpan.innerHTML += "<br/>";
+        } else if (key === 'desc') {
+          innerSpan.innerHTML += "<strong>Description:</strong> " + value + "<br/>";
+        } else if (key === 'forks') {
+          innerSpan.innerHTML += "<strong>Forks:</strong>           " + value + "<br/>";
+        } else if (key === 'update') {
+          innerSpan.innerHTML += "<strong>Update:</strong>        " + formatDate(value);
+        } else if (key === 'url') {
+          //displaySelectedRepo();
+        }
+        // JS3-1 END Modified Lines
+        else {
+          elem.setAttribute(key, value);
+        }
+        elem.appendChild(innerSpan);
+      }
+    });
+    parent.appendChild(elem);
+    return elem;
+  }
+
+  //JS3-2 Function that creates and append only for contributors
+  function createAndAppendContributors(name, parent, options = {}) {
+    const elem = document.createElement(name);
+    const contrDiv = document.createElement("div");
+    contrDiv.setAttribute("class", "contributorData");
+    const contributorURL = options.url;
+
+    Object.entries(options).forEach(([key, value]) => {
+      const innerSpan = document.createElement("span");
+      const innerLink = document.createElement("a");
+      
+      if (key === 'img') {
+        const contImage = document.createElement("img");
+        contImage.src = value;
+        contrDiv.appendChild(contImage);
+      } else if (key === 'text') {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        innerLink.target = "_blank";
+        innerLink.innerText = value;
+        innerLink.href = contributorURL;
+        innerSpan.appendChild(innerLink);
+        contrDiv.appendChild(innerSpan);
+      } else if (key === 'contr') {
+        const innerSpan = document.createElement("span");
+        innerSpan.setAttribute("class", "numberContributions");
+        innerSpan.innerHTML = value;
+        contrDiv.appendChild(innerSpan);
+      }
+    });
+    elem.appendChild(contrDiv);
+    parent.appendChild(elem);
+    return elem;
+  }
+
+  // JS3-1 Modified line
+  function renderRepoDetails(repo, ul) {
+    contributorsURLArray.push({id: repo.id, url: repo.contributors_url});  //JS3-2 The contributors Array receives a new url.
+    createAndAppend('li', ul, {
+      text: repo.name, desc: repo.description, forks: repo.forks,
+      update: repo.updated_at, url: repo.html_url
+    });
+  }
+
+  // JS3-2 New Function that adds the li's for the contributors
+  function renderRepoContributorDetails(repo, ul) {
+    createAndAppendContributors('li', ul, {
+      img: repo.avatar_url, text: repo.login, contr: repo.contributions, url: repo.html_url
+    });
+  }
+
+  // JS3-1 START Function that formats the Dates
+  function formatDate(sentDate) {
+    let date = new Date(sentDate);
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    let seconds = date.getSeconds();
+    let ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    seconds = seconds < 10 ? '0' + seconds : seconds;
+    const strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
+    return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + ",  " + strTime;
+  }
+  // JS3-1 END
+  // JS3-1 START Function that sorts an array alphabetically
+  function sortArray(arrayToSort) {
+    arrayToSort.sort(function (a, b) {
+      if (a.name.toLowerCase() > b.name.toLowerCase()) {
+        return 1;
+      }
+      if (a.name.toLowerCase() < b.name.toLowerCase()) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+    });
+    return arrayToSort;
+  }
+  // JS3-1 END
+  // JS3-2 START Function that populates the Select Element
+  function populateSelect(repos){
+    selectEl.innerHTML = "";
+    repos.forEach((repo, i) => {
+      repositoriesOrder.push(repo.id);   // Here the reporitories of the ID's are stored in alphabetical order
+      selectEl.innerHTML += `<option value="${i}">${repo.name}</option>`;
+    })
+  }
+  // JS3-1 END
+
+    // JS3-2 START Function that verifies the position of the UL to be stored
+    function positionID(repositoryID, URLId){
+      let finalId = 0;
+      repositoryID.forEach((repo, i) => {
+        if(repo === URLId)
+          finalId = i;
+      })
+      return finalId;
+    }
+    // JS3-1 END
+
+  // JS3-2 START Function that displays the selected Element
+  function displaySelectedRepo(value = 0){
+    const liEls = document.querySelectorAll(".repo-container li");
+    if(liEls.length > 0){
+      liEls.forEach(listelement => {
+        listelement.style.display = "none";
+      })
+      liEls[value].style.display = "block";
+    } else
+      console.log("Houston, we got a problem...");
+  }
+  // JS3-2 END
+
+  // JS3-2 START Function that displays the selected Element contributors
+  function displayContributors(value = 0){
+    if(contributorsUl.length > 0){
+      contributorsUl.forEach(listelement => {
+        listelement.style.display = "none";
+      })
+      contributorsUl[value].style.display = "block";
+    } else
+      console.log("Houston, we got a problem...");
+  }
+  // JS3-2 END
+  
+  //JS3-2 Auxiliary function for the contributors display
+  function contributorsAux(err, contributors, id){
+    const root = document.querySelector('.contributors-container');
+    if (err) {
+      return new Error("A contributor URL failed...");
+    }
+    const ul = createAndAppend('ul', root);
+    contributorsUl[positionID(repositoriesOrder, id)] = ul;
+    contributors.forEach(contributor => renderRepoContributorDetails(contributor, ul));
+    displayContributors();  //JS3-2 After all the Li Elements are created keeps only the selected one visible.
+  }
+
+  function main(url) {
+    fetchJSON(url, (err, repos) => {
+      const root = document.querySelector('.repo-container');
+      if (err) {
+        createAndAppend('div', root, {
+          errText: err.message,   //JS3-1 Modified Line
+          class: 'alert-error',
+        });
+        return;
+      }
+      const ul = createAndAppend('ul', root);
+      repos = sortArray(repos);  //JS3-1 Sort the array of objects before displaying them
+      populateSelect(repos);  //JS3-2 Populate the Select element.
+      repos.forEach(repo => renderRepoDetails(repo, ul));
+      displaySelectedRepo();  //JS3-2 After all the Li Elements are created keeps only the selected one visible.
+      fetchJSONContributors(contributorsURLArray)  //JS3-2 After the repos, comes the list of contributors
+    });
+  }
+
+  let repositoriesOrder= [];
+  let contributorsUl = [];  //JS3-2 List of Ul of contributors
+  let contributorsURLArray = [];  //JS3-2 Contributors URL Array
+  const HYF_REPOS_URL =
+    'https://api.github.com/orgs/HackYourFuture/repos?per_page=10';
+    window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/Week2/homework/jsexercises/PROJECT/style.css b/Week2/homework/jsexercises/PROJECT/style.css
new file mode 100644
index 000000000..08395db8c
--- /dev/null
+++ b/Week2/homework/jsexercises/PROJECT/style.css
@@ -0,0 +1,159 @@
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: underline;
+  color: blue;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+a:visited {
+  color: purple;
+}
+
+img{
+  width: 60px;
+  margin-right: 2vw;;
+}
+
+li {
+  margin: 3px;
+  padding: 3vh;
+  border-style: hidden;
+  border-color: rgb(194, 191, 191);
+  border-width: 2px;
+  box-shadow: 1px 1px 5px #7e7b7b;
+  list-style-type: none;
+}
+
+li span {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-family: sans-serif;
+  white-space: pre-wrap;
+}
+
+/*JS3-2 START Modified Text. Attributes for Select element */
+select {
+  margin-left: 15px;
+  height: 25px;
+  width: 200px;
+}
+/*JS3-2 END Modified Text. Helps to place the select element after the Title ina row. */
+
+section{
+  width: 50%;
+}
+
+.alert-error {
+  margin-top: 4px;
+  padding: 3vh;
+  background-color: rgb(248, 215, 218);
+  color: rgb(92, 60, 60);
+}
+
+/*JS3-2 START Modified Text. Div that contains two sections */
+.containers{
+  display: flex;  
+  flex-direction: row; 
+}
+/*JS3-2 END Modified Text. Div that contains two sections */
+
+.contributorData {
+  display: flex;  
+  flex-direction: row; 
+  align-items: center;
+}
+
+.contributorData a{
+  text-decoration: none;
+}
+
+.mainTitle{
+  display: flex;   /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  flex-direction: row; /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  justify-content: flex-start; /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  align-items: baseline; /*JS3-2 Modified Text. Helps to place the select element after the Title ina row. */
+  background-color: rgb(63, 81, 181);
+  color: white;
+  font-family: sans-serif;
+  font-size: 50%;
+  padding: 3vh;
+}
+
+.mainTitle span {
+  font-weight: normal;
+}
+
+.numberContributions {
+  margin-left: auto;
+  padding: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
+  border-radius: 5px;
+  font-size: 12px;;
+  background-color: rgb(124, 111, 111);
+  color: white;
+}
+
+/* JS3-2 Line that separates the block style of the li span of the containers from the contributors. */
+.repo-container li span {
+  display: block;
+}
+
+#contributions {
+  margin: 3px;
+  padding: 3vh;
+  border-style: hidden;
+  border-color: rgb(194, 191, 191);
+  border-width: 2px;
+  border-bottom: none;
+  box-shadow: 1px 1px 5px #7e7b7b;
+  list-style-type: none;
+  color: rgb(165, 159, 159);
+}
+
+/* RESPONSIVENESS*/
+/* Mobile phones */
+@media screen and (max-width: 450px) {
+  section{
+    width: 100%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: column; 
+  }
+}
+
+/* RESPONSIVENESS*/
+/* TABLETS */
+@media screen and (min-width: 451px) and (max-width: 800px) {
+  section{
+    width: 50%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: row; 
+  }
+}
+
+/* RESPONSIVENESS*/
+/* LARGER SCREENS */
+@media screen and (min-width: 801px) {
+  section{
+    width: 50%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: row; 
+  }
+}

From bf27ffd93d2fe56cd89071d62e0ebb59437baad7 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Thu, 27 Feb 2020 10:35:26 -0600
Subject: [PATCH 08/10] Create readme.txt

---
 Week3/homework/readme.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 Week3/homework/readme.txt

diff --git a/Week3/homework/readme.txt b/Week3/homework/readme.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/Week3/homework/readme.txt
@@ -0,0 +1 @@
+

From ad318ad6e9860a79e5f6398691cbfe043e6f3a32 Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Thu, 27 Feb 2020 10:35:42 -0600
Subject: [PATCH 09/10] Create readme.txt

---
 Week3/homework/js-exercises/readme.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 Week3/homework/js-exercises/readme.txt

diff --git a/Week3/homework/js-exercises/readme.txt b/Week3/homework/js-exercises/readme.txt
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/Week3/homework/js-exercises/readme.txt
@@ -0,0 +1 @@
+

From ef47bf646c5d76bde61ba7c1251886a1630df77b Mon Sep 17 00:00:00 2001
From: SalvadorCab <44257545+SalvadorCab@users.noreply.github.com>
Date: Thu, 27 Feb 2020 10:36:29 -0600
Subject: [PATCH 10/10] Add files via upload

---
 .../homework/js-exercises/ContributorsView.js |  74 +++++
 Week3/homework/js-exercises/PROJECT/hyf.png   | Bin 0 -> 9116 bytes
 .../homework/js-exercises/PROJECT/index.html  |  35 +++
 Week3/homework/js-exercises/PROJECT/index.js  | 255 ++++++++++++++++++
 Week3/homework/js-exercises/PROJECT/style.css | 159 +++++++++++
 Week3/homework/js-exercises/RepoView.js       |  85 ++++++
 6 files changed, 608 insertions(+)
 create mode 100644 Week3/homework/js-exercises/ContributorsView.js
 create mode 100644 Week3/homework/js-exercises/PROJECT/hyf.png
 create mode 100644 Week3/homework/js-exercises/PROJECT/index.html
 create mode 100644 Week3/homework/js-exercises/PROJECT/index.js
 create mode 100644 Week3/homework/js-exercises/PROJECT/style.css
 create mode 100644 Week3/homework/js-exercises/RepoView.js

diff --git a/Week3/homework/js-exercises/ContributorsView.js b/Week3/homework/js-exercises/ContributorsView.js
new file mode 100644
index 000000000..7866acc38
--- /dev/null
+++ b/Week3/homework/js-exercises/ContributorsView.js
@@ -0,0 +1,74 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class ContributorsView {
+    constructor(container) {
+      this.container = container;
+    }
+
+    update(state) {
+      if (!state.error) {
+        this.render(state.contributors);
+      }
+    }
+
+    /**
+     * Renders the list of contributors
+     * @param {Object[]} contributors An array of contributor objects
+     */
+    render(contributors) {
+      // TODO: replace this comment and the console.log with your own code
+      console.log('ContributorsView', contributors);
+      const root = document.querySelector('#root');
+
+      const ul = document.createElement("ul");
+      root.appendChild(ul);
+      contributors.forEach(contributor => this.renderRepoContributorDetails(contributor, ul));
+    }
+
+    renderRepoContributorDetails(repo, ul) {
+      this.createAndAppendContributors('li', ul, {
+        img: repo.avatar_url, text: repo.login, contr: repo.contributions, url: repo.html_url
+      });
+    }
+
+    createAndAppendContributors(name, parent, options = {}) {
+      const elem = document.createElement(name);
+      const contrDiv = document.createElement("div");
+      contrDiv.setAttribute("class", "contributorData");
+      const contributorURL = options.url;
+  
+      Object.entries(options).forEach(([key, value]) => {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        
+        if (key === 'img') {
+          const contImage = document.createElement("img");
+          contImage.src = value;
+          contrDiv.appendChild(contImage);
+        } else if (key === 'text') {
+          const innerSpan = document.createElement("span");
+          const innerLink = document.createElement("a");
+          innerLink.target = "_blank";
+          innerLink.innerText = value;
+          innerLink.href = contributorURL;
+          innerSpan.appendChild(innerLink);
+          contrDiv.appendChild(innerSpan);
+        } else if (key === 'contr') {
+          const innerSpan = document.createElement("span");
+          innerSpan.setAttribute("class", "numberContributions");
+          innerSpan.innerHTML = value;
+          contrDiv.appendChild(innerSpan);
+        }
+      });
+      elem.appendChild(contrDiv);
+      parent.appendChild(elem);
+      return elem;
+    }
+
+  }
+
+  window.ContributorsView = ContributorsView;
+}
diff --git a/Week3/homework/js-exercises/PROJECT/hyf.png b/Week3/homework/js-exercises/PROJECT/hyf.png
new file mode 100644
index 0000000000000000000000000000000000000000..76bc5a13b4a53ea97a6c09ca5fe399f40ab20e4e
GIT binary patch
literal 9116
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
GkN*WepL25n

literal 0
HcmV?d00001

diff --git a/Week3/homework/js-exercises/PROJECT/index.html b/Week3/homework/js-exercises/PROJECT/index.html
new file mode 100644
index 000000000..dbd26013a
--- /dev/null
+++ b/Week3/homework/js-exercises/PROJECT/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="theme-color" content="#000000">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <link rel="apple-touch-icon" href="./hyf.png">
+  <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+  <title>HYF-GITHUB</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <div id="root">
+    <div class="mainTitle">
+      <h1><span>HYF Repositories</span></h1>
+      <select id="repositories"></select>
+    </div>
+    <div class="containers">
+      <section class="repo-container"></section>
+      <section class="contributors-container">
+        <div id="contributions">Contributions</div>
+      </section>
+    </div>
+  </div>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="./index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Week3/homework/js-exercises/PROJECT/index.js b/Week3/homework/js-exercises/PROJECT/index.js
new file mode 100644
index 000000000..62bb0d833
--- /dev/null
+++ b/Week3/homework/js-exercises/PROJECT/index.js
@@ -0,0 +1,255 @@
+'use strict';
+
+{
+  //JS3-2 START Select Listener
+  const selectEl = document.querySelector("#repositories");
+  selectEl.addEventListener("change", (event) => {
+    displaySelectedRepo(event.target.value);
+    displayContributors(event.target.value);  //JS3-2 After all the Li Elements are created keeps only the selected one visible.
+  });
+
+  //JS3-2 END Select Listener
+  /* JS3-2 Modified function (Now with fetch)
+  function fetchJSON(url, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status <= 299) {
+        cb(null, xhr.response);
+      } else {
+        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => cb(new Error('Network request failed'));
+    xhr.send();
+  } */
+
+  //JS3-3 START New fetchJSON function that uses fetch instead of xhr, and async functions
+  async function fetchJSON(url, cb) {
+    try {
+      console.log("Reached point");
+      const res = await axios.get(url);
+      cb(null, res.data);
+      fetchContributors(contributorsURLArray)  //JS3-3 After the repos, comes the list of contributors
+    } catch(err){
+      cb(new Error(`Network error.`));
+    }
+  } 
+  //JS3-2 END
+
+  //JS3-2 START New  function that uses fetch instead of xhr
+  async function fetchContributors(contrData) {
+    try{
+    await Promise.all(contrData.map(async function(dato) {
+      let res = await axios.get(dato.url);
+      contributorsAux(null, res.data, dato.id);
+    }))
+    } catch(err){
+      console.log("One URL failed...");
+    }
+  }
+  //JS3-2 END
+
+  function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+
+    Object.entries(options).forEach(([key, value]) => {
+      // JS3-1 START Modified Lines
+      if (key === 'errText') {
+        elem.innerHTML = value;
+      } else {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        if (key === 'text') {
+          innerSpan.innerHTML += "<strong>Repository:</strong>  ";
+          innerLink.target = "_blank";
+          innerLink.innerText = value;
+          innerLink.href = options.url;
+          innerSpan.appendChild(innerLink);
+          innerSpan.innerHTML += "<br/>";
+        } else if (key === 'desc') {
+          innerSpan.innerHTML += "<strong>Description:</strong> " + value + "<br/>";
+        } else if (key === 'forks') {
+          innerSpan.innerHTML += "<strong>Forks:</strong>           " + value + "<br/>";
+        } else if (key === 'update') {
+          innerSpan.innerHTML += "<strong>Update:</strong>        " + formatDate(value);
+        } else if (key === 'url') {
+          //displaySelectedRepo();
+        }
+        // JS3-1 END Modified Lines
+        else {
+          elem.setAttribute(key, value);
+        }
+        elem.appendChild(innerSpan);
+      }
+    });
+    parent.appendChild(elem);
+    return elem;
+  }
+
+  //JS3-2 Function that creates and append only for contributors
+  function createAndAppendContributors(name, parent, options = {}) {
+    const elem = document.createElement(name);
+    const contrDiv = document.createElement("div");
+    contrDiv.setAttribute("class", "contributorData");
+    const contributorURL = options.url;
+
+    Object.entries(options).forEach(([key, value]) => {
+      const innerSpan = document.createElement("span");
+      const innerLink = document.createElement("a");
+      
+      if (key === 'img') {
+        const contImage = document.createElement("img");
+        contImage.src = value;
+        contrDiv.appendChild(contImage);
+      } else if (key === 'text') {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        innerLink.target = "_blank";
+        innerLink.innerText = value;
+        innerLink.href = contributorURL;
+        innerSpan.appendChild(innerLink);
+        contrDiv.appendChild(innerSpan);
+      } else if (key === 'contr') {
+        const innerSpan = document.createElement("span");
+        innerSpan.setAttribute("class", "numberContributions");
+        innerSpan.innerHTML = value;
+        contrDiv.appendChild(innerSpan);
+      }
+    });
+    elem.appendChild(contrDiv);
+    parent.appendChild(elem);
+    return elem;
+  }
+
+  // JS3-1 Modified line
+  function renderRepoDetails(repo, ul) {
+    contributorsURLArray.push({id: repo.id, url: repo.contributors_url});  //JS3-2 The contributors Array receives a new url.
+    createAndAppend('li', ul, {
+      text: repo.name, desc: repo.description, forks: repo.forks,
+      update: repo.updated_at, url: repo.html_url
+    });
+  }
+
+  // JS3-2 New Function that adds the li's for the contributors
+  function renderRepoContributorDetails(repo, ul) {
+    createAndAppendContributors('li', ul, {
+      img: repo.avatar_url, text: repo.login, contr: repo.contributions, url: repo.html_url
+    });
+  }
+
+  // JS3-1 START Function that formats the Dates
+  function formatDate(sentDate) {
+    let date = new Date(sentDate);
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    let seconds = date.getSeconds();
+    let ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    seconds = seconds < 10 ? '0' + seconds : seconds;
+    const strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
+    return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + ",  " + strTime;
+  }
+  // JS3-1 END
+  // JS3-1 START Function that sorts an array alphabetically
+  function sortArray(arrayToSort) {
+    arrayToSort.sort(function (a, b) {
+      if (a.name.toLowerCase() > b.name.toLowerCase()) {
+        return 1;
+      }
+      if (a.name.toLowerCase() < b.name.toLowerCase()) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+    });
+    return arrayToSort;
+  }
+  // JS3-1 END
+  // JS3-2 START Function that populates the Select Element
+  function populateSelect(repos){
+    selectEl.innerHTML = "";
+    repos.forEach((repo, i) => {
+      repositoriesOrder.push(repo.id);   // Here the reporitories of the ID's are stored in alphabetical order
+      selectEl.innerHTML += `<option value="${i}">${repo.name}</option>`;
+    })
+  }
+  // JS3-1 END
+
+    // JS3-2 START Function that verifies the position of the UL to be stored
+    function positionID(repositoryID, URLId){
+      let finalId = 0;
+      repositoryID.forEach((repo, i) => {
+        if(repo === URLId)
+          finalId = i;
+      })
+      return finalId;
+    }
+    // JS3-1 END
+
+  // JS3-2 START Function that displays the selected Element
+  function displaySelectedRepo(value = 0){
+    const liEls = document.querySelectorAll(".repo-container li");
+    if(liEls.length > 0){
+      liEls.forEach(listelement => {
+        listelement.style.display = "none";
+      })
+      liEls[value].style.display = "block";
+    } else
+      console.log("Houston, we got a problem...");
+  }
+  // JS3-2 END
+
+  // JS3-2 START Function that displays the selected Element contributors
+  function displayContributors(value = 0){
+    if(contributorsUl.length > 0){
+      contributorsUl.forEach(listelement => {
+        listelement.style.display = "none";
+      })
+      contributorsUl[value].style.display = "block";
+    } else
+      console.log("Houston, we got a problem...");
+  }
+  // JS3-2 END
+  
+  //JS3-2 Auxiliary function for the contributors display
+  function contributorsAux(err, contributors, id){
+    const root = document.querySelector('.contributors-container');
+    if (err) {
+      return new Error("A contributor URL failed...");
+    }
+    const ul = createAndAppend('ul', root);
+    contributorsUl[positionID(repositoriesOrder, id)] = ul;
+    contributors.forEach(contributor => renderRepoContributorDetails(contributor, ul));
+    displayContributors();  //JS3-2 After all the Li Elements are created, it keeps only the selected one visible.
+  }
+
+  function main(url) {
+    fetchJSON(url, (err, repos) => {
+      const root = document.querySelector('.repo-container');
+      if (err) {
+        createAndAppend('div', root, {
+          errText: err.message,   //JS3-1 Modified Line
+          class: 'alert-error',
+        });
+        return;
+      }
+      const ul = createAndAppend('ul', root);
+      repos = sortArray(repos);  //JS3-1 Sort the array of objects before displaying them
+      populateSelect(repos);  //JS3-2 Populate the Select element.
+      repos.forEach(repo => renderRepoDetails(repo, ul));
+      displaySelectedRepo();  //JS3-2 After all the Li Elements are created keeps only the selected one visible.
+      //fetchJSONContributors(contributorsURLArray)  //JS3-2 After the repos, comes the list of contributors
+    });
+  }
+
+  let repositoriesOrder= [];
+  let contributorsUl = [];  //JS3-2 List of Ul of contributors
+  let contributorsURLArray = [];  //JS3-2 Contributors URL Array
+  const HYF_REPOS_URL =
+    'https://api.github.com/orgs/HackYourFuture/repos?per_page=10';
+    window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/Week3/homework/js-exercises/PROJECT/style.css b/Week3/homework/js-exercises/PROJECT/style.css
new file mode 100644
index 000000000..08395db8c
--- /dev/null
+++ b/Week3/homework/js-exercises/PROJECT/style.css
@@ -0,0 +1,159 @@
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: underline;
+  color: blue;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+a:visited {
+  color: purple;
+}
+
+img{
+  width: 60px;
+  margin-right: 2vw;;
+}
+
+li {
+  margin: 3px;
+  padding: 3vh;
+  border-style: hidden;
+  border-color: rgb(194, 191, 191);
+  border-width: 2px;
+  box-shadow: 1px 1px 5px #7e7b7b;
+  list-style-type: none;
+}
+
+li span {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-family: sans-serif;
+  white-space: pre-wrap;
+}
+
+/*JS3-2 START Modified Text. Attributes for Select element */
+select {
+  margin-left: 15px;
+  height: 25px;
+  width: 200px;
+}
+/*JS3-2 END Modified Text. Helps to place the select element after the Title ina row. */
+
+section{
+  width: 50%;
+}
+
+.alert-error {
+  margin-top: 4px;
+  padding: 3vh;
+  background-color: rgb(248, 215, 218);
+  color: rgb(92, 60, 60);
+}
+
+/*JS3-2 START Modified Text. Div that contains two sections */
+.containers{
+  display: flex;  
+  flex-direction: row; 
+}
+/*JS3-2 END Modified Text. Div that contains two sections */
+
+.contributorData {
+  display: flex;  
+  flex-direction: row; 
+  align-items: center;
+}
+
+.contributorData a{
+  text-decoration: none;
+}
+
+.mainTitle{
+  display: flex;   /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  flex-direction: row; /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  justify-content: flex-start; /*JS3-2 Modified Text. Helps to place the select element after the Title in a row. */
+  align-items: baseline; /*JS3-2 Modified Text. Helps to place the select element after the Title ina row. */
+  background-color: rgb(63, 81, 181);
+  color: white;
+  font-family: sans-serif;
+  font-size: 50%;
+  padding: 3vh;
+}
+
+.mainTitle span {
+  font-weight: normal;
+}
+
+.numberContributions {
+  margin-left: auto;
+  padding: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
+  border-radius: 5px;
+  font-size: 12px;;
+  background-color: rgb(124, 111, 111);
+  color: white;
+}
+
+/* JS3-2 Line that separates the block style of the li span of the containers from the contributors. */
+.repo-container li span {
+  display: block;
+}
+
+#contributions {
+  margin: 3px;
+  padding: 3vh;
+  border-style: hidden;
+  border-color: rgb(194, 191, 191);
+  border-width: 2px;
+  border-bottom: none;
+  box-shadow: 1px 1px 5px #7e7b7b;
+  list-style-type: none;
+  color: rgb(165, 159, 159);
+}
+
+/* RESPONSIVENESS*/
+/* Mobile phones */
+@media screen and (max-width: 450px) {
+  section{
+    width: 100%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: column; 
+  }
+}
+
+/* RESPONSIVENESS*/
+/* TABLETS */
+@media screen and (min-width: 451px) and (max-width: 800px) {
+  section{
+    width: 50%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: row; 
+  }
+}
+
+/* RESPONSIVENESS*/
+/* LARGER SCREENS */
+@media screen and (min-width: 801px) {
+  section{
+    width: 50%;
+  }
+
+  .containers{
+    display: flex;  
+    flex-direction: row; 
+  }
+}
diff --git a/Week3/homework/js-exercises/RepoView.js b/Week3/homework/js-exercises/RepoView.js
new file mode 100644
index 000000000..647e01b4f
--- /dev/null
+++ b/Week3/homework/js-exercises/RepoView.js
@@ -0,0 +1,85 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class RepoView {
+    constructor(container) {
+      this.container = container;
+    }
+
+    update(state) {
+      if (!state.error) {
+        this.render(state.selectedRepo);
+      }
+    }
+
+    /**
+     * Renders the repository details.
+     * @param {Object} repo A repository object.
+     */
+    render(repos) {
+      // TODO: replace this comment and the console.log with your own code
+      const root = document.querySelector('#root');
+      this.refreshElements(root);  
+      const ul = this.createAndAppend('ul', root);
+      this.createAndAppend('li', ul, {
+        text: repos.name, desc: repos.description, forks: repos.forks,
+        update: repos.updated_at, url: repos.html_url
+      });
+    }
+
+    refreshElements(root){
+      const ulArray = document.querySelectorAll("ul");
+      if(ulArray.length > 0){
+        ulArray.forEach(ulElement => root.removeChild(ulElement))
+      }
+    }
+
+    createAndAppend(name, parent, options = {}) {
+      const elem = document.createElement(name);
+  
+      Object.entries(options).forEach(([key, value]) => {
+        const innerSpan = document.createElement("span");
+        const innerLink = document.createElement("a");
+        if (key === 'text') {
+          innerSpan.innerHTML += "<strong>Repository:</strong>  ";
+          innerLink.target = "_blank";
+          innerLink.innerText = value;
+          innerLink.href = options.url;
+          innerSpan.appendChild(innerLink);
+          innerSpan.innerHTML += "<br/>";
+        } else if (key === 'desc') {
+          innerSpan.innerHTML += "<strong>Description:</strong> " + value + "<br/>";
+        } else if (key === 'forks') {
+          innerSpan.innerHTML += "<strong>Forks:</strong>           " + value + "<br/>";
+        } else if (key === 'update') {
+          innerSpan.innerHTML += "<strong>Update:</strong>        " + this.formatDate(value);
+        } else if (key === 'url') {
+        } else {
+          elem.setAttribute(key, value);
+        }
+        elem.appendChild(innerSpan);
+      });
+      parent.appendChild(elem);
+      return elem;
+    }
+    
+    formatDate(sentDate) {
+      let date = new Date(sentDate);
+      let hours = date.getHours();
+      let minutes = date.getMinutes();
+      let seconds = date.getSeconds();
+      let ampm = hours >= 12 ? 'PM' : 'AM';
+      hours = hours % 12;
+      hours = hours ? hours : 12; // the hour '0' should be '12'
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+      const strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
+      return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + ",  " + strTime;
+    }
+
+  }
+
+  window.RepoView = RepoView;
+}