diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..a722daca 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## 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://project-github-tracker-idautterstrom.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..ae207d4d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,31 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +console.log('hello chart') + +const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left' + ], + datasets: [{ + label: 'My First Dataset', + data: [6, 20-6], + backgroundColor: [ + '1a1b1a', + 'black' + ], + borderColor: [ + 'none' + ], + hoverOffset: 4 + }] + }, + }; + +const repoChart = new Chart(ctx, config) + + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..9268a84b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,19 +1,47 @@ + Project GitHub Tracker + + + + + + + + -

GitHub Tracker

-

Projects:

-
- - +
+

GitHub tracker

+
+ +
+
+
+
+ + +
+ +
+
+ +
+

projects

+
+
+ +
+ + +
diff --git a/code/script.js b/code/script.js index e69de29b..58c89cb0 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,52 @@ +const API_KEY = "https://api.github.com/users/idautterstrom/repos"; //Endpoint to get all my repos +const API_USER = "https://api.github.com/users/idautterstrom"; //Endpoint to my username and profile picture + + +const projects = document.getElementById("projects"); +const user = document.getElementById("user") + +fetch(API_USER) +.then((res) => res.json()) +.then((git_user) => { + console.log(git_user) //Min user + user.innerHTML = + `${git_user.login} +
profilepicture` +}) + +fetch(API_KEY) + .then((res) => res.json()) + .then((git_list) => { + console.log(git_list) + git_list.forEach(repo => { + console.log(repo.fork) + if (repo.fork) { + let commits = numberOfCommits(repo) + projects.innerHTML += + `
+

Name of repo: ${repo.name}

+

${repo.git_url}

+

Branch: ${repo.default_branch}

+

Last pushed: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits: ${commits}

+
` + } + }); + }) + +const numberOfCommits = (repo) => { + const base_url = "https://api.github.com/"; + const owner = "idautterstrom"; + const sha = "master"; + console.log(repo.name); + let compare_url = base_url + "repos/" + owner + "/" + repo.name + "/commits"; + fetch(compare_url) + .then((res) => res.json()) + .then((data) => { + console.log(data.length); + return data.length; + }); + }; + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..8177fd48 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,102 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; + font-family: "Montserrat"; + color: whitesmoke; + background-color: black; + text-align: center; + display: grid; + grid-template-columns: 1fr; +} + +.header { + margin-top: 30px; + margin-bottom: 40px; +} + +.user-name { + color: rgb(135, 133, 133); + text-decoration: none; +} + +.user-name:hover { + color: whitesmoke; +} + +.profile_picture { + width: 100px; + border-radius: 4cm; + margin-top: 25px; +} + +.pie-chart { + width: 50%; + margin-top: 40px; + margin-left: 25%; +} + +.project-container { + display: flex; + flex-direction: column; + width: 50%; + margin-left: 25%; + text-align: left; + color: whitesmoke; + font-size: 0.3cm; +} + +.items { + background-color: #1a1b1a; + margin-bottom: 15px; + padding: 25px; + border-radius: 0.3cm; +} + +.logo { + height: 100px; + margin-right: 10px; +} + +.git-logo { + height: 50px; + border-radius: 1cm; + margin-left: 10px; + margin-bottom: 35px; +} + +.footer { + margin-top: 30px; + margin-bottom: 0; + align-items: flex-end; +} + +/*tablet menu*/ + +@media (min-width: 768px) { + .project-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + justify-content: center; + } +} + +/*big screen menu*/ + +@media (min-width: 992px) { + .profile_picture { + width: 250px; + } + + .pie-chart { + margin-top: 0; + } + + .userChart { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .project-container { + grid-template-columns: 1fr 1fr 1fr; + } +}