Technigo · TereseClaesson · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git 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 weeks project where a deep dive into more APIs and to start using npm,unit tests and chart.js. 
 
 ## 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?
+I started this weeks projects as usuals, looking through all information and reading the instructions.After that I did start the project by fecthing API from my gitHub repositories etc. It was hard for me to grasp what the assignment was and what I was suppose to do! So I spent a lot of time googling on the wrong search words and just trying to understand the instructions and trying to wrap my head around the task. I asked my teammates for help.
 
 ## 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://tracker-bootcamp2022.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,21 @@
 //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 data = {
+    labels: ["completed projects", "projects left"],
+    datasets: [
+      {
+        backgroundColor: ["grey", "black"],
+        data: [amount, 19 - amount],
+        hoverOffSet: 4,
+      },
+    ],
+  };
+  const config = {
+    type: "doughnut",
+    data: data,
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <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>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <head>
+    <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>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
+  </head>
+  <body>
+    <h1>GitHub Tracker</h1>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <section class="flex">
+      <!-- This will be used to draw the chart 👇 -->
+      <canvas
+        id="chart"
+        class="chart"
+        style="
+          display: flex;
+          width: 100%;
+          max-width: 500px;
+          height: 100%;
+          max-height: 500px;
+        "
+      ></canvas>
+      <div id="profile" class="profile"></div>
+    </section>
+    <main class="container" id="container">
+      <section id="projects" class="projects"></section>
+    </main>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <footer>Created by Terese Claesson</footer>
+
+    <script src="./chart.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,87 @@
+//DOM selectors
+const profileInfo = document.getElementById("profile");
+const allProjects = document.getElementById("projects");
+
+const username = "TereseClaesson";
+const API_PROFILE = `https://api.github.com/users/${username}`;
+const API_URL_REPOS = `https://api.github.com/users/${username}/repos`;
+
+//Functions to get the username and profilepicture
+const userProfile = () => {
+  fetch(API_PROFILE)
+    .then((res) => res.json())
+    .then((profileData) => {
+      profileInfo.innerHTML += `
+        <img src = "${profileData.avatar_url}">
+        <h3>${profileData.name}</h3>
+        <h4> <a href = ${profileData.html_url}> ${profileData.login}</h4>
+        `;
+    });
+};
+
+//Repos
+const repositories = () => {
+  fetch(API_URL_REPOS)
+    .then((res) => res.json())
+    .then((allRepos) => {
+      const forkedRepos = allRepos.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      );
+      forkedRepos.forEach((repo) => {
+        allProjects.innerHTML += `
+        <div>
+        <h3> Project name: ${repo.name} </h3>
+        <p> Latest push: ${new Date(repo.pushed_at).toLocaleString("en-GB", {
+          dateStyle: "short",
+        })} </p>
+        <p> Default branch: ${repo.default_branch}</p>
+        <a href = ${repo.html_url}>${repo.name}</a>
+        <p id ="pull-${repo.name}"></p>
+        <p id ="commit-${repo.name}">Commits:</p>
+        </div>
+        `;
+        commits(repo.commits_url, repo.name);
+      });
+      getPullRequest(forkedRepos);
+      drawChart(forkedRepos.length);
+    });
+};
+
+const getPullRequest = (forkedRepos) => {
+  forkedRepos.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((pullReqs) => {
+        let groupProject = true;
+        pullReqs.forEach((pull) => {
+          if (pull.user.login === username) {
+            groupProject = false;
+            document.getElementById(`pull-${repo.name}`).innerHTML = `
+            <a href = ${pull.html_url}> Go to pull request </a>
+            `;
+          }
+        });
+
+        if (groupProject === true) {
+          document.getElementById(`pull-${repo.name}`).innerHTML = `
+          <p> No pull request, group project </p>
+          `;
+        }
+      });
+  });
+};
+
+const commits = (myCommits, repoName) => {
+  let commitUrl = myCommits.replace("{/sha}", "");
+  fetch(commitUrl)
+    .then((res) => res.json())
+    .then((commitNumber) => {
+      document.getElementById(`commit-${repoName}`).innerHTML +=
+        commitNumber.length;
+    });
+};
+
+userProfile();
+repositories();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,137 @@
 body {
-  background: #FFECE9;
-}
+  margin: 0;
+  background: #e3ded9;
+  box-sizing: border-box;
+}
+
+h1 {
+  text-align: center;
+  font-size: 3em;
+}
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile {
+  display: flex;
+  align-content: space-between;
+  flex-direction: column;
+  text-align: center;
+  margin: 3rem;
+}
+
+.chart {
+  margin: 1rem;
+}
+
+.profile h3 {
+  font-size: 2rem;
+}
+
+.profile img {
+  border-radius: 50%;
+  max-height: 30rem;
+  max-height: 30rem;
+}
+
+.projects {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.projects div {
+  flex-direction: column;
+  flex-wrap: wrap;
+  border: 0.2rem solid black;
+  text-align: center;
+  margin: 1rem;
+  border-radius: 1rem;
+  background-color: #8aa4ab;
+  color: #e3ded9;
+}
+
+.projects div:hover {
+  background-color: #416270;
+}
+
+footer {
+  text-align: center;
+  margin: 2rem;
+  font-size: 1em;
+}
+
+@media screen and (min-width: 678px) and (max-width: 1024px) {
+  .body h1 {
+    font-size: 6em;
+  }
+
+  .flex {
+    background-color: #416270;
+    display: flex;
+    flex-direction: column;
+    align-content: space-around;
+  }
+
+  .profile {
+    display: flex;
+    align-items: center;
+    color: #e3ded9;
+    margin: 1rem;
+  }
+
+  .profile h3 {
+    font-size: 2.5rem;
+  }
+
+  .chart {
+    margin: 10rem;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .projects div {
+    padding: 2rem;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .flex {
+    background-color: #416270;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .profile {
+    display: flex;
+    padding: 3rem;
+    text-align: center;
+    font-size: 1.5em;
+    color: #e3ded9;
+  }
+
+  .profile h3 {
+    font-size: 3rem;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .projects div {
+    padding: 1.5rem;
+    font-size: 1.6rem;
+  }
+}