diff --git a/homework-classes/ContributorsView.js b/homework-classes/ContributorsView.js index 58cb2b984..4a5e2a90b 100755 --- a/homework-classes/ContributorsView.js +++ b/homework-classes/ContributorsView.js @@ -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: `${contributor.login} + ${contributor.login} + ${contributor.contributions}` + }); + }) } } diff --git a/homework-classes/Model.js b/homework-classes/Model.js index 25884a133..7fd581376 100755 --- a/homework-classes/Model.js +++ b/homework-classes/Model.js @@ -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) { + const fetched = await fetch(url); + if (!fetched.ok) { + return new Error(`HTTP ${fetched.status} - ${fetched.statusText}`); + } + return fetched.status === 200 ? fetched.json() : null; } } diff --git a/homework-classes/RepoView.js b/homework-classes/RepoView.js index 073166fea..26d190323 100755 --- a/homework-classes/RepoView.js +++ b/homework-classes/RepoView.js @@ -1,7 +1,7 @@ 'use strict'; { - const { createAndAppend } = window.Util; + const { createAndAppend, formatDate } = window.Util; class RepoView { constructor(container) { @@ -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: ` + Repository: ${repo.name}
+ Description: ${repo.description}
+ Forks: ${repo.forks_count}
+ Updated: ${formatDate(repo.updated_at)}`, + class: 'repo' + }); } } diff --git a/homework-classes/Util.js b/homework-classes/Util.js index dc5d79a87..61d40aaa6 100755 --- a/homework-classes/Util.js +++ b/homework-classes/Util.js @@ -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; diff --git a/homework-classes/index.html b/homework-classes/index.html index ad75b0d08..ab1ae15b7 100755 --- a/homework-classes/index.html +++ b/homework-classes/index.html @@ -1,33 +1,32 @@ - - - - - - - - - - Codestin Search App - - - - -
- - - - - - - - - - + + + + + + + + + + + Codestin Search App + + + + + +
HYF Repositories
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/homework-classes/style.css b/homework-classes/style.css index 90d106051..4bbf5f8b7 100755 --- a/homework-classes/style.css +++ b/homework-classes/style.css @@ -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; +} \ No newline at end of file diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..824e61723 100755 --- a/homework/index.html +++ b/homework/index.html @@ -11,12 +11,23 @@ Codestin Search App - + -
+
HYF Repositories
+
+
+
+ +
+
+
+
    +
    +
    +
    diff --git a/homework/index.js b/homework/index.js index 3886cbac9..c17fc5e1c 100755 --- a/homework/index.js +++ b/homework/index.js @@ -21,7 +21,7 @@ parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { if (key === 'text') { - elem.textContent = value; + elem.innerHTML = value; } else { elem.setAttribute(key, value); } @@ -29,13 +29,85 @@ return elem; } - function renderRepoDetails(repo, ul) { - createAndAppend('li', ul, { text: repo.name }); + function renderRepoDetails(repo, parent) { + createAndAppend('div', parent, { + text: ` + Repository: ${repo.name}
    + Description: ${repo.description}
    + Forks: ${repo.forks_count}
    + Updated: ${formatDate(repo.updated_at)}`, + class: 'repo' + }); + } + + function renderContributorsDetails(contributor, parent) { + createAndAppend('li', parent, { + text: `${contributor.login} + ${contributor.login} + ${contributor.contributions}` + }); + } + + 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, @@ -43,12 +115,28 @@ }); 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)], + 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); } diff --git a/homework/style.css b/homework/style.css index 90d106051..4bbf5f8b7 100755 --- a/homework/style.css +++ b/homework/style.css @@ -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; +} \ No newline at end of file