Codestin Search App

diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..29e0d587d Binary files /dev/null and b/.DS_Store differ diff --git a/Week2/.DS_Store b/Week2/.DS_Store new file mode 100644 index 000000000..be76b7edd Binary files /dev/null and b/Week2/.DS_Store differ diff --git a/apps/.DS_Store b/apps/.DS_Store new file mode 100644 index 000000000..d02de4292 Binary files /dev/null and b/apps/.DS_Store differ diff --git a/homework/.DS_Store b/homework/.DS_Store new file mode 100644 index 000000000..ac7a66e0e Binary files /dev/null and b/homework/.DS_Store differ diff --git a/homework/App.js b/homework/App.js deleted file mode 100644 index 32b71e34b..000000000 --- a/homework/App.js +++ /dev/null @@ -1,81 +0,0 @@ -'use strict'; - -/* global Util, Repository, Contributor */ - -class App { - constructor(url) { - this.initialize(url); - } - - /** - * 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 - - -

- Repo facts -

- Contributors -

- - - diff --git a/homework/style.css b/homework/style.css deleted file mode 100644 index a8985a8a5..000000000 --- a/homework/style.css +++ /dev/null @@ -1,3 +0,0 @@ -.alert-error { - color: red; -} \ No newline at end of file diff --git a/homework/week-2/.DS_Store b/homework/week-2/.DS_Store new file mode 100644 index 000000000..12f93f1b5 Binary files /dev/null and b/homework/week-2/.DS_Store differ diff --git a/homework/hyf.png b/homework/week-2/hyf.png similarity index 100% rename from homework/hyf.png rename to homework/week-2/hyf.png diff --git a/homework/week-2/index.html b/homework/week-2/index.html new file mode 100644 index 000000000..f88dd5f4e --- /dev/null +++ b/homework/week-2/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Codestin Search App + + + + + + +

+ Repo facts +

+ Contributions +

+ + + + + \ No newline at end of file diff --git a/homework/week-2/indexscript.js b/homework/week-2/indexscript.js new file mode 100644 index 000000000..e334287ac --- /dev/null +++ b/homework/week-2/indexscript.js @@ -0,0 +1,118 @@ +'use strict'; + +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data + +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +function buildSelect(data, repoSelector) { + + data + .map(repo => repo.name) + .map(repo => repo.toUpperCase()) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }) +} + +function main(url) { + + fetch(url) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(repoSelector.innerHTML = '') + .then(json => buildSelect(json, repoSelector)) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) + + const selectElement = document.querySelector('.selector'); + + selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + + displayPage(repoURL, contribURL); + + }) + +} + +function displayContrib(contributor, contributions, avatar) { + let eachPersonUl = createAndAppend('ul', contribDiv) + createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }) + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }) + createAndAppend('li', eachPersonUl, { text: `${contributor}` }) +} + +function displayRepo(repository, description, forks, updated) { + let eachRepoUl = createAndAppend('ul', repoDiv) + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) +} + +function displayPage(repoURL, contribURL) { + fetch(repoURL) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(data => { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); + + fetch(contribURL) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(data => { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) +} + + + +window.onload = () => main(HYF_REPOS_URL) diff --git a/homework/newStyle.css b/homework/week-2/newStyle.css similarity index 77% rename from homework/newStyle.css rename to homework/week-2/newStyle.css index a2747f023..85a60f3de 100644 --- a/homework/newStyle.css +++ b/homework/week-2/newStyle.css @@ -19,6 +19,18 @@ padding: 5px; } +.badge { + background: grey; + float: right; + color: white; + width: 18px; + height: 18px; + text-align: center; + line-height: 18px; + border-radius: 50%; + padding: 10px; +} + .flex-wrapper { font-family: Abel; background-color: grey; @@ -33,6 +45,11 @@ color: #444; } +#contributorsDiv.IMG { + padding: 20px; + margin: 20px; +} + #repo { background-color: whitesmoke; border-color: #2E2C2F; @@ -51,6 +68,11 @@ margin: 20px; } +ul { + list-style-type: none; + padding: 10px; +} + @media screen and (max-width: 600px) { .flex-wrapper { -webkit-flex-direction: column; diff --git a/homework/week-2/package-lock.json b/homework/week-2/package-lock.json new file mode 100644 index 000000000..3497c4396 --- /dev/null +++ b/homework/week-2/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "sadbox", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "node-fetch": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", + "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + } + } +} diff --git a/homework/week-2/package.json b/homework/week-2/package.json new file mode 100644 index 000000000..c7d57ef3c --- /dev/null +++ b/homework/week-2/package.json @@ -0,0 +1,14 @@ +{ + "name": "sadbox", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "node-fetch": "^2.6.0" + } +} diff --git a/homework/week-2/repoSelector.js b/homework/week-2/repoSelector.js new file mode 100644 index 000000000..5ddbf3675 --- /dev/null +++ b/homework/week-2/repoSelector.js @@ -0,0 +1,105 @@ +'use strict'; +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } + else { + elem.setAttribute(key, value); + } + }); + return elem; +} +function buildSelect(data, repoSelector) { + data + .map(repo => repo.name) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }); +} +function main(url) { + fetch(url) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(json => buildSelect(json, repoSelector)) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); +} +//ul contribDiv +function displayContrib(contributor, contributions, avatar) { + // createAndAppend(ul, contribDiv, { id = }) + let eachPersonUl = createAndAppend('ul', contribDiv); + createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }); + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }); + createAndAppend('li', eachPersonUl, { text: `${contributor}` }); + // createAndAppend('li', eachPersonUl, { text: `Contributions: ${contributions}`, id: 'contributionNumber' }) +} +function displayRepo(repository, description, forks, updated) { + let eachRepoUl = createAndAppend('ul', repoDiv); + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }); + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }); + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }); + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }); +} +function displayPage(repoURL, contribURL) { + fetch(repoURL) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(data => { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); + fetch(contribURL) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(data => { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); + console.log('Here is the contribdata'); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); +} +const selectElement = document.querySelector('.selector'); +selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + main(HYF_REPOS_URL); + displayPage(repoURL, contribURL); +}); +window.onload = () => main(HYF_REPOS_URL); diff --git a/homework/week-3/.DS_Store b/homework/week-3/.DS_Store new file mode 100644 index 000000000..5bd0cb4b3 Binary files /dev/null and b/homework/week-3/.DS_Store differ diff --git a/homework/week-3/App.js b/homework/week-3/App.js new file mode 100644 index 000000000..8836424d8 --- /dev/null +++ b/homework/week-3/App.js @@ -0,0 +1,75 @@ +'use strict'; + +class App { + constructor(url) { + this.initialize(url); + } + + async initialize(url) { + this.makeDomElements(); + + try { + const repos = await Util.fetchJSON(url); + this.repos = repos.map(repo => new Repository(repo)); + this.addReposToSelectElement(); + } catch (error) { + this.renderError(error); + } + } + + makeDomElements() { + const root = document.getElementById('root'); + let header = Util.createAndAppend('div', root, { class: 'header' }); + Util.createAndAppend('select', header, { id: 'repoSelector' }); + Util.createAndAppend('div', root, { id: 'container', class: 'flex-wrapper' }); + } + + addReposToSelectElement() { + const selectorElement = document.getElementById('repoSelector'); + for (const repo of this.repos) { + Util.createAndAppend('option', selectorElement, { text: repo.name() }); + } + selectorElement.addEventListener('change', event => { + const repoName = event.target.value; + const chosenRepo = this.repos.filter(repo => repo.name() === repoName)[0]; + this.fetchContributorsAndRender(chosenRepo); + }); + } + + static clearContainer(container) { + while (container.firstChild) { + container.removeChild(container.firstChild); + } + } + + async fetchContributorsAndRender(chosenRepo) { + try { + const repo = chosenRepo; + const contributors = await repo.fetchContributors(); + + const bigContainer = document.getElementById('container'); + App.clearContainer(container); + + const leftDiv = Util.createAndAppend('div', bigContainer, { id: 'repoInfo' }); + const rightDiv = Util.createAndAppend('div', bigContainer, { id: 'repoContributors' }); + + const contributorList = Util.createAndAppend('ul', rightDiv); + + repo.render(leftDiv); + + contributors + .map(contributor => new Contributor(contributor)) + .forEach(contributor => contributor.render(contributorList)); + } catch (error) { + this.renderError(error); + } + } + + renderError(error) { + console.log(error); + } +} + +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + +window.onload = () => new App(HYF_REPOS_URL); diff --git a/homework/week-3/Contributor.js b/homework/week-3/Contributor.js new file mode 100644 index 000000000..a1b2eba15 --- /dev/null +++ b/homework/week-3/Contributor.js @@ -0,0 +1,25 @@ +'use strict'; + +class Contributor { + constructor(contributor) { + this.contributor = contributor; + } + + name() { + return this.contributor.login; + } + + render(container) { + const contributorDiv = Util.createAndAppend('div', container, { id: 'contribDiv' }); + const contributorList = Util.createAndAppend('ul', contributorDiv, { id: 'contribList' }); + Util.createAndAppend('ul', contributorDiv, { id: +this.name() }); + Util.createAndAppend('li', contributorList, { text: 'Name: ' + this.name() }); + Util.createAndAppend('li', contributorList, { + text: 'Contributions: ' + this.contributor.contributions, + }); + Util.createAndAppend('IMG', contributorDiv, { + src: this.contributor.avatar_url, + id: `${this.name()}Avatar`, + }); + } +} diff --git a/homework/week-3/Repository.js b/homework/week-3/Repository.js new file mode 100644 index 000000000..b344c820a --- /dev/null +++ b/homework/week-3/Repository.js @@ -0,0 +1,29 @@ +'use strict'; + +class Repository { + constructor(repository) { + this.repository = repository; + } + + render(container) { + const updated = this.repository.updated_at.split('T')[0]; + const created = this.repository.created_at.split('T')[0]; + App.clearContainer(container); + Util.createAndAppend('div', container, { id: 'repoInnerContainer' }); + let repoInnerContainer = document.getElementById('repoInnerContainer'); + Util.createAndAppend('h3', repoInnerContainer, { text: this.name() }); + const detailsUL = Util.createAndAppend('ul', repoInnerContainer, { id: 'detailsList' }); + Util.createAndAppend('li', detailsUL, { text: `Forks: ${this.repository.forks}` }); + Util.createAndAppend('li', detailsUL, { text: `Description: ${this.repository.description}` }); + Util.createAndAppend('li', detailsUL, { text: 'Created: ' + created }); + Util.createAndAppend('li', detailsUL, { text: 'Last updated: ' + updated }); + } + + fetchContributors() { + return Util.fetchJSON(this.repository.contributors_url); + } + + name() { + return this.repository.name; + } +} diff --git a/homework/week-3/Util.js b/homework/week-3/Util.js new file mode 100644 index 000000000..3bf13b022 --- /dev/null +++ b/homework/week-3/Util.js @@ -0,0 +1,34 @@ +'use strict'; + +class Util { + static createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; + } + + static 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(); + }); + } +} diff --git a/homework/week-3/get.js b/homework/week-3/get.js new file mode 100644 index 000000000..190c82004 --- /dev/null +++ b/homework/week-3/get.js @@ -0,0 +1,12 @@ +function get(url) { + return fetch(url) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(repoSelector.innerHTML = '') + .then(json => buildSelect(json, repoSelector)) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); +} diff --git a/homework/week-3/hyf.png b/homework/week-3/hyf.png new file mode 100644 index 000000000..a4626c91c Binary files /dev/null and b/homework/week-3/hyf.png differ diff --git a/homework/index2.html b/homework/week-3/index.html similarity index 91% rename from homework/index2.html rename to homework/week-3/index.html index 2d1fc8fa7..d5bd2b734 100644 --- a/homework/index2.html +++ b/homework/week-3/index.html @@ -17,11 +17,13 @@ - +

+ + diff --git a/homework/index.js b/homework/week-3/index.js similarity index 99% rename from homework/index.js rename to homework/week-3/index.js index a61a87e3b..7b043a5d3 100644 --- a/homework/index.js +++ b/homework/week-3/index.js @@ -128,6 +128,7 @@ selectElement.addEventListener('change', event => { let contributor = object.login; let contributions = object.contributions; let avatar = object.avatar_url; + console.lo displayContrib(contributor, contributions, avatar); }); console.log('Here is the contribdata'); diff --git a/homework/week-3/indexscript.js b/homework/week-3/indexscript.js new file mode 100644 index 000000000..dd25d15c2 --- /dev/null +++ b/homework/week-3/indexscript.js @@ -0,0 +1,150 @@ + + +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data + +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +// Makes new repository objects + +// class Repository { +// constructor(name, description, forks, updated, liveDiv) { +// this.repository = name; +// this.description = description; +// this.forks = forks; +// this.updated = updated; +// this.location = liveDiv; +// this.prototype.attach = function displayRepo() { +// let eachRepoUl = createAndAppend('ul', liveDiv) +// createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) +// createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) +// createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) +// createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) +// } +// } +// } + +// Makes new contributor objects + +// class Contributor { +// constructor(name, contributions, avatar, containDiv) { +// this.contributor = name; +// this.contributions = contributions; +// this.avatar = avatar; +// this.location = containDiv +// this.prototype.attach = function displayContrib() { +// const eachPersonUl = createAndAppend('ul', containDiv) +// createAndAppend('li', eachPersonUl, { class: 'avatarli', id: `avatarli${contributor}` }) +// createAndAppend('li', eachPersonUl, { class: "badge", text: `${contributions}` }) +// createAndAppend('li', eachPersonUl, { text: `${contributor}` }) +// let myAvatar = document.querySelector(`#avatarli${contributor}`); +// createAndAppend('IMG', myAvatar, { src: avatar, class: 'avatar' }) +// } +// } +// } + +function displayContrib(contributor, contributions, avatar) { + let eachPersonUl = createAndAppend('ul', contribDiv) + createAndAppend('IMG', eachPersonUl, { src: avatar, id: 'avatar' }) + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }) + createAndAppend('li', eachPersonUl, { text: `${contributor}` }) +} + +function displayRepo(repository, description, forks, updated) { + let eachRepoUl = createAndAppend('ul', repoDiv) + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) +} + +//gets data from URL and converts to json +async function getJson(url) { + const response = await fetch(url); + const returnedJson = await response.json(); + return returnedJson +} + +function buildSelect(data, repoSelector) { + clearHTML(repoSelector) + data + .map(repo => repo.name) + .map(repo => repo.toUpperCase()) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }) +} + + +function doRepo(givenRepoData) { + clearHTML(repoDiv) + let repository = givenRepoData.name; + let description = givenRepoData.description; + let forks = givenRepoData.forks; + let updated = givenRepoData.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); +} + +function doContributors(givenContribData) { + clearHTML(contribDiv); + givenContribData.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); +} + +function clearHTML(elementToClear) { + const el = elementToClear + while (el.firstChild) el.removeChild(el.firstChild); +} + +async function displayPage(repoURL, contribURL) { + let foundRepoData = await getJson(repoURL) + let foundContribData = await getJson(contribURL) + doRepo(foundRepoData); + doContributors(foundContribData); + +} + +async function main(url) { + const homepageJson = await getJson(url) + buildSelect(homepageJson, repoSelector) + + const selectElement = document.querySelector('.selector'); + selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + displayPage(repoURL, contribURL); + }) + +} + + +window.onload = () => main(HYF_REPOS_URL) diff --git a/homework/week-3/style.css b/homework/week-3/style.css new file mode 100644 index 000000000..b10da569a --- /dev/null +++ b/homework/week-3/style.css @@ -0,0 +1,118 @@ +.header { + background-color: #176ab0; + color: white; + text-align: center; + padding: 5px; + width: 100vw; +} + +#main-content { + float: left; + padding: 10px; +} + +#footer { + background-color: #176ab0; + color: white; + clear: both; + text-align: center; + padding: 5px; +} + +.badge { + background: grey; + float: right; + color: white; + width: 18px; + height: 18px; + text-align: center; + line-height: 18px; + border-radius: 50%; + padding: 10px; +} + +.flex-wrapper { + font-family: Abel; + width: 100vh; + background-color: grey; + text-align: left; + padding-top: 25px; + padding-bottom: 25px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2E2C2F; + color: #444; +} + +IMG { + padding: 20px; + margin: 20px; + width: 250px; + border-radius: 50%; + background-color: whitesmoke; +} + +#container { + background-color: black; + width: 100vw; + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +#repoContributors { + background-color: #2E2C2F; +} + +#repoInfo { + background-color: #2E2C2F; +} + +#repoInnerContainer { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 50%; + border: 5px; + padding: 20px; + margin: 20px; + margin-left: 20%; + margin-top: 50px; +} + +#repo { + background-color: green; + border-color: #2E2C2F; + width: 20%; + border: 5px; + padding: 20px; + padding-left: 10%; + margin: 20px; +} + +#contribDiv { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 50%; + border: 5px; + padding: 20px; + margin: 20px; +} + +ul { + list-style-type: none; + padding: 10px; +} + +@media screen and (max-width: 600px) { + .flex-wrapper { + -webkit-flex-direction: column; + flex-direction: column; + } + #repo { + width: 80%; + } + #contribDiv { + width: 80%; + } +} \ No newline at end of file diff --git a/package.json b/package.json index fd3398c5b..ebbf8978c 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,14 @@ "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.11.1", "prettier": "^1.15.2" - } + }, + "main": "prettier.config.js", + "repository": { + "type": "git", + "url": "git+https://github.com/Catsudemo/JavaScript3.git" + }, + "bugs": { + "url": "https://github.com/Catsudemo/JavaScript3/issues" + }, + "homepage": "https://github.com/Catsudemo/JavaScript3#readme" }