samravan · n4cr · Dec 29, 2020 · Dec 12, 2020 · Dec 12, 2020 · Dec 12, 2020
diff --git a/Week1/homework/code along/app.js b/Week1/homework/code along/app.js
@@ -0,0 +1,40 @@
+const number = document.getElementById('number');
+const fact = document.getElementById('fact');
+
+number.addEventListener('input', addText);
+
+function addText(){
+    const num = number.value;
+    const URL = `http://numbersapi.com/${num}`;
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', URL, true);
+    xhr.send();
+
+    // 4. This will be called after the response is received
+    xhr.onload = function() {
+      if (xhr.status != 200 && xhr.status != 200) {
+        // analyze HTTP status of the response
+        console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
+      } else {
+        // show the result
+        let response = xhr.responseText;
+        fact.style.display = 'block';
+        fact.textContent = response;
+      }
+    };
+
+    xhr.onprogress = function(event) {
+      if (event.lengthComputable) {
+        console.log(`Received ${event.loaded} of ${event.total} bytes`);
+      } else {
+        console.log(`Received ${event.loaded} bytes`); // no Content-Length
+      }
+    };
+
+    xhr.onerror = function() {
+      console.log('Request failed');
+    };
+
+
+}
diff --git a/Week1/homework/code along/index.html b/Week1/homework/code along/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number API</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+  </head>
+
+  <body class="bg-secondary">
+    <div class="container mx-auto text-center mt-4" style="width: 400px;">
+      <div class="card bg-primary text-white">
+        <div class="card-body">
+          <h5 class="card-title">Number Facts</h5>
+          <label class="mb-2" for="number">Please enter number in order to find out</label>
+          <br>
+          <input id="number" type="number" placeholder="Enter Number">
+          <p id="fact" class="mt-4" style="display: none;"></p>
+        </div>
+
+
+      </div>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+    <script src="app.js"></script>
+  </body>
+
+</html>
diff --git a/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js b/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js
@@ -0,0 +1,51 @@
+const URL = 'https://www.randomuser.me/api';
+
+function requestWithXHR(URL){
+const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
+const xhr = new XMLHttpRequest();
+xhr.open('GET', URL, true);
+xhr.send();
+
+// 4. This will be called after the response is received
+xhr.onload = function() {
+  if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
+    console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
+  } else { // show the result
+    const response = JSON.parse(xhr.responseText);
+    console.log(response.results[0].gender);
+  }
+};
+
+xhr.onprogress = function(event) {
+  if (event.lengthComputable) {
+    console.log(`Received ${event.loaded} of ${event.total} bytes`);
+  } else {
+    console.log(`Received ${event.loaded} bytes`); // no Content-Length
+  }
+
+};
+
+xhr.onerror = function() {
+  console.log("Request failed");
+};
+};
+
+function requestWithAxios(URL){
+  const axios = require('axios').default;
+  axios.get(URL)
+  .then(function (response) {
+    // handle success
+    console.log(response.data.results[0].gender);
+  })
+  .catch(function (error) {
+    // handle error
+    console.log("Request failed");
+  })
+  .then(function () {
+    // always executed
+  });
+
+};
+
+requestWithXHR(URL);
+requestWithAxios(URL);
diff --git a/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js b/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js
@@ -0,0 +1,53 @@
+const URL = 'https://xkcd.now.sh/?comic=latest';
+const image1 = document.getElementById('image1');
+const image2 = document.getElementById('image2');
+
+function requestWithXHR(URL){
+const xhr = new XMLHttpRequest();
+xhr.open('GET', URL, true);
+xhr.send();
+
+// 4. This will be called after the response is received
+xhr.onload = function() {
+  if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
+    console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
+  } else { // show the result
+    const response = JSON.parse(xhr.responseText);
+    console.log(response);
+    image1.src = response.img;
+  }
+};
+
+xhr.onprogress = function(event) {
+  if (event.lengthComputable) {
+    console.log(`Received ${event.loaded} of ${event.total} bytes`);
+  } else {
+    console.log(`Received ${event.loaded} bytes`); // no Content-Length
+  }
+
+};
+
+xhr.onerror = function() {
+  console.log("Request failed");
+};
+};
+
+function requestWithAxios(URL){
+  axios.get(URL)
+  .then(function (response) {
+    // handle success
+    console.log(response.data);
+    image2.src = response.data.img;
+  })
+  .catch(function (error) {
+    // handle error
+    console.log("Request failed");
+  })
+  .then(function () {
+    // always executed
+  });
+
+};
+
+requestWithXHR(URL);
+requestWithAxios(URL);
diff --git a/Week1/homework/masoud/js-exercises/Ex2.html b/Week1/homework/masoud/js-exercises/Ex2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <img id="image1">
+  <img id="image2">
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="Ex2-ProgrammerHumor.js"></script>
+</body>
+</html>
diff --git a/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js b/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js
@@ -0,0 +1,70 @@
+const URL = 'https://dog.ceo/api/breeds/image/random';
+const xmlBtn = document.getElementById('xmlBTN');
+const axiosBtn = document.getElementById('axiosBTN');
+const ulElm = document.getElementById('list');
+const imgSize = '300px';
+ulElm.style.display = 'flex';
+ulElm.style.flexWrap = 'wrap';
+
+xmlBtn.addEventListener('click',requestWithXHR);
+axiosBtn.addEventListener('click',requestWithAxios);
+
+
+function requestWithXHR() {
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', URL, true);
+  xhr.send();
+
+  // 4. This will be called after the response is received
+  xhr.onload = function() {
+    if (xhr.status != 200 && xhr.status != 200) {
+      // analyze HTTP status of the response
+      console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
+    } else {
+      // show the result
+      const response = JSON.parse(xhr.responseText);
+      const liElm = document.createElement('li');
+      const imgElm = document.createElement('img');
+      imgElm.src = response.message;
+      imgElm.style.height = imgSize;
+      liElm.style.listStyle = 'none';
+      liElm.appendChild(imgElm);
+      ulElm.appendChild(liElm);
+    }
+  };
+
+  xhr.onprogress = function(event) {
+    if (event.lengthComputable) {
+      console.log(`Received ${event.loaded} of ${event.total} bytes`);
+    } else {
+      console.log(`Received ${event.loaded} bytes`); // no Content-Length
+    }
+  };
+
+  xhr.onerror = function() {
+    console.log('Request failed');
+  };
+}
+
+
+
+function requestWithAxios(){
+  axios.get(URL)
+  .then(function (response) {
+    // handle success
+    const liElm = document.createElement('li');
+    const imgElm = document.createElement('img');
+    imgElm.src = response.data.message;
+    imgElm.style.height = imgSize;
+    liElm.style.listStyle = 'none';
+    liElm.appendChild(imgElm);
+    ulElm.appendChild(liElm);
+  })
+  .catch(function (error) {
+    // handle error
+    console.log("Request failed");
+  })
+  .then(function () {
+    // always executed
+  });
+};
diff --git a/Week1/homework/masoud/js-exercises/Ex3.html b/Week1/homework/masoud/js-exercises/Ex3.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <ul id="list"></ul>
+  <button id="xmlBTN">Run as XMLHttpRequest</button>
+  <button id="axiosBTN">Run as axios</button>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="Ex3-DogPhotoGallery.js"></script>
+</body>
+</html>
diff --git a/hackyourrepo-app/Masoud/week1/css/style.css b/hackyourrepo-app/Masoud/week1/css/style.css
@@ -0,0 +1,92 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body{
+  background-color: #313267;
+  font-size: 14px;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  width: 100vw;
+  height: calc(100vh - 20px);
+  overflow: hidden;
+}
+
+header{
+  height: 15%;
+  background-color:#313267 ;
+}
+
+
+header a{
+  height: 100%;
+  display: block;
+ text-align: center;
+}
+
+img{
+  height: inherit;
+  padding: 5px;
+}
+
+.container{
+  background-color: #6ed5e7;
+  width: calc(95% - 5px);
+  margin: auto;
+  height: 85%;
+}
+
+.selector{
+  padding: 10px;
+  font-size: 1.7em;
+  background-color: rgb(252, 103, 49);
+  color: white;
+}
+
+#repo-items{
+  font-size: 16px;
+  font-family: sans-serif;
+  font-weight: 700;
+  color: #444;
+  padding: .6em 1.4em .5em .8em;
+  max-width: 100%; /* useful when width is set to anything other than 100% */
+  margin: 0px auto;
+  border: 1px solid #aaa;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: #fff;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.des-con{
+  display: flex;
+  padding: 10px;
+}
+
+.description, .contributers{
+  width: 50%;
+  border: 3px rgb(223, 152, 152) solid;
+  margin: 5px;
+
+}
+
+table{
+  border-spacing: 10px;
+}
+
+@media only screen and (max-width:550px){
+  .des-con{
+    flex-direction: column;
+    align-items: center;
+  }
+  .description, .contributers{
+    width: 90%;
+  }
+  .selector{
+    text-align: center;
+  }
+  #repo-items{
+    margin-top: 10px;
+  }
+}
diff --git a/hackyourrepo-app/Masoud/week1/img/favicon.ico b/hackyourrepo-app/Masoud/week1/img/favicon.ico
diff --git a/hackyourrepo-app/Masoud/week1/img/hyf.png b/hackyourrepo-app/Masoud/week1/img/hyf.png