HackYourFuture · Jalalalattar · Jan 25, 2020 · Jan 26, 2020 · Feb 1, 2020
diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png b/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png
diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.html b/Week1/HomeWork/js-exercises/Project j3 w1/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">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <!-- image in the title bar of browser. -->
+  <link rel="icon" type="image/png" href="HYF.png">
+
+  <link rel="stylesheet" href="./style.css">
+  <title>PROJECT: Hack Your Repo I j3 w1</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.js b/Week1/HomeWork/js-exercises/Project j3 w1/index.js
@@ -0,0 +1,81 @@
+'use strict';
+{
+//  window.onload = () => main(HYF_REPOS_URL_ERROR); // to get ERROR
+//  const HYF_REPOS_URL_ERROR ='https://api.github.com/orgsX/HackYourFuture/repos?per_page=100';
+
+  window.onload = () => main(HYF_REPOS_URL);
+  const HYF_REPOS_URL ='https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  const root = document.querySelector('#root');
+
+  function fetchJSON(url, callback) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        callback(null, xhr.response);
+      } else {
+        callback(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => callback(new Error('Network request failed'));
+    xhr.send();
+  }
+
+  function main(url) {
+    createAndAppend('img', root, { src: 'HYF.png' });
+    createAndAppend('h3', root, { text: 'HYF Repositories' });
+    fetchJSON(url, (error, response) => {
+      if (error) {
+        createAndAppend('div', root, {
+          text: error.message,
+          class: 'alert-error',
+        });
+        return;
+      }
+      const ul = createAndAppend('ul', root);
+      response.sort((curRepo, nextRepo) => curRepo.name.localeCompare(nextRepo.name))
+        // Display the first 10 items
+        .slice(0, 10)
+        .forEach(repo => repoDetails(repo, ul))
+    });
+  }
+
+  function repoDetails(repo, ul) {
+    const li = createAndAppend('li', ul);
+    const table = createAndAppend('table', li);
+    const titles = ['Repository:', 'Description:', 'Forks:', 'Updated:'];
+    const dataKeys = ['name', 'description', 'forks', 'updated_at'];
+
+    for (let i = 0; i < titles.length; ++i) {
+
+      const tr = createAndAppend('tr', table);
+      createAndAppend('th', tr, { text: titles[i] });
+      if (i > 0 ){
+        createAndAppend('td', tr, { text: repo[dataKeys[i]] });
+      } else {
+        const td = createAndAppend('td', tr);
+        createAndAppend('a', td, {
+          href: repo.html_url,
+          text: repo.name,
+          target: '_blank',
+        });
+      }
+    }
+  }
+
+
+  function createAndAppend(name, parent, options = {}) {
+    const el = document.createElement(name);
+    parent.appendChild(el);
+    Object.entries(options).forEach(([key, value]) => {
+      if (key === 'text') {
+        el.textContent = value;
+      } else {
+        el.setAttribute(key, value);
+      }
+    });
+    return el;
+  };
+
+};
diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/style.css b/Week1/HomeWork/js-exercises/Project j3 w1/style.css
@@ -0,0 +1,57 @@
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+img{
+  float: left;
+  width: 25px; 
+  height: 25px;
+  border-radius: 0 50% 50% 50%;
+}
+body {
+  padding: 25px;
+}
+h3 {
+  font-weight: lighter;
+  background-color: #253dc5;
+  padding: 35px;
+  padding-left: 25px;
+  color: whitesmoke;
+
+}
+table {
+  width: 100%;
+  margin-top: 3px;
+  padding: 20px;
+  border: 1px solid rgb(240, 240, 240) ;
+  border-radius: 4px;
+  box-shadow: 0px 3px 3px  rgb(179, 178, 178) ;
+  color: #333;
+}
+th {
+  width: 10%;
+  padding: 3px;
+}
+li:nth-child(even) {
+  background: rgb(224, 224, 224);
+}
+li {
+  list-style: none;
+}
+
+.alert-error {
+  margin-top: 2px;
+  padding: 20px;
+  padding-left: 25px;
+  border-radius: 6px;
+  color: brown;
+  background-color: #f0c6ca;
+}
+@media (max-width: 650px) {
+  table, header {
+    width: 100%;
+    margin: 0 auto;
+  }
+}
diff --git a/Week1/HomeWork/js-exercises/ex-1.html b/Week1/HomeWork/js-exercises/ex-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Make a new friend</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <button id="btn">Click here</button>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="ex-1.js"></script>
+  </body>
+</html>
diff --git a/Week1/HomeWork/js-exercises/ex-1.js b/Week1/HomeWork/js-exercises/ex-1.js
@@ -0,0 +1,42 @@
+'use strict';
+
+// inside the same file write two functions:
+// one with XMLHttpRequest()
+
+const button = document.querySelector('#btn');
+
+const serverRequest = () => {
+  const xhr = new XMLHttpRequest();
+
+  xhr.responseType = 'json';
+
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      console.log(xhr.response);
+    } else {
+      console.error();
+    }
+  };
+  xhr.open('GET', 'https://www.randomuser.me/api');
+  xhr.send();
+};
+
+button.addEventListener('click', serverRequest);
+
+// and the other with :
+// axios
+
+const axiosRequest = () => {
+
+  axios.get('https://www.randomuser.me/api')
+
+    .then(function(response) {
+      console.log('this apparently was seccesfull',response.data);
+    })
+    .catch(function(error) {
+      console.log('there are some errors',error);
+    })
+    .finally(function(){
+        console.log('let me know what happend')
+    })
+};
diff --git a/Week1/HomeWork/js-exercises/ex-2.html b/Week1/HomeWork/js-exercises/ex-2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Programmer humor</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <img id="img">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="ex-2.js"></script>
+  </body>
+</html>
diff --git a/Week1/HomeWork/js-exercises/ex-2.js b/Week1/HomeWork/js-exercises/ex-2.js
@@ -0,0 +1,47 @@
+'use strict';
+
+// one with XMLHttpRequest
+
+const humorRequest = () => {
+    const xhr = new XMLHttpRequest();
+
+    const img = document.querySelector('#img');
+
+    xhr.responseType = 'json';
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        console.log(xhr.response);
+        img.setAttribute('src', xhr.response.img);
+      } else {
+        console.error();
+      }
+    };
+    xhr.open('GET', 'https://xkcd.now.sh/?comic=614 ');
+    xhr.send();
+  };
+
+  humorRequest();
+
+// and the other with :
+// axios
+
+  const requestHumor = () => {
+
+    const img = document.querySelector('#img');
+
+    axios
+      .get('https://xkcd.now.sh/?comic=614')
+
+      .then(function(response) {
+        console.log('this apparently was seccesfull',response);
+        img.setAttribute('src', response.data.img);
+      })
+      .catch(function(error) {
+        console.log('there are some errors', error);
+      })
+      .finally(function(){
+        console.log('let me know what happend')
+      })
+  };
+  requestHumor();
diff --git a/Week1/HomeWork/js-exercises/ex-3.html b/Week1/HomeWork/js-exercises/ex-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Dog photo gallery</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <ul id="ulList"></ul>
+    <button id="normal">form normal function (XMLHttpRequest())</button>
+
+    <button id="axios">this button with axios</button>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="ex-3.js"></script>
+  </body>
+</html>
diff --git a/Week1/HomeWork/js-exercises/ex-3.js b/Week1/HomeWork/js-exercises/ex-3.js
@@ -0,0 +1,55 @@
+
+'use strict';
+
+// one with XMLHttpRequest()
+
+const btnNormal = document.querySelector('#normal');
+
+const randomDogNormal = () => {
+  const xhr = new XMLHttpRequest();
+  const ul = document.querySelector('#ulList');
+
+  xhr.responseType = 'json';
+
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      const li = document.createElement('li');
+      const img = document.createElement('img');
+      img.setAttribute('src', xhr.response.message);
+      li.appendChild(img);
+      ul.appendChild(li);
+    } else {
+      console.log(`${xhr.status}`);
+    }
+  };
+
+  xhr.open('GET', 'https://dog.ceo/api/breeds/image/random');
+  xhr.send();
+};
+btnNormal.addEventListener('click', randomDogNormal);
+
+// and the other with :
+// axios
+
+const btnAxios = document.querySelector('#axios');
+
+const randomDogAxios = () => {
+  const ul = document.querySelector('#ulList');
+
+  axios.get('https://dog.ceo/api/breeds/image/random')
+
+    .then(function(response) {
+      const li = document.createElement('li');
+      const img = document.createElement('img');
+      img.setAttribute('src', response.data.message);
+      li.appendChild(img);
+      ul.appendChild(li);
+    })
+    .catch(function(error) {
+        console.log('there are some errors', error);
+    })
+    .finally(function(){
+        console.log('let me know what happend')
+    })
+};
+btnAxios.addEventListener('click', randomDogAxios);