diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..58702a2e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..18e0a55c 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,19 @@ Replace this readme with your own information about your project. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This week we practiced on fetching API from github by extracting data from our forked Technigo repos. +We also learned how to use tokens and adding a chart with chart.js. ## The problem Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +This time I learned to ask for help sooner than later since I got stuck with fetching pull requests inside a function. +The problem was solved by nesting the fetch of API for pull requests inside the first fetch. Another problem I encountered was not knowing how to use the tokens correctly and how to make Netlify show my index.html site. But after some added information in the notion page the problem was easily fixed! +If I had more time I would try to play around with API:s more and presenting the data with another chart. + ## View it live Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. + +https://dazzling-edison-30e09d.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..e43e8646 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,37 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +// Creating a function which is invoked in js.file. +const showChart = (repos) => { + Chart.defaults.font.size = 18; + + const data = { + labels: ['Completed projects', 'Remaining projects'], + datasets: [{ + data: [repos, 19-repos], + backgroundColor: ['rgb(27, 20, 100)', 'rgb(255, 255, 0)'], + borderWidth: 2, + borderColor: 'rgb(27, 20, 100)', + hoverBorderWidth:3, + hoverBorderColor: 'rgb(27, 20, 100)', + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: { + plugins: { + legend: { + display: true, + position: 'bottom', + labels: { + color: 'rgb(27, 20, 100)', + } + } + } + } + }; + + const myChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..36b66316 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,24 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+

GitHub Tracker

- - - - +
+
+
+
+
+

Technigo projects

+ +
+
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..b606f3a4 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,107 @@ +const projects = document.getElementById('projects') +const profile = document.getElementById('profile') +const repos = document.getElementById('repos') + +const username = 'StephannieMedenilla' +const USER_PROFILE = `https://api.github.com/users/SteppbySteph` +const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` + + + +// const options = { +// method: 'GET', +// headers: { +// Authorization: `token ${GITHUB_TOKEN}` +// } +// } + + +//----USER NAME & PROFILE----// + +const getProfile = () => { + fetch(USER_PROFILE) + .then(res => res.json()) + .then(data => { + const user = data.name + const avatar = data.avatar_url + profile.innerHTML += ` +
+ +

${user}

+
+ ` + }) +} + +getProfile() + +//----REPOSITORIES WITH DATA OF NAME, PUSH DATE, DEFAULT BRANCH, URL, PULL REQUESTS AND getCommitNr ()----// + +const getRepos = () => { + fetch(USER_REPO) + .then(res => res.json()) + .then(data => { + // Creating constsant for my filtered repos + forkedRepos = data.filter((repo) => repo.name.startsWith('project-')) + + // Creating variable to pass on to showChart(). + allMyRepos = forkedRepos.length + + // forEach function to create HTML elements & pull requests + forkedRepos.forEach((repo) => { + + // Getting Repo Name + repoName = repo.name; + + // Getting Most Recent Push Date which will be formated according to 'substr' method. + pushDate = repo.pushed_at.substr(0, 10) + + // Getting the Default Branch + defaultBranch = repo.default_branch + + // Getting the URL of the repo + urlRepo = repo.html_url + + // Creating innerHTML to insert above info + projects.innerHTML += ` +
+

Repository name:
${repoName}

+

Most recent push date: ${pushDate}

+

Name of default branch: ${defaultBranch}

+

Github repo URL

+

+
+ ` + // Fetch for all pull requests. + const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`; + fetch(USER_PR) + .then(res => res.json()) + .then(AllpullRequests => { + const myPR = AllpullRequests.find((pull) => pull.user.login === repo.owner.login) + + // My pull requests are saved in the variable myPR which is passed on and invokes the function getCommit. + // If there are no commits it should return 'No pull requests made'. + if(myPR) { + getCommitNr(myPR, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML += 'No pull request made' + } + }) + }) + showChart(allMyRepos) + }) +} + +// After extracting the pull requests done by owner(see above) we now fetch data from each of the pull request (myPR ---> myPull) from the API URL commit_url. +//This is displayed in the innerHTML with the value from commit.length. +const getCommitNr = (myPull, myRepoName) => { + fetch(myPull.commits_url) + .then(res => res.json()) + .then((commit) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += ` +

Number of commits: ${commit.length}

+ ` + }) +} +// Invoking function. +getRepos() diff --git a/code/style.css b/code/style.css index 7c8ad447..a8530861 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,133 @@ + +* { + box-sizing: border-box; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: rgb(253, 146, 166); + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: rgb(27, 20, 100); +} + +h1 { + text-transform: uppercase; + display: inline; + display: flex; + justify-content: center; + font-size: 30px; + margin-top: 10px; +} + +h3 { + border-bottom: solid 1px black; + margin-bottom: 0.5em; + font-size: 18px; +} + +.profile-info { + padding-left: 1em; + display: flex; + font-size: 20px; + width: 100vw; + align-items: center; + padding-left: 5vw; + margin-top: 5px; + margin-bottom: 10px; +} + +.project-container { + display: grid; + grid-template-columns: 90vw; + border-top: double 3px rgb(27, 20, 100); + padding-left: 5vw; + padding-right: 5vw; + padding-top: 1vh; + padding-bottom: 5vh; +} + +.projects-main { + margin-bottom: 1vh; +} + +.projectblock { + background-color: #f267a0; + border-radius: 5px; + box-shadow: 5px 10px; + margin-bottom: 3vh; + padding: 1em; + font-size: 14px; + line-height: 1.5em; +} + +.avatar { + width: 2em; + border-radius: 50%; + margin-right: 10px; +} + +.chartCSS h1 { + margin-bottom: 1em; + font-size: 24px; +} + +@media (min-width: 667px) and (max-width: 1024px) { + + .project-container { + grid-template-columns: 90vw; + grid-template-rows: 1fr auto; + } + + .projects-main { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .projectblock { + font-size: 1em; + margin-left: 10px; + margin-right: 10px; + } + + .chartCSS { + width: 40vw; + justify-self: center; + } +} + +@media (min-width: 1025px) { + + .project-container { + grid-template-columns: 90vw; + grid-template-rows: 1fr auto; + } + + .projects-main { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + + .projectblock { + font-size: 18px; + margin-left: 10px; + margin-right: 10px; + } + + .chartCSS { + width: 40vw; + justify-self: center; + } + + .chartCSS h1 { + margin-bottom: 1em; + font-size: 25px; + } + + h3 { + border-bottom: solid 1px black; + margin-bottom: 0.5em; + font-size: 25px; + } +} +