Technigo · JaEngd · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,22 @@
+//.gitignore file
+code/secret.js 
+
+# Ignore Mac system files
+.DS_store
+
+# Ignore node_modules folder
+node_modules
+
+# Ignore all text files
+*.txt
+
+# Ignore files related to API keys
+.env
+
+# misc
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/README.md b/README.md
@@ -9,5 +9,4 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a
 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?
 
 ## 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://hopeful-pasteur-51eb45.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,19 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
+const technigoProjects = 22
 
 //"Draw" the chart here 👇
+
+const drawBarChart = (repos) => {
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: { labels: ['Projects to do', 'Finished projects'],
+        datasets: [ { data: [ technigoProjects - repos.length, repos.length,],
+        backgroundColor: ['#747474','#ffbb00']}]
+        },
+        display: true,
+        labels: {
+        color: 'rgb(0, 0, 0)'
+        }
+    })
+} 
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,39 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,100;1,400;1,500&display=swap');
+  </style> 
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <!-- <main id="projects"></main> -->
+
+  <main>
+    <section id="profile-wrapper">
+      <a href="#repo-wrapper" class="button" id="button">All repos</a>
+    </section>
+
+    <section class="repo-wrapper" id="repo-wrapper">
+
+    </section>
+
+    <section id="chart-wrapper">
+      <canvas id="chart"></canvas>
+    </section>
+
+  </main>
+
+
 
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 
-  <script src="./script.js"></script>
+
   <script src="./chart.js"></script>
+  <script src="./secret.js"></script>
+  <script src="./script.js"></script>
+
 </body>
+
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,90 @@
+
+//DOM
+const profileWrapper = document.getElementById('profile-wrapper');
+const repoWrapper = document.getElementById('repo-wrapper');
+
+//API
+const USER = 'JaEngd'
+const PROFILE_URL = `https://api.github.com/users/${USER}`
+const REPO_URL = `https://api.github.com/users/${USER}/repos`
+
+const API_TOKEN = TOKEN 
+
+const options = { //Object
+    method: 'GET', //POST, PATCH, DELETE
+    headers: {
+        Authorization: `token ${API_TOKEN}`
+    }
+}
+
+
+const showProfile = () => {
+    fetch(PROFILE_URL, options)
+        .then(res => res.json()) //Converting the response to a JSON object
+		.then(data => {
+            console.log(data)
+            profileWrapper.innerHTML += `
+                <div id="profile">
+                    <figure class="profile-image">
+                        <a href="${PROFILE_URL}">
+                            <img src="${data.avatar_url}" alt="Avatar of ${data.login}">
+                        </a>
+                    </figure>
+                    <h3>${data.login}</h3>
+                    <p>Public repositories: ${data.public_repos}</p>
+                </div>
+            `
+        })
+}
+showProfile()
+
+
+const showRepos = () => {
+    fetch(REPO_URL, options)
+        .then((response) => response.json())
+        .then((data) => {
+            const myRepos = data.filter((repo) => repo.name.includes("project") && repo.fork)
+
+            myRepos.forEach(repo => {
+                repoWrapper.innerHTML += `
+                    <div class="projects-card" id="${repo.id}">
+                        <h3><a href="${repo.html_url}"><b>${repo.name}</b></a>  <strong><br>${repo.default_branch}</strong></h3>
+                        <p>Recent push: ${new Date(repo.pushed_at).toDateString()} </p>
+                        <p id="commit_${repo.name}">Commits: </p>
+                        <p>Main language: ${repo.language}</p>
+                    </div>
+                `
+            })
+            showPullRequestsArray(myRepos)
+            drawBarChart(myRepos)
+        })
+}
+
+
+const showPullRequestsArray = (allRepos) => {
+    allRepos.forEach((repo) => {
+        fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
+            .then((response) => response.json())
+            .then((data) => {
+                const myPullRequest = data.find(
+                    (pull) => pull.user.login === repo.owner.login
+                )
+                if (myPullRequest) {
+                    showCommits(myPullRequest.commits_url, repo.name)
+                } else {
+                    document.getElementById(`commit_${repo.name}`)
+                    .innerHTML = 'Commits: No Pull request available.';
+                }
+            })
+    })
+}
+
+
+const showCommits = (myCommitsUrl, myRepoName) => {
+        fetch(myCommitsUrl)
+            .then((response) => response.json())
+            .then((data) => {
+                document.getElementById(`commit_${myRepoName}`).innerHTML += data.length
+            })
+    }
+showRepos()
diff --git a/code/server.rb b/code/server.rb
@@ -0,0 +1,11 @@
+require 'sinatra'
+require 'rest-client'
+require 'json'
+
+CLIENT_ID = ENV['GH_BASIC_CLIENT_ID']
+CLIENT_SECRET = ENV['GH_BASIC_SECRET_ID']
+
+get '/' do
+  erb :index, :locals => {:client_id => CLIENT_ID}
+end
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,192 @@
+*{
+  margin: 0 auto;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
+  scroll-behavior: smooth;
+  scroll-padding-top: 0;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: #252525;
+  font-family: 'Nunito', sans-serif;
+  margin: 0 auto;
+  display: flex;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+html, body {
+  overflow-x: hidden;
+}
+
+h1 {
+  font-size: 1.4rem;
+  color: #f2f2f2;
+}
+
+h2 {
+  font-size: 1.2rem;
+  text-align: center;
+  color: #f2f2f2;
+}
+
+h3 {
+  text-align: center;
+  border-radius: 0.4rem;
+  margin-top: 10;
+  padding: 1rem 1rem;
+  color: #f2f2f2;
+}
+
+p{
+  font-size: 1rem;
+  margin-top: 15px;
+  color: #f2f2f2;
+}
+
+#profile-wrapper {
+  display: flex;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 30%;
+  width: 100%;
+  max-width: 300px;
+  transform: translate(-50%, -50%);
+  margin: 2px;
+  padding: 20px;
+  width: 63%;
+  box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75);
+}
+
+#profile {
+  display: inline-block;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+
+/*/ --- BUTTON --- /*/
+.button{
+  background: #5154ff;
+  color: #fff;
+  padding: 10px 20px;
+  box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75);
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: center;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 100%;
+  max-width: 200px;
+  transform: translate(-50%, -50%);
+  transition: 0.4s;
+  margin-top: 100%;
+}
+
+.button:hover{
+  background: #34495e;
+  color: #fff;
+}
+/*/ --- BUTTON --- /*/
+
+.profile-image {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  border: 2px solid whitesmoke;
+  overflow: hidden;
+  margin-bottom: 40px;
+}
+
+.profile-image > a > img {
+  width: 100%;
+}
+
+#repo-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  left: 50%;
+  top: 190%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  gap: 1rem;
+  margin-bottom: 100rem;
+}
+
+.projects-card {
+  width: 320px;
+  height: 230px;
+  background-color: #1d1d1d;
+  box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem;
+  border-radius: 0.4rem;
+  text-align: center;
+  margin: 0;
+  padding: 1rem;
+}
+
+#chart-wrapper {
+  width: 90px;
+  max-width: 512px;
+  margin: 0 auto;
+  position: absolute;
+  left: 50%;
+  top: 330%;
+  width: 100%;
+  margin: 100 100px;
+  transform: translate(-50%, -50%);
+}
+
+header {
+  top: 0;
+}
+
+footer {
+  margin-top: 1rem;
+}
+
+footer, a {
+  color: #ffbb00;
+}
+
+
+@media (min-width:1281px) { 
+  #repo-wrapper {
+    top: 110%;
+  }
+  #chart-wrapper {
+    top: 170%;
+  }
+ }
+
+ @media (min-width:1025px) {
+  #repo-wrapper {
+    top: 110%;
+  }
+  #chart-wrapper {
+    top: 170%;
+  }
+ }
+
+ @media (min-width:801px) {
+  #repo-wrapper {
+    top: 120%;
+  }
+  #chart-wrapper {
+    top: 190%;
+  }
+ }
+
+