samravan · n4cr · Dec 21, 2020 · Dec 13, 2020 · Dec 13, 2020 · Dec 13, 2020
diff --git a/Week1/homework/js-exercises/dogGallery.js b/Week1/homework/js-exercises/dogGallery.js
@@ -0,0 +1,59 @@
+const XMLBtn = document.getElementById('btn1');
+const AxiosBtn = document.getElementById('btn2');
+
+function xhrMethod() {
+    const xhr = new XMLHttpRequest();
+    const li = document.createElement('li');
+    const image = document.createElement('img');
+    const ul = document.getElementById('list');
+    const url = 'https://dog.ceo/api/breeds/image/random'
+    xhr.open('GET', url);
+    xhr.send();
+    xhr.onreadystatechange = processRequest;
+
+    ul.appendChild(li.appendChild(image))
+
+    function processRequest(e) {
+        if(xhr.readyState == 4 && xhr.status == 200) {
+            let response = JSON.parse(xhr.responseText);
+            image.src = response.message;
+            image.style.width = '300px'
+            image.style.height = '300px'
+            image.style.margin = '5px'
+
+        };
+    };
+    xhr.onerror = function() {
+        if (xhr.status != 200) {
+            alert (`Error ${xhr.status}: ${xhr.statusText}`);
+        };
+    };
+
+    };
+
+XMLBtn.addEventListener('click', xhrMethod);
+
+
+
+function axiosMethod() {
+    const li = document.createElement('li');
+    const image = document.createElement('img');
+    const ul = document.getElementById('list');
+    ul.appendChild(li.appendChild(image))
+    axios
+    .get('https://dog.ceo/api/breeds/image/random')
+    .then(function(response) {
+
+        image.src = response.data.message;
+        image.style.width = '300px'
+        image.style.height = '300px'
+        image.style.margin = '5px'
+
+    })
+    .catch(function(error) {
+        console.log(error)
+    });
+}
+
+
+AxiosBtn.addEventListener('click', axiosMethod);
diff --git a/Week1/homework/js-exercises/getandomUser.js b/Week1/homework/js-exercises/getandomUser.js
@@ -0,0 +1,40 @@
+function xhrMethod() {
+const xhr = new XMLHttpRequest();
+const url = 'https://www.randomuser.me/api'
+
+xhr.open('GET', url);
+xhr.send();
+
+xhr.onreadystatechange = processRequest;
+
+function processRequest(e) {
+    if(xhr.readyState == 4 && xhr.status == 200) {
+        let respons = JSON.parse(xhr.responseText);
+        console.log(respons)
+    }
+}
+
+xhr.onerror = function() {
+    if (xhr.status != 200) {
+        alert (`Error ${xhr.status}: ${xhr.statusText}`)
+    }
+}
+
+}
+
+
+const axios = require('axios');
+function axiosMethod() {
+    axios
+    .get('https://www.randomuser.me/api')
+    .then(function(response) {
+        console.log(response.data);
+    })
+    .catch(function(error) {
+        console.log(error)
+    });
+}
+
+
+axiosMethod();
+xhrMethod();
diff --git a/Week1/homework/js-exercises/humor.js b/Week1/homework/js-exercises/humor.js
@@ -0,0 +1,42 @@
+
+
+function xhrMethod() {
+    const xhr = new XMLHttpRequest();
+    const url = 'https://xkcd.now.sh/?comic=latest'
+    xhr.open('GET', url);
+    xhr.send();
+    xhr.onreadystatechange = processRequest;
+    function processRequest(e) {
+        if(xhr.readyState == 4 && xhr.status == 200) {
+            let response = JSON.parse(xhr.responseText);
+            document.getElementsByTagName('img').src = response.img;
+            console.log(response);
+        };
+    };
+    xhr.onerror = function() {
+        if (xhr.status != 200) {
+            alert (`Error ${xhr.status}: ${xhr.statusText}`);
+        };
+    };
+    };
+
+    xhrMethod();
+
+
+
+
+
+function axiosMethod() {
+    axios
+    .get('https://xkcd.now.sh/?comic=latest')
+    .then(function(response) {
+        console.log(response.data);
+        document.getElementsByTagName('img').src = response.data.img;
+    })
+    .catch(function(error) {
+        console.log(error)
+    });
+}
+
+
+axiosMethod();
diff --git a/Week1/homework/js-exercises/index.html b/Week1/homework/js-exercises/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dog Gallery</title>
+</head>
+<body>
+    <div class="container">
+        <button id="btn1">XMLHttpRrquest</button>
+        <button id="btn2">Axios</button>
+        <ul id="list"></ul>
+
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="dogGallery.js"></script>
+</body>
+</html>
diff --git a/Week2/LESSONPLAN.md → Week2/AmirHossein/LESSONPLAN.md b/Week2/LESSONPLAN.md → Week2/AmirHossein/LESSONPLAN.md
diff --git a/Week2/MAKEME.md → Week2/AmirHossein/MAKEME.md b/Week2/MAKEME.md → Week2/AmirHossein/MAKEME.md
diff --git a/Week2/README.md → Week2/AmirHossein/README.md b/Week2/README.md → Week2/AmirHossein/README.md
diff --git a/Week2/assets/week2.png → Week2/AmirHossein/assets/week2.png b/Week2/assets/week2.png → Week2/AmirHossein/assets/week2.png
diff --git a/Week2/AmirHossein/homework/js-exercises/johnWho.js b/Week2/AmirHossein/homework/js-exercises/johnWho.js
@@ -0,0 +1,16 @@
+const getAnonName = (firstName) => {
+    return  new Promise((resolve, reject) => {
+        const fullName = `${firstName} Doe`
+        resolve(fullName)
+        console.log(fullName)
+
+
+
+        reject(new Error("You didn't pass in a first name!"))
+
+    })
+
+
+};
+
+getAnonName()
diff --git a/Week2/traversy_async_crash/README.md → ...mirHossein/traversy_async_crash/README.md b/Week2/traversy_async_crash/README.md → ...mirHossein/traversy_async_crash/README.md
diff --git a/Week2/traversy_async_crash/callbacks.js → ...Hossein/traversy_async_crash/callbacks.js b/Week2/traversy_async_crash/callbacks.js → ...Hossein/traversy_async_crash/callbacks.js
diff --git a/Week2/traversy_async_crash/index.html → ...irHossein/traversy_async_crash/index.html b/Week2/traversy_async_crash/index.html → ...irHossein/traversy_async_crash/index.html
diff --git a/Week2/traversy_async_crash/promises.js → ...rHossein/traversy_async_crash/promises.js b/Week2/traversy_async_crash/promises.js → ...rHossein/traversy_async_crash/promises.js
diff --git a/Week3/LESSONPLAN.md → Week3/AmirHossein/LESSONPLAN.md b/Week3/LESSONPLAN.md → Week3/AmirHossein/LESSONPLAN.md
diff --git a/Week3/MAKEME.md → Week3/AmirHossein/MAKEME.md b/Week3/MAKEME.md → Week3/AmirHossein/MAKEME.md
@@ -20,6 +20,68 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
+    <div class="container">
+      <section id="header">
+        <p>HYF Repositories</p>
+        <select class="selectMenu">
+          <option value="0">alumni</option>
+          <option value="1">AngularJS</option>
+          <option value="2">Authentication</option>
+          <option value="3">battleship-api</option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+        </select>
+
+      </section>
+      <div class="bottom-box">
+        <section id="left-side">
+          <div class="card">
+            <table>
+              <tr>
+                <td class="col-left">Repositories:</td>
+                <td class="col-right rep-text"><a href="#">SampleRepo1</a></td>
+              </tr>
+              <tr>
+                <td class="col-left">Description:	</td>
+                <td class="col-right desc-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, iure ipsum? Consequatur sequi esse veritatis in exercitationem quos repellat doloribus earum tempora cumque!</td>
+              </tr>
+              <tr>
+                <td class="col-left">Forks:	</td>
+                <td class="col-right fork-text">5	</td>
+              </tr>
+              <tr>
+                <td class="col-left">Update:	</td>
+                <td class="col-right update-text">2020-05-27 12:00:00	</td>
+              </tr>
+
+          </table>
+            </div>
+
+        </section>
+        <section id="right-side">
+          <div id="contributor">Contributors</div>
+          <div class="card small-card">
+            <img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
+            <a href="" class="userName">isalga</a>
+            <div class="badge">9</div>
+            </div>
+          <div class="card small-card">
+            <img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
+            <a href="" class="userName">isalga</a>
+            <div class="badge">9</div>
+            </div>
+
+        </section>
+      </div>
+    </div>
+
+
+
+
     <script src="./script.js"></script>
   </body>
 </html>
@@ -3,3 +3,24 @@
 /*
   Write here your JavaScript for HackYourRepo!
 */
+const placeholderRepos = [
+  {
+    name: 'SampleRepo1',
+    description: 'This repository is meant to be a sample',
+    forks: 5,
+    updated: '2020-05-27 12:00:00',
+  },
+  {
+    name: 'AndAnotherOne',
+    description: 'Another sample repo! Can you believe it?',
+    forks: 9,
+    updated: '2020-05-27 12:00:00',
+  },
+  {
+    name: 'HYF-Is-The-Best',
+    description:
+      "This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
+    forks: 130,
+    updated: '2020-05-27 12:00:00',
+  },
+];
@@ -1,3 +1,96 @@
-/* 
+/*
   Write here your CSS rules for HackYourRepo!
 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+}
+
+#header {
+  color: white;
+  height: 50px;
+  background-color: #3f51b5;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+
+}
+p {
+  margin-right: 30px;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+
+
+}
+
+.bottom-box {
+
+  display: flex;
+  flex-direction: row;
+  height: auto;
+}
+
+#left-side {
+  margin-top: 10px;
+  width: 50%;
+
+}
+.card {
+  margin-left: 5px;
+  margin-top: 5px;
+  box-shadow:
+    0px 20px 30px 0px rgba(0, 0, 0, 0.05),
+    0px 4px 4px 0 rgba(0, 0, 0, .15),
+    1px 2px 2px 0 rgba(0, 0, 0, .2);
+  font-size: 2vmin;
+}
+.card .col-right {
+  padding-left: 30px;
+  padding-right: 25px;
+
+}
+.col-left {
+
+  padding: 5px 0 0 5px;
+}
+#right-side {
+
+  width: 50%;
+}
+
+#contributor {
+  margin-top: 10px;
+  margin-left:0.4rem;
+  color: darkgray;
+  box-shadow: none;
+  padding-top: 1rem;
+  padding-left: 0.3rem;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: none;
+  height: 3em;
+}
+.small-card {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0.4rem;
+}
+img {
+  margin: 1rem;
+}
+
+
+.badge {
+  margin-left: auto;
+  background-color: #a9a9a9;
+  color: white;
+  border-radius: 4px;
+  margin-right: 1rem;
+  margin-top: 1.3rem;
+  padding: 0.1rem 0.8rem;
+}