Technigo · molbimien · Oct 1, 2021 · Oct 3, 2021 · Oct 3, 2021 · sofiawillebrand
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # 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 this week was to create a place to keep track of the GitHub repositories that we are using during the Technigo Boot Camp. For this we were instructed to fetch data using the GitHub API:s and then style the page to be responsive.  
 
 ## 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 challenge this week was to adapt to the fact that the GitHub API has a rate limit of 60 requests per hour. This means that when you are fetching all the requested data in the minimum requirements, you can only reload the page a few times before you reach the API limits...
+
+When I had added the minimum requirements, I therefore inserted dummmy code to the html to be able to style the page according to my likings without running into the 403 issues and the content not being displayed. I also noticed that the API request limit is applied at the network level and that I was able to work around the limitations by connecting to the mobile network on the different cell phones available in my household. 
+
+This week I only had time to work on the blue levels requirements. If I had more time, I would like to also add some of the red level requirements, for example make it possible to sort my list of repos in different ways and to disply the comments I got from each pull request. 
 
 ## 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://molbimien-week-7-project-github-tracker.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,27 @@
 //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: [
+          'Completed projects',
+          'Projects left to build',
+        ],
+        datasets: [{
+          label: 'My Technigo projects',
+          data: [amount, 19-amount],
+          backgroundColor: [
+            'rgb(219,57,141)',
+            'rgb(0,255,255)',
+          ],
+          hoverOffset: 4
+        }],
+      },
+    };
+
+    const projectsChart = new Chart(ctx, config);
+}
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,32 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project GitHub Tracker</title>
+  <title>Technigo Boot Camp GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header>
+    <h1>Technigo Boot Camp GitHub Tracker</h1>
+  </header>
+  <main class="page-container">
+
+    <section id="profile-container" class="profile-container"></section>
+
+    <section class="canvas-container">
+      <canvas id="chart"></canvas>
+    </section>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <section id="projects" class="projects-container">
+    </section>
+  </main>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
+  <footer>
+    <p>Made by <a class="hover" href="https://www.linkedin.com/in/molbimien/en">Maria Sjögren</a> during <a class="hover" href="https://www.technigo.io/program">Technigo Boot Camp</a> 2021</p>
+  </footer>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,87 @@
+const USER = 'molbimien';
+const PROFILE_URL = `https://api.github.com/users/${USER}`
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+
+const profileContainer = document.getElementById('profile-container')
+const projectsContainer = document.getElementById('projects');
+
+// fetchProfile function
+const fetchProfile = () => {
+    fetch(PROFILE_URL)
+        .then(res => res.json()) 
+        .then(profileData => {
+        profileContainer.innerHTML += `
+            <img src=${profileData.avatar_url} class="profile-img">    
+            <h2>${profileData.name}</h2>
+            <p>${profileData.login}</p>
+        `
+        });
+  }
+
+  // fetchRepositories function
+const fetchRepositories = () => {
+    fetch(REPOS_URL)
+        .then((res) => res.json())
+        .then((data) => {
+            const technigoRepositories = data.filter((repo) =>
+            repo.name.includes('project-') && repo.fork
+            );
+
+            technigoRepositories.forEach((repo) => {
+                projectsContainer.innerHTML += `
+                <div class="card">
+                    <a href="${repo.html_url}">
+                    <h2>${repo.name}</h2>
+                    <p>Default branch: ${repo.default_branch}</p>
+                    <p>Most recent push: ${new Date(repo.pushed_at).toLocaleDateString()}</p>
+                    <p id="commit-${repo.name}">Number of commits: </p>
+                    </a>
+                </div>
+                `;
+            });
+
+            fetchPullRequestsArray(technigoRepositories);
+
+            // Draw chart with technigoRepos data
+			drawChart(technigoRepositories.length);
+        });
+};
+
+const fetchPullRequestsArray = (allRepositories) => {
+    allRepositories.forEach((repo) => {
+        const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+
+        fetch(PULL_URL)
+            .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 =
+                'This was a group project. No pull requests made by molbimien.';
+            }
+
+            });
+    });
+};
+
+// fetchCommits function
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl)
+        .then((res) => res.json())
+        .then((data) => {
+            document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+
+        }); 
+};
+
+fetchProfile();
+fetchRepositories();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,152 @@
 body {
-  background: #FFECE9;
+  background: #f7f7f7;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif;
+}
+
+h1 h2 h3 {
+  font-family: 'Merriweather', serif;
+}
+
+header {
+  text-align: center;
+  font-size: 1.6em;
+}
+
+.page-container {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: center;
+  width: 95%;
+}
+
+.profile-container {
+  font-size: 1.1rem;
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  text-align: center;
+}
+
+.profile-img {
+  border-radius: 50%;
+  max-width: 250px;
+  align-content: center;
+}
+
+.profile-container h2 {
+    margin-top: 1rem;
+    margin-bottom: 0;
+}
+
+.canvas-container {
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  margin: 5% auto;
+  width: 300px;
+}
+
+.projects-container {
+  display: grid;
+  grid-column: span 6;
+  grid-gap: 20px;
+  margin: 50px auto;
+}
+
+.card {
+  background: #fff;
+  text-align:left;
+  padding: 2rem;
+  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
+  transform: translateY(0);
+  position: relative;
+}
+
+.card a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.card h3 {
+  font-size: 1.8rem;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  filter: none;
+  top: -0.25rem;
+  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+  color: #DB398D;
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  text-align: center; 
+  height: 64px;
+  padding-top: 16px;
+  border-top: 1px dotted #DB398D;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+}
+
+a, a > span {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+a:before, a:after, a > span:before, a > span:after {
+  content: '';
+  position: absolute;
+  transition: transform .5s ease;
+}
+
+.hover:before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: #DB398D;
+  transform: scaleX(0);
+}
+
+.hover:hover:before {
+  transform: scaleX(1);
+}
+
+footer a:link {
+  color: #DB398D;
+}
+
+footer a:visited {
+  color: grey;
+}
+
+footer a:active {
+  background-color: cyan;
+}
+
+/* styling for tablet and desktop */
+
+@media only screen and (min-width: 768px) {
+  .profile-container {
+    grid-column: span 3;
+  }
+
+  .canvas-container {
+    grid-column: span 3;
+  }
+
+  .projects-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .projects-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }