diff --git a/README.md b/README.md index 1613a3b0..145bc909 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # GitHub Tracker -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. +The assignment was to create a GitHub tracker site for the projects froked from Technigo, using fetch and API technologies from the GitHub database. ## 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? +The challange was using GitHub APIs and collect the relevant information. It was a good practise to learn more about APIs and fetch function. +I tried to keep the design simple and as similar as the github website. +I have fulfilled all the blue requirements but if I had more time I would show the last commit message and language percentages of each project.. ## 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://github-tracker-pde.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..41c9ae84 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,38 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +//DOM-selector for the canvas +const ctx = document.getElementById("chart").getContext("2d") -//"Draw" the chart here 👇 +//Draw the chart here +const drawChart = (amount) => { + const config = { + type: "bar", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "Technigo Bootcamp Projects", + data: [amount, 20 - amount], + barPercentage: 20, + barThickness: 100, + maxBarThickness: 100, + borderRadius: 2, + + backgroundColor: [ + "rgba(255, 98, 132, 0.3)", + "rgba(255, 169, 63, 0.3)", + ], + borderColor: ["rgb(255, 98, 132)", "rgb(255, 169, 63)"], + borderWidth: 1, + }, + ], + }, + options: { + plugins: { + legend: { + position: "bottom", + }, + }, + }, + } + + const myChart = new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b976bf8d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,52 @@ + - - - + + + Project GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
+
+

+ + GitHub Tracker +

+
- - +
+
+ +
+ +
+
+
+

Projects at Technigo

+
+
+
+ + + - \ No newline at end of file + + diff --git a/code/script.js b/code/script.js index e69de29b..e74d9d49 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,122 @@ +// API`S and GLOBALS +const username = "pdetli" +const REPOS_URL = `https://api.github.com/users/${username}/repos` +const USER_BIO_API = `https://api.github.com/users/${username}` + +// DOM SELECTORS +const projectsContainer = document.getElementById("projects") +const userInfoContainer = document.getElementById("userInfoContainer") + +// FUNCTIONS + +//fetch the username, bio and picture from github with json +const getUsernameAndImage = () => { + fetch(USER_BIO_API) + .then((res) => res.json()) + .then((data) => { + console.log(data) + const pictureOfUser = data.avatar_url + const userBio = data.bio + const userLocation = data.location + userInfoContainer.innerHTML += ` + Picture of gitHub-user +
+ @${username} +

< ${userBio} />

+

${userLocation}

+
+ ` + }) +} + +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + console.log(data) + //to filter the data and to keep all the names start with project- + //repo.fork === true and repo.fork gives the same result with "boolean is true" + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ) + //dispay the repo names in the browser + forkedRepos.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ ${repo.name} +

View it Live â–¶

+ + ${repo.language} +

Default branch: ${repo.default_branch}

+

Recent push: ${new Date( + repo.pushed_at + ).toDateString()}

+

+
+ ` + + // display the most used language for each project and change the color depending on the language + const repoLanguage = document.querySelectorAll(".repo-language") + + repoLanguage.forEach((span) => { + if (span.nextElementSibling.innerText === "JavaScript") { + span.style.backgroundColor = "#f1e05a" + } else if (span.nextElementSibling.innerText === "HTML") { + span.style.backgroundColor = "#e34c26" + } else if (span.nextElementSibling.innerText === "CSS") { + span.style.backgroundColor = "#664e88" + } + }) + }) + + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) // draw chart with the forkedRepos data + }) +} + +const getPullRequests = (allRepos) => { + //Get all the PRs for each project. + allRepos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ) + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull request yet done :(" + } + + /* 1. Find only the PR that you made by comparing pull.user.login with repo.owner.login + 2. Get the commits for each repo by using the commits_url as an argument to call another function + 3. we can also get the comments for each PR by calling another function with the review_comments_url as argument */ + }) + }) +} + +// fetch the number of commits +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + let commitMessage = data[0].commit.message + document.getElementById( + `commit-${myRepoName}` + ).innerHTML += `

Number of commits: ${data.length}

` + }) +} + +getUsernameAndImage() +getRepos() diff --git a/code/style.css b/code/style.css index 7c8ad447..cd317eb2 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,236 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #10141a; + margin: 0; + padding: 0; + min-width: 450px; + color: #eeeeee; + font-family: "Nixie One", cursive; +} + +header { + font-size: 30px; + margin-left: 30px; + color: #58a6ff; + font-family: Arial, Helvetica, sans-serif; +} + +.repo-chart { + width: 50%; + margin: auto; + padding: 20px; +} + +/* ----- USER INFORMATION SECTION -----*/ +.user-info-container { + display: flex; + flex-direction: column; + padding: 20px; + color: #eeeeee; + margin: auto; +} + +/* one comes from script file */ +.user-information-container { + margin: auto 10px; + text-align: center; +} + +.user-picture { + width: 200px; + height: 200px; + border-radius: 50%; + border: solid 1px #434343; + margin: 20px auto; +} + +.user-info-name { + font-size: 20px; + text-decoration: none; + color: #eeeeee; + font-weight: bold; +} + +.user-info-name:hover { + color: #58a6ff; +} +.user-info-bio { + font-size: 18px; + text-decoration: none; +} + +/* ----- PROJECT CARDS SECTION -----*/ +.projects-title { + font-size: 30px; + margin: auto; + padding: 10px 10px 30px 10px; + width: 80%; + max-width: 700px; + text-align: center; +} + +#projects { + margin: auto; + display: flex; + flex-direction: column; + width: 80%; +} + +.project-card { + font-size: 16px; + border: solid 1px rgb(78, 78, 80); + border-radius: 10px; + margin: 5px 10px; + padding: 10px; + max-width: 600px; + background-color: #151a22; +} + +.project-names-with-pr { + display: flex; + color: #58a6ff; + text-decoration: none; + font-size: 22px; + padding-bottom: 10px; + font-family: "Recursive", sans-serif; +} + +.project-names-with-pr:hover { + text-decoration: underline; +} + +.view-live { + font-family: "Recursive", sans-serif; + text-decoration: none; + font-size: 16px; + color: #44c39abf; +} +.view-live:hover { + color: #eeeeee; +} + +.repo-language { + position: relative; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid; +} + +/* ----- FOOTER SECTION ----- */ +.fa { + text-decoration: none; + margin: 5px 2px; + border-radius: 50%; + color: #58a6ff; +} + +footer { + bottom: 0; + width: 100%; + background-color: #151a22; + color: #eeeeee; + text-align: center; + padding: 10px 0 10px 0; + margin-top: 100px; +} + +.footer-text { + padding: 0; + margin: 0; + font-size: 12px; + line-height: 18px; +} + +.technigo { + text-decoration: none; + color: orange; +} + +.technigo:hover { + color: blue; +} + +@media (min-width: 768px) { + #projects { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 10px; + justify-self: center; + margin: 10px; + width: auto; + } + .project-card { + border: 2px solid #eeeeee; + border-radius: 10px; + grid-column: span 1; + font-size: 16px; + padding: 30px; + width: 80%; + min-width: 220px; + justify-content: space-between; + margin: 0 auto; + border: 1px solid #393e46; + } + + .repo-chart { + width: 30%; + margin: auto; + padding: 20px; + } +} + +@media (min-width: 1024px) { + .main { + display: flex; + flex-direction: row; + margin: 0 auto; + max-width: 1300px; + } + .right-section { + padding: 20px 0 0 0; + margin-top: 1.5rem; + margin: 0 auto; + min-width: 30%; + } + + .left-section { + width: 100%; + align-content: flex-start; + } + + .user-info-container { + display: flex; + flex-direction: column; + margin: 20px; + align-items: center; + } + .user-picture { + width: 200px; + height: 200px; + max-width: 80%; + max-height: 80%; + border-radius: 50%; + border: solid 1px #434343; + margin: 20px; + } + + .user-info-name { + font-size: 24px; + text-decoration: none; + color: #eeeeee; + font-weight: bold; + text-align: center; + } + + .user-info-bio { + font-size: 18px; + text-decoration: none; + } + + .repo-chart { + width: 80%; + margin: auto; + padding: 20px; + } +}