Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 66759a7

Browse files
BaraaKBaraaK
committed
done week1 js3 homewrok
1 parent 695ce10 commit 66759a7

8 files changed

Lines changed: 316 additions & 7 deletions

File tree

‎Week1/homework/js-exercises/ex1-logRecievedData.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict'
2+
{
3+
//const axios = require('axios');
4+
const MY_URL = "https://www.randomuser.me/api";
5+
const xhrBtn = document.getElementById("XHR");
6+
const axiosBtn = document.getElementById("Axios");
7+
function xhrGetData(){
8+
let xHReq = new XMLHttpRequest();
9+
xHReq.onload = () => {
10+
if(xHReq.status < 400 ) {
11+
console.log(JSON.parse(xHReq.responseText));
12+
}
13+
else
14+
console.log(`Network error: ${xhr.status} - ${xhr.statusText}`);
15+
}
16+
xHReq.onerror = function () {
17+
console.log("Network request failed")
18+
}
19+
xHReq.open("GET", MY_URL);
20+
xHReq.send();
21+
22+
}
23+
function axiosGetData() {
24+
axios.get(MY_URL)
25+
.then(function (response) {
26+
console.log(response);
27+
})
28+
.catch(function (error) {
29+
console.log(error);
30+
})
31+
}
32+
xhrBtn.addEventListener("click", xhrGetData );
33+
axiosBtn.addEventListener("click",axiosGetData)
34+
35+
36+
37+
38+
}

‎Week1/homework/js-exercises/ex1.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+
<button id="XHR" > XMLHTTPREQUEST</button>
10+
<button id="Axios">AXIOS</button>
11+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
12+
<script src="ex1-logRecievedData.js"></script>
13+
</body>
14+
</html>

‎Week1/homework/js-exercises/ex2-programmerHumor.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Programmer Humor</title>
7+
</head>
8+
<body>
9+
10+
<button id="xhr">XMLHTTPREQUEST</button>
11+
<button id="Axios">AXIOS</button>
12+
<div id="app"></div>
13+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
14+
<script src="ex2-programmerHumor.js"></script>
15+
16+
</body>
17+
</html>

‎Week1/homework/js-exercises/ex2-programmerHumor.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
'use strict'
2+
{
3+
const MY_URL = "https://xkcd.now.sh/?comic=latest";
4+
const xhrBtn = document.getElementById("xhr");
5+
const axiosBtn = document.getElementById("Axios");
6+
const app = document.getElementById('app');
7+
let list = document.createElement('ul');
8+
app.appendChild(list);
9+
function xhrGetData(){
10+
let xHReq = new XMLHttpRequest();
11+
xHReq.onload = () => {
12+
if(xHReq.status < 400 ) {
13+
let res = JSON.parse(xHReq.responseText);
14+
let img = `<img src=${res.img}>`;
15+
let output ="";
16+
for (const key in res) {
17+
if (res.hasOwnProperty(key)) {
18+
output += `<li> ${key} : ${res[key]}</li>`
19+
20+
21+
}
22+
else
23+
console.log(`Network error: ${xhr.status} - ${xhr.statusText}`);
24+
25+
}
26+
list.innerHTML += img + output;
27+
}
28+
}
29+
xHReq.onerror = function () {
30+
console.log("Network request failed")
31+
}
32+
xHReq.open("GET", MY_URL);
33+
xHReq.send();
34+
35+
}
36+
function axiosGetData() {
37+
axios.get(MY_URL)
38+
.then(function (response) {
39+
let img = `<img src=${response.data.img}>`;
40+
let output ="";
41+
for (const key in response.data) {
42+
if (response.data.hasOwnProperty(key)) {
43+
output += `<li> ${key} : ${response.data[key]}</li>`
44+
45+
46+
}
47+
}
48+
list.innerHTML += img + output;
49+
50+
})
51+
.catch(function (error) {
52+
console.log(error);
53+
})
54+
55+
}
56+
xhrBtn.addEventListener("click", xhrGetData );
57+
axiosBtn.addEventListener("click",axiosGetData)}

‎Week1/homework/js-exercises/ex3-randomPhoto.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<button id="xhr">XMLHTTPREQUEST</button>
10+
<button id="Axios">AXIOS</button>
11+
<div id="app"></div>
12+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
13+
<script src="ex3-randomPhoto.js"></script>
14+
</body>
15+
</html>

‎Week1/homework/js-exercises/ex3-randomPhoto.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use strict'
2+
{
3+
const MY_URL = "https://dog.ceo/api/breeds/image/random";
4+
const xhrBtn = document.getElementById("xhr");
5+
const axiosBtn = document.getElementById("Axios");
6+
const app = document.getElementById('app');
7+
let list = document.createElement('ul');
8+
list.style.listStyle ="none"
9+
app.appendChild(list);
10+
function xhrGetData(){
11+
let xHReq = new XMLHttpRequest();
12+
xHReq.onload = () => {
13+
if(xHReq.status < 400 ) {
14+
let res = JSON.parse(xHReq.responseText);
15+
let output =`<li><img src=${res['message']}></li>`;
16+
list.innerHTML += output;
17+
}
18+
else
19+
console.log(`Network error: ${xhr.status} - ${xhr.statusText}`);
20+
21+
}
22+
xHReq.onerror = function () {
23+
console.log("Network request failed")
24+
}
25+
xHReq.open("GET", MY_URL);
26+
xHReq.send();
27+
28+
}
29+
function axiosGetData() {
30+
axios.get(MY_URL)
31+
.then(function (response) {
32+
let output ="";
33+
output = `<li><img src=${response.data['message']}></li>`
34+
list.innerHTML += output
35+
36+
37+
})
38+
.catch(function (error) {
39+
console.log(error);
40+
})
41+
42+
}
43+
xhrBtn.addEventListener("click", xhrGetData );
44+
axiosBtn.addEventListener("click",axiosGetData)}

‎homework/index.js‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
'use strict';
22

33
{
4+
const REPOS_UL_CLASS_NAME = 'repos-ul';
5+
const LI_CLASS_NAME = 'li-class'
6+
const UL_TABLE_CLASS_NAME = 'ul-table';
7+
const ALERT_ERROR = 'alert-error';
8+
const HEAD_CLASS_NAME = 'head';
49
function fetchJSON(url, cb) {
510
const xhr = new XMLHttpRequest();
611
xhr.open('GET', url);
@@ -29,26 +34,54 @@
2934
return elem;
3035
}
3136

37+
function createTable(repo,tableClassName) {
38+
const table = document.createElement('table');
39+
table.setAttribute('class' , tableClassName);
40+
const tableInfo = `<tbody>
41+
<tr>
42+
<td>Repository:</td>
43+
<td><a href = "">${repo.name}</a></td>
44+
</tr>
45+
<tr>
46+
<td>Description:</td>
47+
<td>${repo.description}</td>
48+
</tr>
49+
<tr>
50+
<td>Forks:</td>
51+
<td>${repo.forks}</td>
52+
</tr>
53+
<tr>
54+
<td>Updated:</td>
55+
<td>${repo.updated_at}</td>
56+
</tr>
57+
</tbody>`
58+
table.innerHTML = tableInfo;
59+
return table;
60+
}
3261
function renderRepoDetails(repo, ul) {
33-
createAndAppend('li', ul, { text: repo.name });
62+
createAndAppend('li', ul , { class : LI_CLASS_NAME});
63+
const liItem = document.querySelector('li:last-child');
64+
liItem.appendChild(createTable(repo , UL_TABLE_CLASS_NAME ) );
3465
}
3566

36-
function main(url) {
37-
fetchJSON(url, (err, repos) => {
67+
function main(url,numberOfRepos) {
68+
fetchJSON(`${url}?per_page=${numberOfRepos}`, (err, repos) => {
3869
const root = document.getElementById('root');
70+
const head = createAndAppend('div', root, { class : HEAD_CLASS_NAME })
71+
head.innerText = 'HYF Repositories';
3972
if (err) {
4073
createAndAppend('div', root, {
4174
text: err.message,
42-
class: 'alert-error',
75+
class: ALERT_ERROR,
4376
});
4477
return;
4578
}
46-
const ul = createAndAppend('ul', root);
79+
const ul = createAndAppend('ul', root, { class : REPOS_UL_CLASS_NAME});
4780
repos.forEach(repo => renderRepoDetails(repo, ul));
4881
});
4982
}
5083

5184
const HYF_REPOS_URL =
52-
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
53-
window.onload = () => main(HYF_REPOS_URL);
85+
'https://api.github.com/orgs/HackYourFuture/repos';
86+
window.onload = () => main(HYF_REPOS_URL,10);
5487
}

‎homework/style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,94 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
12
.alert-error {
23
color: red;
4+
background-color: #F8D7DA;
5+
height: 3rem;
6+
text-align: left;
7+
padding-top: 1.5rem;
8+
padding-left: 1rem;
9+
border-radius: 15px;
10+
}
11+
#root {
12+
display: flex;
13+
flex-direction: column;
14+
flex-wrap: wrap;
15+
font-family: 'Open Sans', sans-serif;
16+
width: initial;
17+
height: auto;
18+
margin: 0rem;
19+
padding: 0.5rem;
20+
overflow: hidden;
21+
22+
}
23+
.head {
24+
background-color: #3F51B5;
25+
margin: 0.5rem;
26+
height: 5rem;
27+
width: 100%;
28+
text-align: left;
29+
color: white;
30+
padding-top: 2.5rem;
31+
padding-left: 1rem;
32+
font-size: xx-large;
33+
34+
35+
}
36+
.repos-ul {
37+
list-style: none;
38+
width: 100%;
39+
padding: 0.35rem;
40+
}
41+
.ul-table{
42+
margin: 0rem;
43+
color: #4B3E30;
44+
display: flex;
45+
flex-direction: column;
46+
flex-wrap: wrap;
47+
48+
}
49+
.ul-table tr {
50+
white-space:nowrap;
51+
padding: 0.5rem;
52+
font-size: inherit;
53+
}
54+
.ul-table td:first-child {
55+
font-weight: bolder;
56+
color: black;
57+
}
58+
.li-class{
59+
margin: 0.5rem;
60+
padding:1rem;
61+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
62+
}
63+
64+
/* Media queries*/
65+
@media screen and (max-width:599px){
66+
#root {
67+
overflow: scroll;
68+
}
69+
.head {
70+
font-size: large;
71+
text-align: justify;
72+
}
73+
.repos-ul tr{
74+
vertical-align: baseline;
75+
white-space: normal;
76+
font-size: small;
77+
78+
}
79+
}
80+
@media screen and (min-width:600px) {
81+
.repos-ul tr{
82+
vertical-align: baseline;
83+
white-space: normal;
84+
font-size: medium;
85+
86+
}
87+
}
88+
@media screen and (min-width:768px){
89+
.repos-ul tr{
90+
vertical-align: baseline;
91+
white-space: normal;
92+
font-size: medium;
93+
}
394
}

0 commit comments

Comments
 (0)