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

Commit ddebad7

Browse files
Farhan-NazirFarhan-Nazir
committed
Homework week3 done
1 parent a5ed577 commit ddebad7

10 files changed

Lines changed: 358 additions & 0 deletions

File tree

‎.DS_Store‎

-6 KB
Binary file not shown.

‎Week2/assets/app.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
"use strict";
2+
let username = "HackYourFuture";
3+
let mainRepo;
4+
let url = `https://api.github.com/users/${username}/repos`;
5+
let ul = document.getElementById("list");
6+
let repo_title = document.getElementById("card-title");
7+
let repo_description = document.getElementById("card-description");
8+
let repo_forks = document.getElementById("card-forks");
9+
let repo_updated = document.getElementById("card-updated");
10+
11+
let dropdown = document.getElementById("gitContributors");
12+
dropdown.length = 0;
13+
14+
let defaultOption = document.createElement("option");
15+
defaultOption.text = "Choose Repo";
16+
17+
dropdown.add(defaultOption);
18+
dropdown.selectedIndex = 0;
19+
20+
// Get Repos from Github/hackyourfutue
21+
fetch(url)
22+
.then(response => response.json())
23+
.then(data => {
24+
console.log(data); // Prints result from `response.json()` in getRequest
25+
let option;
26+
27+
for (let i = 0; i < data.length; i++) {
28+
option = document.createElement("option");
29+
option.text = data[i].name;
30+
option.value = i;
31+
dropdown.add(option);
32+
}
33+
mainRepo = data;
34+
})
35+
.catch(error => console.error(error));
36+
37+
// Get Contributors
38+
function getContributors(repo) {
39+
let contributorURL = `https://api.github.com/repos/hackyourfuture/${repo}/contributors`;
40+
//Ul clearing
41+
if (ul.hasChildNodes()) {
42+
while (ul.hasChildNodes()) {
43+
ul.removeChild(ul.firstChild);
44+
}
45+
}
46+
//Repo Information
47+
repo_title.innerHTML = dropdown.options[dropdown.selectedIndex].text;
48+
repo_description.innerHTML =
49+
mainRepo[dropdown.options[dropdown.selectedIndex].value].description;
50+
repo_forks.innerHTML =
51+
mainRepo[dropdown.options[dropdown.selectedIndex].value].forks;
52+
repo_updated.innerHTML = dateConverter(
53+
mainRepo[dropdown.options[dropdown.selectedIndex].value].updated_at
54+
);
55+
56+
//Fetching contributors list
57+
fetch(contributorURL)
58+
.then(response => response.json())
59+
.then(data => {
60+
console.log(data);
61+
62+
data.map( e => {
63+
let a = document.createElement('a');
64+
a.setAttribute('target','_blank');
65+
a.href = e.html_url;
66+
67+
let li = document.createElement("li");
68+
li.className ="list-group-item d-flex justify-content-between align-items-center";
69+
let title = document.createElement("h6");
70+
let span = document.createElement("span");
71+
span.className = "badge badge-success"
72+
span.appendChild(document.createTextNode(e.contributions));
73+
let img = document.createElement('img');
74+
img.src = e.avatar_url;
75+
img.setAttribute("width", "50");
76+
img.setAttribute("height", "50");
77+
img.setAttribute("alt", e.login);
78+
li.appendChild(img);
79+
title.innerHTML = e.login;
80+
li.appendChild(title);
81+
li.appendChild(span);
82+
a.appendChild(li)
83+
ul.appendChild(a);
84+
});
85+
})
86+
.catch(error => console.error(error));
87+
}
88+
89+
//Helping functions
90+
function dateConverter(date) {
91+
let newDate = new Date(date);
92+
return `${newDate.toLocaleDateString()} - ${newDate.toLocaleTimeString()}`;
93+
}
94+
95+

‎Week2/assets/hyf-github-error.png‎

10.5 KB
Loading

‎Week2/assets/hyf-github.png‎

69.6 KB
Loading

‎Week2/assets/index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>HYF Github API</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
11+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
12+
crossorigin="anonymous"
13+
/>
14+
<script
15+
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
16+
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
17+
crossorigin="anonymous"
18+
></script>
19+
<script
20+
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
21+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
22+
crossorigin="anonymous"
23+
></script>
24+
<script
25+
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
26+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
27+
crossorigin="anonymous"
28+
></script>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
33+
<a class="navbar-brand" href="#">Hack Your Future | Github</a>
34+
35+
<div
36+
class="navbar navbar-expand-lg navbar-dark bg-dark"
37+
id="navbarColor02"
38+
>
39+
<ul class="navbar-nav mr-auto">
40+
<fieldset>
41+
<div class="form-group float-right">
42+
<select
43+
name="gitContributors"
44+
class="custom-select "
45+
id="gitContributors"
46+
onchange="getContributors(dropdown.options[dropdown.selectedIndex].text)"
47+
>
48+
</select>
49+
</div>
50+
</fieldset>
51+
</ul>
52+
</div>
53+
</nav>
54+
<br />
55+
<div class="row">
56+
<div
57+
class="card border-success mb-4"
58+
style="max-width: 20rem; max-height: 20em;"
59+
>
60+
<div class="card-header">Github Repo Information</div>
61+
<div class="card-body">
62+
<h4 class="card-title" id="card-title">Select Repo</h4>
63+
<h6>Description:</h6>
64+
<p class="card-text" id="card-description"></p>
65+
<h6>Total Forks:</h6>
66+
<span class="card-text" id="card-forks"></span>
67+
<h6>Last Updated:</h6>
68+
<p class="card-text" id="card-updated"></p>
69+
</div>
70+
</div>
71+
<div
72+
class="card border-success mb-4" style="width: 30em; margin-left: 1em;">
73+
<div class="card-header">Contributors</div>
74+
<ul class="list-group" id="list"></ul>
75+
</div>
76+
</div>
77+
78+
</div>
79+
<footer align="center">
80+
Designed by Farhan Nazir
81+
</footer>
82+
</body>
83+
<script src="app.js"></script>
84+
</html>

‎Week3/assets/app.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
"use strict";
2+
let username = "HackYourFuture";
3+
let mainRepo;
4+
let url = `https://api.github.com/users/${username}/repos`;
5+
let ul = document.getElementById("list");
6+
let repo_title = document.getElementById("card-title");
7+
let repo_description = document.getElementById("card-description");
8+
let repo_forks = document.getElementById("card-forks");
9+
let repo_updated = document.getElementById("card-updated");
10+
11+
let dropdown = document.getElementById("gitContributors");
12+
dropdown.length = 0;
13+
14+
let defaultOption = document.createElement("option");
15+
defaultOption.text = "Choose Repo";
16+
17+
dropdown.add(defaultOption);
18+
dropdown.selectedIndex = 0;
19+
20+
// Get Repos from Github/hackyourfutue
21+
fetch(url)
22+
.then(response => response.json())
23+
.then(data => {
24+
console.log(data); // Prints result from `response.json()` in getRequest
25+
let option;
26+
27+
for (let i = 0; i < data.length; i++) {
28+
option = document.createElement("option");
29+
option.text = data[i].name;
30+
option.value = i;
31+
dropdown.add(option);
32+
}
33+
mainRepo = data;
34+
})
35+
.catch(error => console.error(error));
36+
37+
// Get Contributors
38+
function getContributors(repo) {
39+
let contributorURL = `https://api.github.com/repos/hackyourfuture/${repo}/contributors`;
40+
//Ul clearing
41+
if (ul.hasChildNodes()) {
42+
while (ul.hasChildNodes()) {
43+
ul.removeChild(ul.firstChild);
44+
}
45+
}
46+
//Repo Information
47+
repo_title.innerHTML = dropdown.options[dropdown.selectedIndex].text;
48+
repo_description.innerHTML =
49+
mainRepo[dropdown.options[dropdown.selectedIndex].value].description;
50+
repo_forks.innerHTML =
51+
mainRepo[dropdown.options[dropdown.selectedIndex].value].forks;
52+
repo_updated.innerHTML = dateConverter(
53+
mainRepo[dropdown.options[dropdown.selectedIndex].value].updated_at
54+
);
55+
56+
//Fetching contributors list
57+
fetch(contributorURL)
58+
.then(response => response.json())
59+
.then(data => {
60+
console.log(data);
61+
62+
data.map( e => {
63+
let a = document.createElement('a');
64+
a.setAttribute('target','_blank');
65+
a.href = e.html_url;
66+
67+
let li = document.createElement("li");
68+
li.className ="list-group-item d-flex justify-content-between align-items-center";
69+
let title = document.createElement("h6");
70+
let span = document.createElement("span");
71+
span.className = "badge badge-success"
72+
span.appendChild(document.createTextNode(e.contributions));
73+
let img = document.createElement('img');
74+
img.src = e.avatar_url;
75+
img.setAttribute("width", "50");
76+
img.setAttribute("height", "50");
77+
img.setAttribute("alt", e.login);
78+
li.appendChild(img);
79+
title.innerHTML = e.login;
80+
li.appendChild(title);
81+
li.appendChild(span);
82+
a.appendChild(li)
83+
ul.appendChild(a);
84+
});
85+
})
86+
.catch(error => console.error(error));
87+
}
88+
89+
//Helping functions
90+
function dateConverter(date) {
91+
let newDate = new Date(date);
92+
return `${newDate.toLocaleDateString()} - ${newDate.toLocaleTimeString()}`;
93+
}
94+
95+

‎Week3/assets/hyf-github-error.png‎

10.5 KB
Loading

‎Week3/assets/hyf-github.png‎

69.6 KB
Loading

‎Week3/assets/index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>HYF Github API</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
11+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
12+
crossorigin="anonymous"
13+
/>
14+
<script
15+
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
16+
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
17+
crossorigin="anonymous"
18+
></script>
19+
<script
20+
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
21+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
22+
crossorigin="anonymous"
23+
></script>
24+
<script
25+
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
26+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
27+
crossorigin="anonymous"
28+
></script>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
33+
<a class="navbar-brand" href="#">Hack Your Future | Github</a>
34+
35+
<div
36+
class="navbar navbar-expand-lg navbar-dark bg-dark"
37+
id="navbarColor02"
38+
>
39+
<ul class="navbar-nav mr-auto">
40+
<fieldset>
41+
<div class="form-group float-right">
42+
<select
43+
name="gitContributors"
44+
class="custom-select "
45+
id="gitContributors"
46+
onchange="getContributors(dropdown.options[dropdown.selectedIndex].text)"
47+
>
48+
</select>
49+
</div>
50+
</fieldset>
51+
</ul>
52+
</div>
53+
</nav>
54+
<br />
55+
<div class="row">
56+
<div
57+
class="card border-success mb-4"
58+
style="max-width: 20rem; max-height: 20em;"
59+
>
60+
<div class="card-header">Github Repo Information</div>
61+
<div class="card-body">
62+
<h4 class="card-title" id="card-title">Select Repo</h4>
63+
<h6>Description:</h6>
64+
<p class="card-text" id="card-description"></p>
65+
<h6>Total Forks:</h6>
66+
<span class="card-text" id="card-forks"></span>
67+
<h6>Last Updated:</h6>
68+
<p class="card-text" id="card-updated"></p>
69+
</div>
70+
</div>
71+
<div
72+
class="card border-success mb-4" style="width: 30em; margin-left: 1em;">
73+
<div class="card-header">Contributors</div>
74+
<ul class="list-group" id="list"></ul>
75+
</div>
76+
</div>
77+
78+
</div>
79+
<footer align="center">
80+
Designed by Farhan Nazir
81+
</footer>
82+
</body>
83+
<script src="app.js"></script>
84+
</html>

‎homework/.DS_Store‎

-6 KB
Binary file not shown.

0 commit comments

Comments
 (0)