Technigo · brunsant · Sep 28, 2021 · Sep 28, 2021 · Sep 29, 2021 · Sep 29, 2021
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.
+The assingment was to create a tracker for the projects we have done in the boot camp and pushed into Github. We should fetch multiple informations through API and display it in a responsive way for different sizes.
 
 ## 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 the project by listing all the info we should fetch into small tasks and then I went through it step by step. The JavaScript part was challenging but I managed it without major problems. The styling was a little bit more complicated, being the biggest challange of the project for me. Having the HTML file and HTML inside the JavaScript made the styling more confusing, but with the help of my teammates I was able to complete the design I invisioned from the beginning. Another part that made it complicated was that the API kept having errors on the last days which made it more complicated to edit the code. If I had more time, I would probably try to add more information and features.
 
 ## 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://brunsant-githubtracker.netlify.app/
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("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const data = {
+    labels: ["Finished Projects", "Total Projects"],
+    datasets: [
+      {
+        label: "My First Dataset",
+        data: [amount, 20 - amount],
+        backgroundColor: ["#8AA2A0", "#D6A495"],
+        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,40 @@
 <!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>GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header>
+      <h1>GitHub Tracker</h1>
+    </header>
+    <div class="big-container">
+      <div class="info-contain">
+        <div class="profile-container" id="profileInfo"></div>
+        <div class="chart-container">
+          <h2>Progress</h2>
+          <canvas class="chart" id="chart"> </canvas>
+        </div>
+      </div>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+      <div class="projects-container">
+        <h2>Projects</h2>
+        <div class="projects-list">
+          <main class="projects" id="projects"></main>
+        </div>
+      </div>
+    </div>
+    <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,96 @@
+// -- DOM SELECTORS -- //
+const projectsContainer = document.getElementById("projects");
+const profileInfo = document.getElementById("profileInfo");
+
+// -- API -- //
+const USER = "brunsant";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const USER_API = `https://api.github.com/users/${USER}`;
+
+// -- PROFILE INFO -- //
+const getUser = () => {
+  fetch(USER_API)
+    .then((response) => response.json())
+    .then((data) => {
+      profileInfo.innerHTML += `
+          <h2> Profile Info </h2>
+          <img src = "https://avatars.githubusercontent.com/u/80712035?v=4" alt="Profile picture">
+          <h4> ${data.name}</h4>
+          <h4> <a href =${data.html_url}>${data.login}</h4>
+          `;
+    });
+};
+
+// -- REPOS -- //
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => {
+      return response.json();
+    })
+    .then((json) => {
+      const forkedRepos = json.filter(
+        (project) => project.fork && project.name.startsWith("project-")
+      );
+
+      // -- COMMIT -- //
+      forkedRepos.forEach((project) => {
+        const COMMIT_URL = `https://api.github.com/repos/${USER}/${project.name}/commits`;
+        fetch(COMMIT_URL)
+          .then((response) => {
+            return response.json();
+          })
+          .then((json) => {
+            const filteredCommits = json.filter(
+              (project) => project.commit.author.name === "Bruna Santos Araujo"
+            );
+
+            // makes the first letter an upper case
+            const upperCaseName =
+              project.name.charAt(0).toUpperCase() + project.name.slice(1);
+
+            projectsContainer.innerHTML += `
+            <div class="projects-individual">
+          <h3> Project Name: ${upperCaseName}</h3>
+          <a href = ${project.html_url}> ${upperCaseName} </a>
+          <p> Main branch: ${project.default_branch}</p>
+          <p> Number of commits: ${filteredCommits.length}</p>
+          <p> Latest push: ${project.pushed_at.slice(
+            0,
+            10
+          )}, ${project.pushed_at.slice(11, 16)} 
+          </p>
+          <p id="pull-${project.name}"></p>
+          </div>
+                   `;
+          });
+      });
+      getPulls(forkedRepos);
+      drawChart(forkedRepos.length);
+    });
+};
+
+// -- PULL REQUEST -- //
+const getPulls = (forkedRepos) => {
+  forkedRepos.forEach((project) => {
+    fetch(
+      `https://api.github.com/repos/Technigo/${project.name}/pulls?per_page=100`
+    )
+      .then((response) => response.json())
+      .then((pulldata) => {
+        const myPullRequest = pulldata.find(
+          (pull) => pull.user.login === project.owner.login
+        );
+
+        if (myPullRequest) {
+          document.getElementById(`pull-${project.name}`).innerHTML = `
+            <a href = ${myPullRequest.html_url}>Pull request</>`;
+        } else {
+          document.getElementById(`pull-${project.name}`).innerHTML = `
+            No pull request available`;
+        }
+      });
+  });
+};
+
+getRepos();
+getUser();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,141 @@
 body {
-  background: #FFECE9;
-}
+  box-sizing: border-box;
+  min-width: 325px;
+  background-color: #d5dad6;
+  font-family: "Roboto Mono", monospace;
+}
+
+.big-container {
+  margin: 5% 0;
+}
+
+/* HEADER */
+h1 {
+  margin-top: 10%;
+  color: #d6a495;
+  text-align: center;
+  font-size: 30px;
+}
+
+/* PROFILE INFO */
+.profile-container {
+  text-align: center;
+  color: #8aa2a0;
+}
+
+h4 {
+  margin: 2% 0;
+  font-size: 28px;
+}
+
+img {
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  border: 1px solid white;
+  filter: grayscale(40%);
+}
+
+h2 {
+  text-align: center;
+  color: #d6a495;
+}
+
+/* CHART */
+.chart-container {
+  width: 70%;
+  margin: 0 0 10% 15%;
+}
+
+/* PROJECTS */
+.projects-list {
+  border: 1px solid #b8c3bd;
+  padding: 4%;
+  height: 100%;
+  color: #4a707a;
+  font-size: 17px;
+}
+.projects-individual {
+  border-bottom: 1px solid #b8c3bd;
+}
+
+/* unvisited link */
+a:link {
+  color: #8aa2a0;
+}
+
+/* visited link */
+a:visited {
+  color: #8aa2a0;
+}
+
+/* mouse over link */
+a:hover {
+  color: #d6a495;
+}
+
+/* TABLET LAYOUT */
+@media (min-width: 668px) and (max-width: 1024px) {
+  /* HEADER */
+  h1 {
+    font-size: 45px;
+  }
+
+  /* PROFILE */
+  h4 {
+    font-size: 38px;
+  }
+
+  img {
+    width: 40%;
+    height: 40%;
+  }
+
+  h2 {
+    font-size: 40px;
+  }
+
+  /* CHART */
+  .chart-container {
+    width: 50%;
+    margin: 5% 0 5% 27%;
+  }
+
+  /* PROJECTS */
+  .projects-list {
+    text-align: center;
+  }
+}
+
+/* DESKTOP LAYOUT */
+@media (min-width: 1025px) {
+  .big-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    margin: 2%;
+  }
+
+  /* HEADER */
+  h1 {
+    font-size: 60px;
+    margin-top: 4%;
+  }
+
+  /* PROFILE */
+  h4,
+  h2 {
+    font-size: 40px;
+  }
+
+  /* PROJECTS */
+  .projects-list {
+    padding: 0 0 0 5%;
+    font-size: 16px;
+    border-bottom: 1px solid #b8c3bd;
+  }
+
+  .projects {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}