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

Skip to content

Homework Week 2 Midy #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: Midyan-Hamdoun
Choose a base branch
from
Open

Homework Week 2 Midy #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
546a0e0
HYF Repo Project
Feb 14, 2020
651871f
Update index.js
Feb 18, 2020
b63b08f
Homework week 3
Feb 22, 2020
cb5f100
Merge branch 'Midyan-Hamdoun' of https://github.com/MidyanHamdoun/Jav…
Feb 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions homework-classes/ContributorsView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,13 @@
* @param {Object[]} contributors An array of contributor objects
*/
render(contributors) {
// TODO: replace this comment and the console.log with your own code
console.log('ContributorsView', contributors);
contributors.forEach(contributor => {
createAndAppend('li', document.getElementById('contributors-list'), {
text: `<img src="${contributor.avatar_url}" alt="${contributor.login}">
<a target="_blank" href="${contributor.html_url}">${contributor.login}</a>
<b>${contributor.contributions}</b>`
});
})
}
}

Expand Down
13 changes: 6 additions & 7 deletions homework-classes/Model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,12 @@
this.notify(this.state);
}

static fetchJSON(url) {
return fetch(url).then(res => {
if (!res.ok) {
return new Error(`HTTP ${res.status} - ${res.statusText}`);
}
return res.status === 200 ? res.json() : null;
});
static async fetchJSON(url) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

const fetched = await fetch(url);
if (!fetched.ok) {
return new Error(`HTTP ${fetched.status} - ${fetched.statusText}`);
}
return fetched.status === 200 ? fetched.json() : null;
}
}

Expand Down
12 changes: 9 additions & 3 deletions homework-classes/RepoView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict';

{
const { createAndAppend } = window.Util;
const { createAndAppend, formatDate } = window.Util;

class RepoView {
constructor(container) {
Expand All @@ -19,8 +19,14 @@
* @param {Object} repo A repository object.
*/
render(repo) {
// TODO: replace this comment and the console.log with your own code
console.log('RepoView', repo);
createAndAppend('div', document.getElementById('root'), {
text: `
<b>Repository:</b> <a href="${repo.html_url}" target="_blank">${repo.name}</a><br>
<b>Description:</b> ${repo.description}<br>
<b>Forks:</b> ${repo.forks_count}<br>
<b>Updated:</b> ${formatDate(repo.updated_at)}`,
class: 'repo'
});
}
}

Expand Down
24 changes: 23 additions & 1 deletion homework-classes/Util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,35 @@
parent.appendChild(elem);
Object.entries(options).forEach(([key, value]) => {
if (key === 'text') {
elem.textContent = value;
elem.innerHTML = value;
} else {
elem.setAttribute(key, value);
}
});
return elem;
}

static formatDate(date) {
const newDate = new Date(date);
let hours = newDate.getHours();
let amPm;
let minutes = newDate.getMinutes().toString();
let seconds = newDate.getSeconds().toString();

if (minutes < 10) {
minutes = `0${hours}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
if (newDate.getHours() > 12) {
hours = hours - 12;
amPm = 'PM'
} else {
amPm = 'AM'
}
return `${newDate.getMonth() + 1}/${newDate.getDate()}/${newDate.getFullYear()}, ${hours}:${minutes}:${seconds} ${amPm}`;
}
}

window.Util = Util;
Expand Down
61 changes: 30 additions & 31 deletions homework-classes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="./hyf.png" />
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
<title>HYF-GITHUB</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="root"></div>
<script src="./Util.js"></script>
<script src="./Observable.js"></script>
<script src="./Model.js"></script>
<script src="./HeaderView.js"></script>
<script src="./RepoView.js"></script>
<script src="./ContributorsView.js"></script>
<script src="./ErrorView.js"></script>
<script src="./App.js"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="./hyf.png" />
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
<title>HYF-GITHUB</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>

<body>
<div id="hyf-title">HYF Repositories</div>
<div id="root"></div>
<ul id="contributors-list"></ul>
<script src="./Util.js"></script>
<script src="./Observable.js"></script>
<script src="./Model.js"></script>
<script src="./HeaderView.js"></script>
<script src="./RepoView.js"></script>
<script src="./ContributorsView.js"></script>
<script src="./ErrorView.js"></script>
<script src="./App.js"></script>
</body>

</html>
39 changes: 39 additions & 0 deletions homework-classes/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
body {
font-family: 'Lato';
font-size: 17px;
}

.alert-error {
color: red;
}

#root {
display: flex;
align-content: center;
justify-items: center;
}

.repo, li {
margin-bottom: 10px;
box-shadow: 0 4px 2px -2px gray;
border: 0.4px gray solid;
padding: 10px;
width: 60%;
}

#hyf-title {
background-color: blueviolet;
color: white;
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}

li {
list-style-type: none;
}

img {
width: 25%;
vertical-align: middle;
}
15 changes: 13 additions & 2 deletions homework/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,23 @@
<link rel="apple-touch-icon" href="./hyf.png">
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
<title>HYF-GITHUB</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div id="root"></div>
<div id="hyf-title">HYF Repositories</div>
<div id="root">
<main id="main-container">
<header id="header-container">
<select id="names"></select>
</header>
<section id="repo-container"></section>
<section id="contributors-container">
<ul id="contributors-container"></ul>
</section>
</main>
</div>
<script src="./index.js"></script>
</body>

Expand Down
104 changes: 96 additions & 8 deletions homework/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,122 @@
parent.appendChild(elem);
Object.entries(options).forEach(([key, value]) => {
if (key === 'text') {
elem.textContent = value;
elem.innerHTML = value;
} else {
elem.setAttribute(key, value);
}
});
return elem;
}

function renderRepoDetails(repo, ul) {
createAndAppend('li', ul, { text: repo.name });
function renderRepoDetails(repo, parent) {
createAndAppend('div', parent, {
text: `
<b>Repository:</b> <a href="${repo.html_url}" target="_blank">${repo.name}</a><br>
<b>Description:</b> ${repo.description}<br>
<b>Forks:</b> ${repo.forks_count}<br>
<b>Updated:</b> ${formatDate(repo.updated_at)}`,
class: 'repo'
});
}

function renderContributorsDetails(contributor, parent) {
createAndAppend('li', parent, {
text: `<img src="${contributor.avatar_url}" alt="${contributor.login}">
<a target="_blank" href="${contributor.html_url}">${contributor.login}</a>
<b>${contributor.contributions}</b>`
});
}

function addNamesToDropDown(repo, select) {
createAndAppend('option', select, {
text: repo.name,
value: repo.name
});
}

function formatDate(date) {
const newDate = new Date(date);
let hours = newDate.getHours();
let amPm;
let minutes = newDate.getMinutes().toString();
let seconds = newDate.getSeconds().toString();

if (minutes < 10) {
minutes = `0${hours}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
if (newDate.getHours() > 12) {
hours = hours - 12;
amPm = 'PM'
} else {
amPm = 'AM'
}
return `${newDate.getMonth() + 1}/${newDate.getDate()}/${newDate.getFullYear()}, ${hours}:${minutes}:${seconds} ${amPm}`;
}

function sortObjects(a, b) {
const nameA = a.name.toUpperCase();
const nameB = b.name.toUpperCase();

let comparison = 0;
if (nameA > nameB) {
comparison = 1;
} else if (nameA < nameB) {
comparison = -1;
}
return comparison;
}

function getContributors(repo) {
fetchJSON(`https://api.github.com/repos/HackYourFuture/${repo}/contributors`, (err, contributors) => {
const root = document.getElementById('repo-container');
if (err) {
createAndAppend('div', root, {
text: err.message,
class: 'alert-error',
});
return;
}
const ul = document.getElementById('contributors-container');
contributors.forEach(contributor => renderContributorsDetails(contributor, ul));
});
}

function main(url) {
fetchJSON(url, (err, repos) => {
const root = document.getElementById('root');
const root = document.getElementById('repo-container');
if (err) {
createAndAppend('div', root, {
text: err.message,
class: 'alert-error',
});
return;
}
const ul = createAndAppend('ul', root);
repos.forEach(repo => renderRepoDetails(repo, ul));

const repoContainer = document.getElementById('repo-container');
const select = document.getElementById('names');

repos.sort(sortObjects);
repos.forEach(repo => addNamesToDropDown(repo, select));
renderRepoDetails(repos[0], repoContainer);
getContributors(repos[0].name);
select.addEventListener('change', () => {
document.getElementById('contributors-container').innerHTML = '';
repoContainer.innerHTML = '';
// This here finds the index of the repo we are looking for
// using the value selected in `select`
renderRepoDetails(
repos[repos.findIndex(el => el.name === select.options[select.selectedIndex].value)],
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is better to use this instead of select here in order to make this function reusable if needed

repoContainer
);
getContributors(select.options[select.selectedIndex].value);
})
});
}

const HYF_REPOS_URL =
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
window.onload = () => main(HYF_REPOS_URL);
}
Loading