From d1e2562af313dde33b9d287aca12239d2e659fb9 Mon Sep 17 00:00:00 2001 From: HackYourFuture Date: Tue, 15 Sep 2020 23:42:41 +0200 Subject: [PATCH 1/2] Finished second phase of hackyourrepo-app --- hackyourrepo-app/index.html | 3 + hackyourrepo-app/script.js | 205 +++++++++++++++++++++++++++++++++- hackyourrepo-app/style.css | 214 ++++++++++++++++++++++++++++++++++++ 3 files changed, 418 insertions(+), 4 deletions(-) diff --git a/hackyourrepo-app/index.html b/hackyourrepo-app/index.html index 2b202e708..038d45826 100755 --- a/hackyourrepo-app/index.html +++ b/hackyourrepo-app/index.html @@ -13,6 +13,7 @@ HackYourRepo + + + diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js index a2206d1ed..01657e2ee 100755 --- a/hackyourrepo-app/script.js +++ b/hackyourrepo-app/script.js @@ -1,5 +1,202 @@ -"use strict"; +'use strict'; -/* - Write here your JavaScript for HackYourRepo! -*/ +const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +// Create DOM elements: Header +const headerEl = document.createElement('header'); +headerEl.classList.add('header-container'); +const headerDivEl = document.createElement('div'); +headerDivEl.classList.add('header-elements'); +const headerDivTitleEl = document.createElement('div'); +headerDivTitleEl.classList.add('header-title'); +const headerParagraphEl = document.createElement('p'); +headerParagraphEl.innerText = 'HYF Repositories'; +const selectDivEl = document.createElement('div'); +selectDivEl.classList.add('header-select'); +const selectLabelEl = document.createElement('label'); +selectLabelEl.for = 'selectMenu'; // is this correct to add the for attribute??? +const selectEl = document.createElement('select'); +selectEl.name = 'selectMenu'; +selectEl.id = 'selectMenu'; // is this the correct way to add ad an id??? +const optionEl = document.createElement('option'); +optionEl.innerText = 'select an option...'; + +// Add elements to the DOM: Header +document.body.appendChild(headerEl); +headerEl.appendChild(headerDivEl); +headerDivEl.appendChild(headerDivTitleEl); +headerDivTitleEl.appendChild(headerParagraphEl); +headerDivEl.appendChild(selectDivEl); +selectDivEl.appendChild(selectLabelEl); +selectDivEl.appendChild(selectEl); +selectEl.appendChild(optionEl); + +// Create DOM elements: Main Section +const mainEl = document.createElement('main'); +mainEl.classList.add('main-container'); +const repoSectionEl = document.createElement('section'); +repoSectionEl.classList.add('repo-container'); +const contributorsSectionEl = document.createElement('section'); +contributorsSectionEl.classList.add('contributors-container'); + +// section repo-container is child of main section mainEl +const repoNameDivEl = document.createElement('div'); +repoNameDivEl.classList.add('repo'); +repoNameDivEl.id = 'repository'; +const repoNameParagraphEl = document.createElement('p'); +repoNameParagraphEl.classList.add('repoParagraph'); +repoNameParagraphEl.innerText = 'Repository: '; + +const repoDescriptionDivEl = document.createElement('div'); +repoDescriptionDivEl.classList.add('repo'); +repoDescriptionDivEl.id = 'description'; +const repoDescParagraphEl = document.createElement('p'); +repoDescParagraphEl.classList.add('repoParagraph'); +repoDescParagraphEl.innerText = 'Description: '; + +const repoForksDivEl = document.createElement('div'); +repoForksDivEl.classList.add('repo'); +repoForksDivEl.id = 'forks'; +const repoForksParagraphEl = document.createElement('p'); +repoForksParagraphEl.classList.add('repoParagraph'); +repoForksParagraphEl.innerText = 'Forks: '; + +const repoUpdatedDivEl = document.createElement('div'); +repoUpdatedDivEl.classList.add('repo'); +repoUpdatedDivEl.id = 'updated'; +const repoUpParagraphEl = document.createElement('p'); +repoUpParagraphEl.classList.add('repoParagraph'); +repoUpParagraphEl.innerText = 'Updated: '; + +// section contributors-container is child of main section mainEl +const contributorsDivEl = document.createElement('div'); +contributorsDivEl.classList.add('contributors'); +contributorsDivEl.id = 'contributors'; +const contributorsParagraphEl = document.createElement('p'); +contributorsParagraphEl.classList.add('contributorsParagraph'); +contributorsParagraphEl.innerText = 'Contributors: '; +const contributorCard = document.createElement('div'); + +// Add elements to the DOM: Main Section +document.body.appendChild(mainEl); +mainEl.appendChild(repoSectionEl); +mainEl.appendChild(contributorsSectionEl); + +repoSectionEl.appendChild(repoNameDivEl); +repoNameDivEl.appendChild(repoNameParagraphEl); +repoSectionEl.appendChild(repoDescriptionDivEl); +repoDescriptionDivEl.appendChild(repoDescParagraphEl); +repoSectionEl.appendChild(repoForksDivEl); +repoForksDivEl.appendChild(repoForksParagraphEl); +repoSectionEl.appendChild(repoUpdatedDivEl); +repoUpdatedDivEl.appendChild(repoUpParagraphEl); + +contributorsSectionEl.appendChild(contributorsDivEl); +contributorsDivEl.appendChild(contributorsParagraphEl); + +// Create DOM elements: Footer +const footerEl = document.createElement('footer'); +footerEl.classList.add('footer-container'); +const footerParagraphEl = document.createElement('p'); +footerParagraphEl.innerText = 'by Danny Osorio'; + +const myGithubLinkEl = document.createElement('a'); +myGithubLinkEl.href = 'https://github.com/dyosorio'; +myGithubLinkEl.target = '_blank'; +const myGithubItemEl = document.createElement('i'); +myGithubItemEl.classList.add('fab'); +myGithubItemEl.classList.add('fa-github'); + +const myCodepenLinkEl = document.createElement('a'); +myCodepenLinkEl.href = 'https://codepen.io/danny-osorio'; +myCodepenLinkEl.target = '_blank'; +const myCodepenItemEl = document.createElement('i'); +myCodepenItemEl.classList.add('fab'); +myCodepenItemEl.classList.add('fa-codepen'); + +// Add elements to the DOM: Footer +document.body.appendChild(footerEl); +footerEl.appendChild(footerParagraphEl); +footerParagraphEl.appendChild(myGithubLinkEl); +myGithubLinkEl.appendChild(myGithubItemEl); +footerParagraphEl.appendChild(myCodepenLinkEl); +myCodepenLinkEl.appendChild(myCodepenItemEl); + +function main() { + // create fetch function + function fetchData(url) { + return fetch(url) + .then(response => response.json()) + .catch(error => { + console.log(error); + mainEl.innerHTML = `
${error}
`; + }); + } + + // add repoData to the select menu when the select element is clicked + selectEl.addEventListener('click', () => { + fetchData(url).then(data => { + console.log(data); + addRepoNamesToSelectMenu(data); // put this data into the DOM + }); + }); + + // generate the repo names to feed the select tag + function addRepoNamesToSelectMenu(data) { + // grab array of objects + const repoArray = data; + console.log(repoArray); + + for (let index = 0; index < repoArray.length; index++) { + const repoName = repoArray[index].name; + const repOptionEl = document.createElement('option'); + repOptionEl.innerHTML = ` + + `; + selectEl.appendChild(repOptionEl); + } + } + + // The 'change' event is fired when an alteration to the