diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..b3bf82c8 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..207e4408 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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. +This project is about making a github tracker for our technigo projects. it is fetched with API ## 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? +it took some time to manage to get the api fetches working and displaying in a correct way, but I'm proud that it is working now. if I had more time I would add some more features such as perhaps a searchbar or more data to display inside. ## 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://waliem-github-tracker.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..e4a67957 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/Octocat.png b/code/Octocat.png new file mode 100644 index 00000000..91057da4 Binary files /dev/null and b/code/Octocat.png differ diff --git a/code/TO DO-LIST b/code/TO DO-LIST new file mode 100644 index 00000000..e69de29b diff --git a/code/chart.js b/code/chart.js index 92e85a30..6f63cca9 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,22 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d") //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - 6], + backgroundColor: ["rgb(255, 92, 88)", "rgb(242, 141, 138)"], + hoverOffset: 4, + }, + ], + }, + } + const myChart = new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..81b6edc6 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,34 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + - - + + + + - - - - \ No newline at end of file + +
+

GITHUB TRACKER

+ +
+ +
+ +
+ +
+ + + + + diff --git a/code/script.js b/code/script.js index e69de29b..c7b6f3a8 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,77 @@ +const USER = "waliem" +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const USER_INFO_URL = `https://api.github.com/users/${USER}` + +const projectsContainer = document.getElementById("projects") +const userContainer = document.getElementById("user-info") + +// function for getting my user info +const getUserInfo = () => { + fetch(USER_INFO_URL) + .then((response) => response.json()) + .then((data) => { + userContainer.innerHTML += ` + User profile picture +

${data.login}

Front end developer student

Based in Gothenburg

` + }) +} + +// function for getting all my repos and filter them to get only technigo projects and displaying them in inner html +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + let forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ) + forkedRepos.forEach( + (repo) => + (projectsContainer.innerHTML += ` +
+ ${ + repo.name + }

Default branch: ${repo.default_branch}

+

Most recent push: ${new Date(repo.pushed_at).toDateString()}

+

Commits:

`) + ) + + drawChart(forkedRepos.length) + getPullRequests(forkedRepos) + }) +} + +//function for fetching my pull requests +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + const PULLS_URL = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + + fetch(PULLS_URL) + .then((res) => res.json()) + .then((data) => { + const myPulls = data.find( + (pull) => pull.user.login === repo.owner.login + ) + // if/else conditon if I do not have any pull requests or commits it will display "no PR or commits done" + if (myPulls) { + getMyCommits(myPulls.commits_url, repo.name) + } else { + document.getElementById( + `commit-${repo.name}` + ).innerHTML = `No pull request or commits done` + } + }) + }) +} + +// function for getting the number of commits +const getMyCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + console.log("my commits!", data) + }) +} + +getUserInfo() +getRepos() diff --git a/code/style.css b/code/style.css index 7c8ad447..d2995094 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,178 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #f8e2cf; + display: flex; + flex-direction: column; + color: black; + font-family: "Montserrat", sans-serif; +} + +#user-info { + display: flex; + justify-content: center; +} + +.profile-img { + border-radius: 50%; + width: 30%; + height: 30%; + align-self: center; + box-shadow: 8px 8px 8px rgb(114, 114, 114); +} + +#profile-name { + flex-direction: column; + margin-left: 20px; +} + +header { + display: flex; + justify-content: center; +} + +.github-icon { + width: 20%; + height: auto; +} + +h1 { + align-self: center; + font-size: 25px; +} + +h2 { + font-size: 20px; +} + +h3 { + font-size: 12px; +} + +#projects { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + column-gap: 1rem; + row-gap: 1rem; + margin: 30px 0px 20px 0px; +} + +.project-box { + background: #ff5c58; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + padding: 10px 0px 10px 20px; + box-shadow: 10px 10px 5px rgb(155, 155, 155); + -moz-box-shadow: 10px 10px 5px rgb(155, 155, 155); + -webkit-box-shadow: 10px 10px 5px rgb(155, 155, 155); + -khtml-box-shadow: 10px 10px 5px rgb(155, 155, 155); +} + +.project-box:hover { + background-color: #bf3d39; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +a { + font-size: 15px; + color: black; + text-decoration: none; + text-transform: capitalize; +} + +.usr-name:hover { + color: #ff5c58; + text-transform: lowercase; +} + +a:hover { + color: #f8e2cf; +} + +.chart-box { + width: 80%; + display: flex; + align-self: center; +} + +/* ---- media queries tablet ---- */ + +@media (min-width: 668px) and (max-width: 1024px) { + .profile-img { + width: 25%; + height: 25%; + } + + #profile-name { + padding-left: 10px; + align-self: center; + } + + h1 { + font-size: 40px; + } + + h2 { + font-size: 30px; + } + + a { + font-size: 25px; + } + + .chart-box { + width: 60%; + align-self: center; + } +} + +/* ---- media queries desktop ---- */ + +@media (min-width: 1025px) { + #user-info { + justify-content: center; + } + + .github-icon { + width: 15%; + height: auto; + } + + .profile-img { + width: 20%; + } + + #profile-name { + align-self: center; + margin-left: 20px; + } + + h1 { + font-size: 60px; + } + + h2 { + font-size: 40px; + } + + h3 { + font-size: 20px; + } + + #projects { + grid-template-columns: repeat(auto-fit, minmax(400px, 2fr)); + max-width: 80%; + align-self: center; + margin-top: 60px; + } + + a { + font-size: 20px; + } + + .chart-box { + width: 25%; + } +}