Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2c2e494

Browse files
massam89massam89
committed
a
1 parent 224295c commit 2c2e494

File tree

14 files changed

+452
-0
lines changed

14 files changed

+452
-0
lines changed

‎Week1/homework/code along/app.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const number = document.getElementById('number');
2+
const fact = document.getElementById('fact');
3+
4+
number.addEventListener('input', addText);
5+
6+
function addText(){
7+
const num = number.value;
8+
const URL = `http://numbersapi.com/${num}`;
9+
10+
const xhr = new XMLHttpRequest();
11+
xhr.open('GET', URL, true);
12+
xhr.send();
13+
14+
// 4. This will be called after the response is received
15+
xhr.onload = function() {
16+
if (xhr.status != 200 && xhr.status != 200) {
17+
// analyze HTTP status of the response
18+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
19+
} else {
20+
// show the result
21+
let response = xhr.responseText;
22+
fact.style.display = 'block';
23+
fact.textContent = response;
24+
}
25+
};
26+
27+
xhr.onprogress = function(event) {
28+
if (event.lengthComputable) {
29+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
30+
} else {
31+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
32+
}
33+
};
34+
35+
xhr.onerror = function() {
36+
console.log('Request failed');
37+
};
38+
39+
40+
}

‎Week1/homework/code along/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>Number API</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
8+
</head>
9+
10+
<body class="bg-secondary">
11+
<div class="container mx-auto text-center mt-4" style="width: 400px;">
12+
<div class="card bg-primary text-white">
13+
<div class="card-body">
14+
<h5 class="card-title">Number Facts</h5>
15+
<label class="mb-2" for="number">Please enter number in order to find out</label>
16+
<br>
17+
<input id="number" type="number" placeholder="Enter Number">
18+
<p id="fact" class="mt-4" style="display: none;"></p>
19+
</div>
20+
21+
22+
</div>
23+
</div>
24+
25+
26+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
27+
<script src="app.js"></script>
28+
</body>
29+
30+
</html>

‎Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const URL = 'https://www.randomuser.me/api';
2+
3+
function requestWithXHR(URL){
4+
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
5+
const xhr = new XMLHttpRequest();
6+
xhr.open('GET', URL, true);
7+
xhr.send();
8+
9+
// 4. This will be called after the response is received
10+
xhr.onload = function() {
11+
if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
12+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
13+
} else { // show the result
14+
const response = JSON.parse(xhr.responseText);
15+
console.log(response.results[0].gender);
16+
}
17+
};
18+
19+
xhr.onprogress = function(event) {
20+
if (event.lengthComputable) {
21+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
22+
} else {
23+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
24+
}
25+
26+
};
27+
28+
xhr.onerror = function() {
29+
console.log("Request failed");
30+
};
31+
};
32+
33+
function requestWithAxios(URL){
34+
const axios = require('axios').default;
35+
axios.get(URL)
36+
.then(function (response) {
37+
// handle success
38+
console.log(response.data.results[0].gender);
39+
})
40+
.catch(function (error) {
41+
// handle error
42+
console.log("Request failed");
43+
})
44+
.then(function () {
45+
// always executed
46+
});
47+
48+
};
49+
50+
requestWithXHR(URL);
51+
requestWithAxios(URL);

‎Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const URL = 'https://xkcd.now.sh/?comic=latest';
2+
const image1 = document.getElementById('image1');
3+
const image2 = document.getElementById('image2');
4+
5+
function requestWithXHR(URL){
6+
const xhr = new XMLHttpRequest();
7+
xhr.open('GET', URL, true);
8+
xhr.send();
9+
10+
// 4. This will be called after the response is received
11+
xhr.onload = function() {
12+
if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
13+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
14+
} else { // show the result
15+
const response = JSON.parse(xhr.responseText);
16+
console.log(response);
17+
image1.src = response.img;
18+
}
19+
};
20+
21+
xhr.onprogress = function(event) {
22+
if (event.lengthComputable) {
23+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
24+
} else {
25+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
26+
}
27+
28+
};
29+
30+
xhr.onerror = function() {
31+
console.log("Request failed");
32+
};
33+
};
34+
35+
function requestWithAxios(URL){
36+
axios.get(URL)
37+
.then(function (response) {
38+
// handle success
39+
console.log(response.data);
40+
image2.src = response.data.img;
41+
})
42+
.catch(function (error) {
43+
// handle error
44+
console.log("Request failed");
45+
})
46+
.then(function () {
47+
// always executed
48+
});
49+
50+
};
51+
52+
requestWithXHR(URL);
53+
requestWithAxios(URL);

‎Week1/homework/masoud/js-exercises/Ex2.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Document</title>
7+
</head>
8+
<body>
9+
<img id="image1">
10+
<img id="image2">
11+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
12+
<script src="Ex2-ProgrammerHumor.js"></script>
13+
</body>
14+
</html>

‎Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const URL = 'https://dog.ceo/api/breeds/image/random';
2+
const xmlBtn = document.getElementById('xmlBTN');
3+
const axiosBtn = document.getElementById('axiosBTN');
4+
const ulElm = document.getElementById('list');
5+
const imgSize = '300px';
6+
ulElm.style.display = 'flex';
7+
ulElm.style.flexWrap = 'wrap';
8+
9+
xmlBtn.addEventListener('click',requestWithXHR);
10+
axiosBtn.addEventListener('click',requestWithAxios);
11+
12+
13+
function requestWithXHR() {
14+
const xhr = new XMLHttpRequest();
15+
xhr.open('GET', URL, true);
16+
xhr.send();
17+
18+
// 4. This will be called after the response is received
19+
xhr.onload = function() {
20+
if (xhr.status != 200 && xhr.status != 200) {
21+
// analyze HTTP status of the response
22+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
23+
} else {
24+
// show the result
25+
const response = JSON.parse(xhr.responseText);
26+
const liElm = document.createElement('li');
27+
const imgElm = document.createElement('img');
28+
imgElm.src = response.message;
29+
imgElm.style.height = imgSize;
30+
liElm.style.listStyle = 'none';
31+
liElm.appendChild(imgElm);
32+
ulElm.appendChild(liElm);
33+
}
34+
};
35+
36+
xhr.onprogress = function(event) {
37+
if (event.lengthComputable) {
38+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
39+
} else {
40+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
41+
}
42+
};
43+
44+
xhr.onerror = function() {
45+
console.log('Request failed');
46+
};
47+
}
48+
49+
50+
51+
function requestWithAxios(){
52+
axios.get(URL)
53+
.then(function (response) {
54+
// handle success
55+
const liElm = document.createElement('li');
56+
const imgElm = document.createElement('img');
57+
imgElm.src = response.data.message;
58+
imgElm.style.height = imgSize;
59+
liElm.style.listStyle = 'none';
60+
liElm.appendChild(imgElm);
61+
ulElm.appendChild(liElm);
62+
})
63+
.catch(function (error) {
64+
// handle error
65+
console.log("Request failed");
66+
})
67+
.then(function () {
68+
// always executed
69+
});
70+
};

‎Week1/homework/masoud/js-exercises/Ex3.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>Document</title>
7+
</head>
8+
<body>
9+
<ul id="list"></ul>
10+
<button id="xmlBTN">Run as XMLHttpRequest</button>
11+
<button id="axiosBTN">Run as axios</button>
12+
13+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
14+
<script src="Ex3-DogPhotoGallery.js"></script>
15+
</body>
16+
</html>

‎hackyourrepo-app/Masoud/week1/css/style.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-color: #313267;
9+
font-size: 14px;
10+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11+
width: 100vw;
12+
height: calc(100vh - 20px);
13+
overflow: hidden;
14+
}
15+
16+
header{
17+
height: 15%;
18+
background-color:#313267 ;
19+
}
20+
21+
22+
header a{
23+
height: 100%;
24+
display: block;
25+
text-align: center;
26+
}
27+
28+
img{
29+
height: inherit;
30+
padding: 5px;
31+
}
32+
33+
.container{
34+
background-color: #6ed5e7;
35+
width: calc(95% - 5px);
36+
margin: auto;
37+
height: 85%;
38+
}
39+
40+
.selector{
41+
padding: 10px;
42+
font-size: 1.7em;
43+
background-color: rgb(252, 103, 49);
44+
color: white;
45+
}
46+
47+
#repo-items{
48+
font-size: 16px;
49+
font-family: sans-serif;
50+
font-weight: 700;
51+
color: #444;
52+
padding: .6em 1.4em .5em .8em;
53+
max-width: 100%; /* useful when width is set to anything other than 100% */
54+
margin: 0px auto;
55+
border: 1px solid #aaa;
56+
-moz-appearance: none;
57+
-webkit-appearance: none;
58+
background-color: #fff;
59+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
60+
}
61+
62+
.des-con{
63+
display: flex;
64+
padding: 10px;
65+
}
66+
67+
.description, .contributers{
68+
width: 50%;
69+
border: 3px rgb(223, 152, 152) solid;
70+
margin: 5px;
71+
72+
}
73+
74+
table{
75+
border-spacing: 10px;
76+
}
77+
78+
@media only screen and (max-width:550px){
79+
.des-con{
80+
flex-direction: column;
81+
align-items: center;
82+
}
83+
.description, .contributers{
84+
width: 90%;
85+
}
86+
.selector{
87+
text-align: center;
88+
}
89+
#repo-items{
90+
margin-top: 10px;
91+
}
92+
}

‎hackyourrepo-app/Masoud/week1/img/favicon.ico

1.12 KB
Binary file not shown.

‎hackyourrepo-app/Masoud/week1/img/hyf.png

7.64 KB
Loading

0 commit comments

Comments
 (0)