Technigo · MariaThomasson · Sep 27, 2021 · Sep 29, 2021 · Oct 3, 2021 · Oct 3, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "lior-chamla.google-fonts"
+    ]
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,18 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+This week we learned
+- How to debug Javascript
+- More about how to use API's to fetch data
+- More about how to get specific data from the JSON response
+- Unit tests: What they are and how to run them
+- Understand the role of Node & NPM for running javascript scripts
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+# The problem
 
-## The problem
+I had a hard time with JavaScript this week (and with styling). I also struggled with time management but have a project to hand in altough it´s not completly finnished, still have a grid layout for desktop & tablet to organize. 
+I used google, Stack Owerflow and YouTube this week as help and of course my team helped me a lot.
 
-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://githubtracker-mariathomasson.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,25 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("myChart").getContext("2d");
 
 //"Draw" the chart here 👇
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Done", "Left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20-amount],
+          backgroundColor: [
+            "#f687d7",
+            "#ffb55e",
+          ],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+}; 
diff --git a/code/images/.DS_Store b/code/images/.DS_Store
diff --git a/code/images/GitHub-Mark-120px-plus.png b/code/images/GitHub-Mark-120px-plus.png
diff --git a/code/images/Octocat.png b/code/images/Octocat.png
diff --git a/code/images/language.png b/code/images/language.png
diff --git a/code/index.html b/code/index.html
@@ -5,17 +5,43 @@
   <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>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://kit.fontawesome.com/4270599b20.js" crossorigin="anonymous"></script>
+  <link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Oswald" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+<nav class="navigation-bar">
+  <a href="https://github.com/github"><h1>GitHub<img class="logo" src="./images/Octocat.png">Tracker</h1></a>
+</nav>
+
+
+
+
+  <section class="top-section"> 
+
+
+  <div id="user-data"></div>
+
+  <main> 
+      <section class="grid">
+      <div id="projects" class="projects"></div>
+      </section>
+  </main>
+
+  </section>
+
+
+  <section class="chart-section">
+        <h2>Progress:</h2>
+        <canvas class="myChart" id="myChart"></canvas>
+  </section>   
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
+
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,90 @@
+  //My API´s//
+  const USER = 'MariaThomasson'; 
+  const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+  const USER_URL = `https://api.github.com/users/${USER}`;
+
+
+  //My variables//
+  const projectsContainer = document.getElementById('projects');
+  const userData = document.getElementById('user-data')
+
+
+  //My GitHub Information//
+  const presentUserData = () => {
+    fetch(USER_URL)
+      .then((response) => {
+        return response.json();
+      })
+      .then((json) => {
+        console.log(json);
+        userData.innerHTML = 
+        `<div class="my-info">
+        <img class="avatar" src="${json.avatar_url}"/>
+        <h1>${json.name}</h1>
+        <p><i class="fas fa-user"></i> ${json.login}</p>
+        <p><i class="fas fa-map-marker-alt"></i> Location: ${json.location}</p>
+        <img class="languages" src="./images/language.png"/>`
+      });
+    }
+
+  //My Repositories//
+  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="project-box">
+        <h3>${repo.name}</h3>
+        <p><i class="fab fa-github"></i><a href="${repo.html_url}"target="_blank"> GitHub repo</a></p>
+        <p><i class="fas fa-code-branch"></i> ${repo.default_branch}</p>
+        <p><i class="far fa-clock"></i> Recent push: ${new Date(repo.pushed_at).toLocaleDateString()}</p>
+        <p id="commit-${repo.name}">Commits: </p>
+        </div>`;
+      });
+
+      fetchPullRequestsArray(technigoRepositories);
+
+  // Draw chart with technigoRepos data
+      drawChart(technigoRepositories.length);
+    });
+  };
+
+  //My Pull Requests//
+      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);
+
+        if (myPullRequest) {
+          fetchCommits(myPullRequest.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+          'Group project.';
+        }
+      console.log(myPullRequest)
+      });
+    });
+  };
+
+//My Commits//
+      const fetchCommits = (myCommitsUrl, myRepoName) => {
+      fetch(myCommitsUrl)
+      .then((res) => res.json())
+      .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+  };
+
+
+fetchRepositories();
+presentUserData()