Skip to content

Homework week3 #6

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
annagabain wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Homework week3 #6

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0c4d93b
async-await- try-catch
annagabain Aug 30, 2019
2188805
just my class trainer function so far :S
annagabain Sep 1, 2019
9ed323d
tested steps in the end
annagabain Sep 1, 2019
9c3776f
worked with Util. in app.js
annagabain Sep 5, 2019
5d27d2d
Repository and Contributor classes
annagabain Sep 9, 2019
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
87 changes: 81 additions & 6 deletions homework/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,89 @@ class App {
* Initialization
* @param {string} url The GitHub URL for obtaining the organization's repositories.
*/
async initialize(url) {
// Add code here to initialize your app
// 1. Create the fixed HTML elements of your page
// 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element

async initialize(url) {
const root = document.getElementById('root');
Util.createAndAppend('h1', root, { text: 'REPOSITORES' });

@mattiaslundberg mattiaslundberg Sep 7, 2019

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I can't pass you on this part. You need to use the classes Contributor and Repository with the appropriate render methods, this is important to understand before the react module. Let me know if you need any assistance with this!

@annagabain annagabain Sep 9, 2019 •
edited
Loading

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

Alright :) I have watched a bunch of tutorials on this and hope to finally to be able to solve it especially since we got even more additional guidance on Slack. It takes a while to find out how these all .js files are connected, but once I understand it, I hope to be able to use it over and over again in the future projects. My main issue is being able to put apart and use small parts of the huge functions without damaging the functionality.


function compare(a, b) {
if (a.name<b.name){
return -1;
}
if (a.name>b.name){
return 1
}
return 0;
}


try {
const repositoryData = await Util.fetchJSON(url);
const select = Util.createAndAppend('select', root);
// createAndAppend('option', select, { text: 'Click here to choose a Repository' });

let alphabeticalSorting = repositoryData.sort(compare);
alphabeticalSorting.forEach(repo => {
const name = repo.name;
Util.createAndAppend('option', select, { text: name });
});

const repoInfo = Util.createAndAppend('div', forRepoBlock);
const contribs = Util.createAndAppend('div', forContributorsBlock);

select.addEventListener('change', evt => {
const selectedRepo = evt.target.value;
const repo = alphabeticalSorting.filter(r => r.name == selectedRepo)[0];
getRepoData(repo, repoInfo, contribs);
});

let firstRepo = alphabeticalSorting[0]
getRepoData(firstRepo, repoInfo, contribs);
}
catch(err) {
const root = document.getElementById('root');
Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' });
}





async function getRepoData(repo, repoInfo, contribs) {
repoInfo.innerHTML = '';
contribs.innerHTML = '';

const addInfo = (label, value) => {
const container = Util.createAndAppend('div', repoInfo);
Util.createAndAppend('span', container, { text: label });
Util.createAndAppend('span', container, { text: value });
};
addInfo('Name: ', repo.name);
addInfo('Desciption: ', repo.description);
addInfo('Number of forks: ', repo.forks);
addInfo('Updated: ', new Date(repo.updated_at));

const contribsUrl = repo.contributors_url;
try {
const contribData = await Util.fetchJSON(contribsUrl);
contribData.forEach(contributor => {
// createAndAppend('p', contribs, { text: 'hej'});
Util.createAndAppend('img', contribs, { src: contributor.avatar_url, height: 40, class: 'picture' });
Util.createAndAppend('span', contribs, { text: contributor.login, class: 'contributorName' });
Util.createAndAppend('span', contribs, { text: contributor.contributions, class: 'numberContributions'});
Util.createAndAppend('div', contribs, { text: '\n'});
});
}
catch(err) {
const root = document.getElementById('root');
Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' });
}
}





Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code

try {
const repos = await Util.fetchJSON(url);
Expand Down Expand Up @@ -78,4 +153,4 @@ class App {

const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

window.onload = () => new App(HYF_REPOS_URL);
window.onload = () => new App(HYF_REPOS_URL);
2 changes: 1 addition & 1 deletion homework/Contributor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ class Contributor {
// TODO: replace the next line with your code.
Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
}
}
}
70 changes: 70 additions & 0 deletions homework/MY-Anna-classes-trainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@


class Person {
constructor (name, age, height, eyecolour) {
this.name = name;
this.age = age;
this.height = height;
this.eyecolour = eyecolour;
}

descriptiveSentence(){
return this.name + ' is ' + this.age + ' years old'+ ', ' + this.height + ' cm tall'+ ' and has ' + this.eyecolour + ' eyes.'
}
}


class People {
constructor(person1, person2) {
this.person1=person1
this.person2=person2
}
descriptiveSentence(){
return this.person1.descriptiveSentence() + '\n' + this.person2.descriptiveSentence()
//return this.name + ' is ' + this.age + ', ' + this.height + ' cm tall'+ ' and has ' + this.eyecolour + ' eyes'
}

}

class MorePeople {
constructor(peopleList) {
this.peopleList=peopleList
}
descriptiveSentence(){
let collectAllthePersons = ""
for ( let person of peopleList){

collectAllthePersons += person.descriptiveSentence() + '\n'

}

return collectAllthePersons
}
}

let person1 = new Person('John', 25, 180, 'blue')
let person2 = new Person('Jane', 28, 160, 'green')

let person3 = new Person('Jack', 64, 190, 'brown')
let person4 = new Person('Anna', 30, 168, 'gray-green')

const people = new People (person1, person2,)

const peopleList = [person1, person2, person3, person4]
const morePeople = new MorePeople (peopleList)





console.log(morePeople.descriptiveSentence())


// Tested Steps
// console.log(person1.name + ' is ' + person1.age + ', ' + person1.height + ' cm tall'+ ' and has ' + person1.eyecolour + ' eyes')
// console.log(person1.descriptiveSentence()) //John is 25, 180 cm tall and has blue eyes
// console.log(person2.descriptiveSentence()) //Jane is 28, 160 cm tall and has green eyes.
// console.log(people.descriptiveSentence())
//John is 25, 180 cm tall and has blue eyes
//Jane is 28, 160 cm tall and has green eyes.

2 changes: 1 addition & 1 deletion homework/Repository.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@ class Repository {
name() {
return this.repository.name;
}
}
}
56 changes: 38 additions & 18 deletions homework/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
<!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>

<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>
<header>
<div id="root">
<label>HYF Repositories </label>
</div>

<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</header>

<body>

<div id="container">
<div id="forRepoBlock"><p>Repositories</p></div>

<div id="forContributorsBlock">
<div><p>Contributions</p></div>
<!-- <div><p>Name</p></div>
<div><p>Number of contributions</p></div>
<div><p>Picture</p></div> -->

</html>
</div>

<script src="./index.js"></script>

</body>
</html>
112 changes: 90 additions & 22 deletions homework/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
'use strict';

{
function fetchJSON(url, cb) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status < 400) {
cb(null, xhr.response);
} else {
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
}
};
xhr.onerror = () => cb(new Error('Network request failed'));
xhr.send();
function fetchJSON(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status < 400) {
resolve(xhr.response);
} else {
reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
}
};
xhr.onerror = () => {
reject(new Error('Network request failed'));
};
xhr.send();
})

}


function createAndAppend(name, parent, options = {}) {
const elem = document.createElement(name);
parent.appendChild(elem);
Expand All @@ -30,18 +36,80 @@
return elem;
}

function main(url) {
fetchJSON(url, (err, data) => {
function compare(a, b) {
if (a.name<b.name){
return -1;
}
if (a.name>b.name){
return 1
}
return 0;
}

async function main(url) {
try {
const repositoryData = await fetchJSON(url);

@mattiaslundberg mattiaslundberg Sep 7, 2019

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The async/await rewrite looks good!

const select = createAndAppend('select', root);
// createAndAppend('option', select, { text: 'Click here to choose a Repository' });

let alphabeticalSorting = repositoryData.sort(compare);
alphabeticalSorting.forEach(repo => {
const name = repo.name;
createAndAppend('option', select, { text: name });
});

const repoInfo = createAndAppend('div', forRepoBlock);
const contribs = createAndAppend('div', forContributorsBlock);

select.addEventListener('change', evt => {
const selectedRepo = evt.target.value;
const repo = alphabeticalSorting.filter(r => r.name == selectedRepo)[0];
getRepoData(repo, repoInfo, contribs);
});

let firstRepo = alphabeticalSorting[0]
getRepoData(firstRepo, repoInfo, contribs);
}
catch(err) {
const root = document.getElementById('root');
if (err) {
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
} else {
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
}
});
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
}
}

async function getRepoData(repo, repoInfo, contribs) {

// console.log(repo);
repoInfo.innerHTML = '';
contribs.innerHTML = '';

const addInfo = (label, value) => {
const container = createAndAppend('div', repoInfo);
createAndAppend('span', container, { text: label });
createAndAppend('span', container, { text: value });
};
addInfo('Name: ', repo.name);
addInfo('Desciption: ', repo.description);
addInfo('Number of forks: ', repo.forks);
addInfo('Updated: ', new Date(repo.updated_at));

const contribsUrl = repo.contributors_url;
try {
const contribData = await fetchJSON(contribsUrl);
contribData.forEach(contributor => {
// createAndAppend('p', contribs, { text: 'hej'});
createAndAppend('img', contribs, { src: contributor.avatar_url, height: 40, class: 'picture' });
createAndAppend('span', contribs, { text: contributor.login, class: 'contributorName' });
createAndAppend('span', contribs, { text: contributor.contributions, class: 'numberContributions'});
createAndAppend('div', contribs, { text: '\n'});
});
}
catch(err) {
const root = document.getElementById('root');
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
}
}

const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

window.onload = () => main(HYF_REPOS_URL);
}
}
Loading