SocialHackersClass10 · ligopsychakis-michalis · Feb 21, 2020 · Mar 1, 2020 · Mar 1, 2020 · Mar 1, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/Week1/.DS_Store b/Week1/.DS_Store
diff --git a/Week1/homework/.DS_Store b/Week1/homework/.DS_Store
diff --git a/Week1/homework/hack-repo-1/.DS_Store b/Week1/homework/hack-repo-1/.DS_Store
diff --git a/Week1/homework/hack-repo-1/hyf.png b/Week1/homework/hack-repo-1/hyf.png
diff --git a/Week1/homework/hack-repo-1/index.html b/Week1/homework/hack-repo-1/index.html
@@ -0,0 +1,23 @@
+<!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>
+  <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/Week1/homework/hack-repo-1/index.js b/Week1/homework/hack-repo-1/index.js
@@ -0,0 +1,67 @@
+'use strict';
+
+{
+  function fetchJSON(url, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status <= 299) {
+        cb(false, 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);
+    parent.appendChild(elem);
+    Object.entries(options).forEach(([key, value]) => {
+      if (key === 'text') {
+        elem.innerHTML = value;
+      } else {
+        elem.setAttribute(key, value);
+      }
+    });
+    return elem;
+  }
+
+  function renderRepoDetails(repo, ul) {
+    createAndAppend('li', ul, {
+      text : `<strong>Repository:</strong> <a href = "${repo.html_url}">${repo.name}</a><br>
+              <strong>Description:</strong> ${repo.description}<br>
+              <strong>Forks:</strong> ${repo.forks}<br>
+              <strong>Uptade:</strong> ${repo.updated_at.slice(0,4)}/${repo.updated_at.slice(5,7)}/${repo.updated_at.slice(8,10)}, ${repo.updated_at.slice(11,19)}`
+    });
+  }
+
+  function main(url) {
+    createAndAppend("p" , root, { text : "HYF Repositories" });  //append the header on DOM
+
+    fetchJSON(url, (err, repos) => {
+      const root = document.getElementById('root');
+      if (err) {
+        createAndAppend('div', root, {
+          text: err.message,
+          class: 'alert-error',
+        });
+        return;
+      }
+      const ul = createAndAppend('ul', root);
+      sortByName(repos);  
+      repos.forEach(repo => renderRepoDetails(repo, ul));
+    });
+  }
+
+  //function to sort the repos based on their names
+  function sortByName(repos){
+    repos.sort((a , b) => (a.name > b.name)? 1 : -1);
+  } 
+
+
+  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/hack-repo-1/style.css b/Week1/homework/hack-repo-1/style.css
@@ -0,0 +1,43 @@
+.alert-error {
+  background-color: #f8d7da;
+  color: #721c24;
+  padding: 20px 30px;
+  border-radius: 5px;
+}
+
+#root{
+  font-family: sans-serif;
+  font-size: 1.2em;
+  width: 80vw;
+  margin-left: auto;
+  margin-right: auto;
+  letter-spacing: 0.3px;
+}
+
+li{
+  list-style: none;
+  line-height: 1.5em;
+  margin-bottom: 5px;
+  padding: 30px;
+  box-shadow: 0px 4px 8px grey;
+}
+
+ul{
+  padding: 0;
+  margin: 0;
+}
+
+p{
+  background-color: #3f51b5;
+  color: white;
+  padding: 30px;
+  letter-spacing: 1px;
+  margin-bottom: 5px;
+}
+
+@media all and (max-width:499px){
+  #root{
+    width: 93vw;
+    font-size: 1em;
+  }
+}
diff --git a/Week1/homework/js-exercises/dog-photo.js b/Week1/homework/js-exercises/dog-photo.js
@@ -0,0 +1,36 @@
+//render dogs with XHR
+function dogPhotosXHR(){
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET", "https://dog.ceo/api/breeds/image/random", true);
+    xhr.send();
+    xhr.addEventListener("load", () => {
+        if (xhr.status === 200){
+            const res = JSON.parse(xhr.response);
+            //append img in a new <li> 
+            const li = document.createElement("li");
+            li.innerHTML = `<img src = '${res.message}' width= 250 height= 250 style= 'margin: 3px'>`;
+            document.getElementById("list").appendChild(li);
+        }else { console.log("Error on request..."); }
+    })
+
+    xhr.addEventListener("error", () => console.log("Error on request..."))
+}
+
+document.getElementById("btn1").addEventListener("click", dogPhotosXHR);
+
+
+
+//render dogs with Axios
+function dogPhotosAxios(){
+    axios
+        .get('https://dog.ceo/api/breeds/image/random')
+        .then(res => {
+            //append img in a new <li>
+            const li = document.createElement("li");
+            li.innerHTML = `<img src = '${res.data.message}' width= 250 height= 250 style= 'margin: 3px'>`;
+            document.getElementById("list").appendChild(li);
+        })
+        .catch(err => console.error(err));
+}
+
+document.getElementById("btn2").addEventListener("click", dogPhotosAxios); 
diff --git a/Week1/homework/js-exercises/index.html b/Week1/homework/js-exercises/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Random Dogs</title>
+</head>
+<body>
+    <button id="btn1"><h1>Show Dog XHR</h1></button>
+    <button id="btn2"><h1>Show Dog Axios</h1></button>
+    <br><br><br>
+    <ul id="list" style="list-style:none; display: flex; flex-wrap: wrap;"></ul>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="dog-photo.js"></script>
+</body>
+</html>
diff --git a/Week1/homework/js-exercises/programmer-humor.js b/Week1/homework/js-exercises/programmer-humor.js
@@ -0,0 +1,53 @@
+// //API with XMLHttpRequest
+// function apiXHR(){
+//     let xhr = new XMLHttpRequest();
+
+//     xhr.open("GET", "https://xkcd.com/info.0.json", true);
+
+//     xhr.send();
+
+//     xhr.addEventListener("load", () => {
+//         if (xhr.status === 200){
+//             res = JSON.parse(xhr.responseText);
+//             console.log(res);
+//             //render img on DOM
+//             const body = document.body;
+//             const img = document.createElement("img");
+//             img.src = res.img;
+//             body.appendChild(img);
+//         }else { console.log("Error on request...") }
+//     });
+
+//     xhr.addEventListener("error", () => console.log("Error on request..."));
+// }
+
+// apiXHR();
+
+
+// //API with Axios
+// function apiAxios(){
+//     axios
+//         .get("https://xkcd.com/info.0.json")
+//         .then(res => {
+//             console.log(res.data)
+//             //render img on DOM
+//             const body = document.body;
+//             const img = document.createElement("img");
+//             img.src = res.data.img;
+//             body.appendChild(img);
+//         })
+//         .catch(err => console.log(err));
+// }
+
+// apiAxios();
+
+
+
+async function asyncAwait (){
+    try{
+    let res = await fetch("https://xkcd.com/info.0.json");
+    console.log(res.data);
+    }catch(err) { console.error(err) };  
+}
+
+asyncAwait();
diff --git a/Week1/homework/js-exercises/who-here.js b/Week1/homework/js-exercises/who-here.js
@@ -0,0 +1,30 @@
+//API call with XMLHttpRequest
+function newFriendXhr(){
+    let xhr = new XMLHttpRequest();
+
+    xhr.open('GET', 'https://www.randomuser.me/api', true);
+
+    xhr.send();
+
+    xhr.addEventListener("load", () => {
+        if (xhr.status === 200){
+            res = JSON.parse(xhr.response);
+            console.log((res.results));
+        }else{console.log("Error on request...")}
+    })
+
+    xhr.addEventListener("error", () => console.log("Error on request..."));
+}
+
+newFriendXhr();
+
+
+//API call with Axios
+function newFriendAxios(){
+    axios
+        .get('https://www.randomuser.me/api')
+        .then(res => console.log(res.data.results))
+        .catch(err => console.log(err));
+}
+
+newFriendAxios();
diff --git a/Week1/homework/number-facts/index.html b/Week1/homework/number-facts/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Numbers & Years Facts</title>
+    <!-- bootsrap_4 css -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <!-- some css -->
+    <style>
+        body{
+            -webkit-touch-callout: none; 
+            -webkit-user-select: none; 
+            -khtml-user-select: none; 
+            -moz-user-select: none; 
+            -ms-user-select: none; 
+            user-select: none; 
+        }
+        .fact,#input{
+            display: none;
+        }
+        .container{
+            width: 30vw;
+        }
+        @media all and (max-width: 1000px) {
+            .container{
+                width: 50vw;
+            }
+        }   
+        @media all and (max-width: 550px) {
+            .container{
+                width: 90vw;
+            }
+        }  
+    </style>
+</head>
+<body class="bg-dark">
+    <div class="container bg-primary text-white mt-2 mt-sm-5 p-4">
+        <h1 class="text-center">Numbers & Years Facts</h1>
+        <p>Enter a <strong>number</strong> or a <strong>year</strong>, take and random <strong>Fact</strong>...</p>
+        <button id="btn-numbers" class="text-white bg-info mr-2"><strong>Numbers</strong></button>
+        <button id="btn-years" class="text-white bg-warning"><strong>Years</strong></button>
+        <input id="input" type="number" class="form-control mt-3">
+        <div class="fact p-3" >
+            <h4 id="fact-title"></h4>
+            <p id="fact-para"></p>
+        </div>             
+    </div>
+</div>
+    <script src="num-facts.js"></script>
+</body>
+</html>