Skip to content

Commit b49bf00

Browse files
amirhshadamirhshad
authored
Merge pull request #1 from samravan/master
MAster
2 parents c985479 + b9ead2a commit b49bf00

8 files changed

Lines changed: 354 additions & 1 deletion

File tree

‎Week1/homework/js-exercises/dogGallery.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const XMLBtn = document.getElementById('btn1');
2+
const AxiosBtn = document.getElementById('btn2');
3+
4+
function xhrMethod() {
5+
const xhr = new XMLHttpRequest();
6+
const li = document.createElement('li');
7+
const image = document.createElement('img');
8+
const ul = document.getElementById('list');
9+
const url = 'https://dog.ceo/api/breeds/image/random'
10+
xhr.open('GET', url);
11+
xhr.send();
12+
xhr.onreadystatechange = processRequest;
13+
14+
ul.appendChild(li.appendChild(image))
15+
16+
function processRequest(e) {
17+
if(xhr.readyState == 4 && xhr.status == 200) {
18+
let response = JSON.parse(xhr.responseText);
19+
image.src = response.message;
20+
image.style.width = '300px'
21+
image.style.height = '300px'
22+
image.style.margin = '5px'
23+
24+
};
25+
};
26+
xhr.onerror = function() {
27+
if (xhr.status != 200) {
28+
alert (`Error ${xhr.status}: ${xhr.statusText}`);
29+
};
30+
};
31+
32+
};
33+
34+
XMLBtn.addEventListener('click', xhrMethod);
35+
36+
37+
38+
function axiosMethod() {
39+
const li = document.createElement('li');
40+
const image = document.createElement('img');
41+
const ul = document.getElementById('list');
42+
ul.appendChild(li.appendChild(image))
43+
axios
44+
.get('https://dog.ceo/api/breeds/image/random')
45+
.then(function(response) {
46+
47+
image.src = response.data.message;
48+
image.style.width = '300px'
49+
image.style.height = '300px'
50+
image.style.margin = '5px'
51+
52+
})
53+
.catch(function(error) {
54+
console.log(error)
55+
});
56+
}
57+
58+
59+
AxiosBtn.addEventListener('click', axiosMethod);

‎Week1/homework/js-exercises/getandomUser.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
function xhrMethod() {
2+
const xhr = new XMLHttpRequest();
3+
const url = 'https://www.randomuser.me/api'
4+
5+
xhr.open('GET', url);
6+
xhr.send();
7+
8+
xhr.onreadystatechange = processRequest;
9+
10+
function processRequest(e) {
11+
if(xhr.readyState == 4 && xhr.status == 200) {
12+
let respons = JSON.parse(xhr.responseText);
13+
console.log(respons)
14+
}
15+
}
16+
17+
xhr.onerror = function() {
18+
if (xhr.status != 200) {
19+
alert (`Error ${xhr.status}: ${xhr.statusText}`)
20+
}
21+
}
22+
23+
}
24+
25+
26+
const axios = require('axios');
27+
function axiosMethod() {
28+
axios
29+
.get('https://www.randomuser.me/api')
30+
.then(function(response) {
31+
console.log(response.data);
32+
})
33+
.catch(function(error) {
34+
console.log(error)
35+
});
36+
}
37+
38+
39+
axiosMethod();
40+
xhrMethod();

‎Week1/homework/js-exercises/humor.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
3+
function xhrMethod() {
4+
const xhr = new XMLHttpRequest();
5+
const url = 'https://xkcd.now.sh/?comic=latest'
6+
xhr.open('GET', url);
7+
xhr.send();
8+
xhr.onreadystatechange = processRequest;
9+
function processRequest(e) {
10+
if(xhr.readyState == 4 && xhr.status == 200) {
11+
let response = JSON.parse(xhr.responseText);
12+
document.getElementsByTagName('img').src = response.img;
13+
console.log(response);
14+
};
15+
};
16+
xhr.onerror = function() {
17+
if (xhr.status != 200) {
18+
alert (`Error ${xhr.status}: ${xhr.statusText}`);
19+
};
20+
};
21+
};
22+
23+
xhrMethod();
24+
25+
26+
27+
28+
29+
function axiosMethod() {
30+
axios
31+
.get('https://xkcd.now.sh/?comic=latest')
32+
.then(function(response) {
33+
console.log(response.data);
34+
document.getElementsByTagName('img').src = response.data.img;
35+
})
36+
.catch(function(error) {
37+
console.log(error)
38+
});
39+
}
40+
41+
42+
axiosMethod();

‎Week1/homework/js-exercises/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dog Gallery</title>
7+
</head>
8+
<body>
9+
<div class="container">
10+
<button id="btn1">XMLHttpRrquest</button>
11+
<button id="btn2">Axios</button>
12+
<ul id="list"></ul>
13+
14+
</div>
15+
16+
17+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
18+
<script src="dogGallery.js"></script>
19+
</body>
20+
</html>

‎Week2/AmirHossein/homework/js-exercises/johnWho.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const getAnonName = (firstName) => {
2+
return new Promise((resolve, reject) => {
3+
const fullName = `${firstName} Doe`
4+
resolve(fullName)
5+
console.log(fullName)
6+
7+
8+
9+
reject(new Error("You didn't pass in a first name!"))
10+
11+
})
12+
13+
14+
};
15+
16+
getAnonName()

‎hackyourrepo-app/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,68 @@
2020
<link rel="stylesheet" href="./style.css" />
2121
</head>
2222
<body>
23+
<div class="container">
24+
<section id="header">
25+
<p>HYF Repositories</p>
26+
<select class="selectMenu">
27+
<option value="0">alumni</option>
28+
<option value="1">AngularJS</option>
29+
<option value="2">Authentication</option>
30+
<option value="3">battleship-api</option>
31+
<option value="4"></option>
32+
<option value="5"></option>
33+
<option value="6"></option>
34+
<option value="7"></option>
35+
<option value="8"></option>
36+
<option value="9"></option>
37+
</select>
38+
39+
</section>
40+
<div class="bottom-box">
41+
<section id="left-side">
42+
<div class="card">
43+
<table>
44+
<tr>
45+
<td class="col-left">Repositories:</td>
46+
<td class="col-right rep-text"><a href="#">SampleRepo1</a></td>
47+
</tr>
48+
<tr>
49+
<td class="col-left">Description: </td>
50+
<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>
51+
</tr>
52+
<tr>
53+
<td class="col-left">Forks: </td>
54+
<td class="col-right fork-text">5 </td>
55+
</tr>
56+
<tr>
57+
<td class="col-left">Update: </td>
58+
<td class="col-right update-text">2020-05-27 12:00:00 </td>
59+
</tr>
60+
61+
</table>
62+
</div>
63+
64+
</section>
65+
<section id="right-side">
66+
<div id="contributor">Contributors</div>
67+
<div class="card small-card">
68+
<img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
69+
<a href="" class="userName">isalga</a>
70+
<div class="badge">9</div>
71+
</div>
72+
<div class="card small-card">
73+
<img src="https://avatars3.githubusercontent.com/u/3985124?v=4" alt="" class="userPhoto" width="50px">
74+
<a href="" class="userName">isalga</a>
75+
<div class="badge">9</div>
76+
</div>
77+
78+
</section>
79+
</div>
80+
</div>
81+
82+
83+
84+
2385
<script src="./script.js"></script>
2486
</body>
2587
</html>

‎hackyourrepo-app/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,24 @@
33
/*
44
Write here your JavaScript for HackYourRepo!
55
*/
6+
const placeholderRepos = [
7+
{
8+
name: 'SampleRepo1',
9+
description: 'This repository is meant to be a sample',
10+
forks: 5,
11+
updated: '2020-05-27 12:00:00',
12+
},
13+
{
14+
name: 'AndAnotherOne',
15+
description: 'Another sample repo! Can you believe it?',
16+
forks: 9,
17+
updated: '2020-05-27 12:00:00',
18+
},
19+
{
20+
name: 'HYF-Is-The-Best',
21+
description:
22+
"This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
23+
forks: 130,
24+
updated: '2020-05-27 12:00:00',
25+
},
26+
];

‎hackyourrepo-app/style.css‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,96 @@
1-
/*
1+
/*
22
Write here your CSS rules for HackYourRepo!
33
*/
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
9+
}
10+
11+
#header {
12+
color: white;
13+
height: 50px;
14+
background-color: #3f51b5;
15+
display: flex;
16+
align-items: center;
17+
padding: 20px;
18+
19+
}
20+
p {
21+
margin-right: 30px;
22+
}
23+
24+
.container {
25+
width: 80%;
26+
margin: 0 auto;
27+
28+
29+
}
30+
31+
.bottom-box {
32+
33+
display: flex;
34+
flex-direction: row;
35+
height: auto;
36+
}
37+
38+
#left-side {
39+
margin-top: 10px;
40+
width: 50%;
41+
42+
}
43+
.card {
44+
margin-left: 5px;
45+
margin-top: 5px;
46+
box-shadow:
47+
0px 20px 30px 0px rgba(0, 0, 0, 0.05),
48+
0px 4px 4px 0 rgba(0, 0, 0, .15),
49+
1px 2px 2px 0 rgba(0, 0, 0, .2);
50+
font-size: 2vmin;
51+
}
52+
.card .col-right {
53+
padding-left: 30px;
54+
padding-right: 25px;
55+
56+
}
57+
.col-left {
58+
59+
padding: 5px 0 0 5px;
60+
}
61+
#right-side {
62+
63+
width: 50%;
64+
}
65+
66+
#contributor {
67+
margin-top: 10px;
68+
margin-left:0.4rem;
69+
color: darkgray;
70+
box-shadow: none;
71+
padding-top: 1rem;
72+
padding-left: 0.3rem;
73+
border: 1px solid rgba(0, 0, 0, 0.12);
74+
border-bottom: none;
75+
height: 3em;
76+
}
77+
.small-card {
78+
display: flex;
79+
justify-content: flex-start;
80+
align-items: center;
81+
margin: 0.4rem;
82+
}
83+
img {
84+
margin: 1rem;
85+
}
86+
87+
88+
.badge {
89+
margin-left: auto;
90+
background-color: #a9a9a9;
91+
color: white;
92+
border-radius: 4px;
93+
margin-right: 1rem;
94+
margin-top: 1.3rem;
95+
padding: 0.1rem 0.8rem;
96+
}

0 commit comments

Comments
 (0)