Technigo · amandatilly · Sep 28, 2021 · Sep 28, 2021 · Sep 28, 2021 · Sep 29, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,20 @@
 # 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.
+Creating a place to keep track of the GitHub repos made during my Boot Camp at Technigo. Using JavaScript, html, css and fetching data from API's from the JSON response.
 
 ## 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?
+My page includes:
+
+- A list of all repos that are forked from Technigo
+- Username and profile picture
+- Most recent update (push) for each repo
+- Name of default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits for each repo
+- It is responsive (mobile first)
+- A visualisation, a donut chart, of how many projects I've done so far, compared to how many I will do.
 
 ## 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://elegant-pasteur-b7cf22.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", "Remaining Projects"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - amount],
+          backgroundColor: [
+            "rgb(22, 35, 50)",
+            "rgba(222,207,168,255)            ",
+            "rgb(255, 205, 86)",
+          ],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,36 @@
 <!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"></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=Amatic+SC:wght@400;700&family=Josefin+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <body>
+    <header class="header">
+      <div class="user-profile" id="userProfile"></div>
+    </header>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <section class="grid">
+      <h1>GitHub Tracker</h1>
+      <main class="projects" id="projects"></main>
+
+      <!-- This will be used to draw the chart 👇 -->
+      <div class="chart-container">
+        <canvas id="chart"></canvas>
+      </div>
+    </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,85 @@
+const USER = "amandatilly";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const USER_URL = `https://api.github.com/users/${USER}`;
+
+const projectContainer = document.getElementById("projects");
+const profileContainer = document.getElementById("userProfile");
+
+// function to fetch and display user profile info
+const fetchUser = () => {
+  fetch(USER_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      profileContainer.innerHTML = `
+      <section class="user">
+      <img class="picture" src="${data.avatar_url}" alt="profile picture" />
+      <h2>Hi I'm ${data.name}</h2>
+      <p>An ${data.bio} based in ${data.location}</p>
+      <a href="${data.html_url}">@${data.login}</a>
+      </section>
+      `;
+    });
+};
+
+//function to fetch and display repos
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      // filters out repos for user name and that starts with project-
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      );
+
+      forkedRepos.forEach(
+        (repo) =>
+          (projectContainer.innerHTML += `
+        <div class="repo-card" id=${repo.name}>
+          <a href="${repo.html_url}">${repo.name}</a>
+				  <p>Branch: ${repo.default_branch} </p>
+            <p>Latest update: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Number of commits: </p>
+            </div>
+        `)
+      );
+      drawChart(forkedRepos.length); // calling function and passing value to chart.js (amount)
+      getPullRequests(forkedRepos); // calling function and passing value
+    });
+};
+
+//function to fetch pull
+const getPullRequests = (repos) => {
+  repos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        //compares repo user info to pull user info and title with my name
+        const userPullRequests = data.find(
+          (pull) =>
+            repo.owner.login === pull.user.login ||
+            pull.title.includes("Amanda")
+        );
+        // displays number of commits if a pull request has been made, if not it displays message
+        if (userPullRequests) {
+          fetchCommits(userPullRequests.commits_url, repo.name); //calling function and passing values
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull request yet";
+        }
+      });
+  });
+};
+
+//function to fetch and display commits
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
+
+getRepos();
+fetchUser();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,182 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0 none;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: #ce7f5a;
+  font-family: "Josefin Sans", sans-serif;
+  line-height: 1.5;
+}
+
+/* Hero */
+
+.header {
+  height: 90vh;
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-image: url("https://images.unsplash.com/photo-1456615074700-1dc12aa7364d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: left;
+  position: relative;
+}
+
+.header p,
+h2 {
+  color: whitesmoke;
+}
+
+.header a:link {
+  text-transform: lowercase;
+  color: whitesmoke;
+  text-decoration: none;
+}
+
+.header a:visited {
+  color: whitesmoke;
+  text-decoration: none;
+}
+
+.header a:hover {
+  text-decoration: underline;
+  color: #c9b597;
+}
+
+.picture {
+  border-radius: 50%;
+  width: 100px;
+}
+.user {
+  text-shadow: 5px 5px 10px black;
+}
+
+/* Main Section */
+
+.projects {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  grid-gap: 5px;
+  padding: 20px;
+}
+
+.grid {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  margin-top: 100px;
+  margin-bottom: 60px;
+}
+
+.grid h1 {
+  font-size: 30px;
+  color: whitesmoke;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.repo-card {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 20px;
+  align-items: center;
+  background-color: #162332;
+  min-width: 200px;
+  max-width: 400px;
+  width: 80%;
+  color: whitesmoke;
+  gap: 10px;
+}
+
+.repo-card a:link {
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #c9b597;
+  font-weight: bold;
+}
+
+.repo-card a:visited {
+  text-decoration: none;
+  color: #c9b597;
+}
+
+.repo-card a:hover {
+  text-decoration: underline;
+  color: whitesmoke;
+  font-weight: bold;
+}
+
+.chart-container {
+  max-width: 400px;
+}
+
+/* Media Queries */
+
+@media (min-width: 768px) {
+  .projects {
+  }
+
+  .chart-container {
+    min-width: 400px;
+  }
+
+  .grid h1 {
+    font-size: 40px;
+  }
+
+  .repo-card p,
+  a {
+    font-size: 20px;
+  }
+
+  .header h2 {
+    font-size: 30px;
+  }
+
+  .header p {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 992px) {
+  .projects {
+    gap: 10px;
+  }
+
+  .chart-container {
+    min-width: 600px;
+  }
+
+  .repo-card p,
+  a {
+    font-size: 25px;
+  }
+
+  .header h2 {
+    font-size: 35px;
+  }
+
+  .header p {
+    font-size: 25px;
+  }
+
+  .grid h1 {
+    font-size: 50px;
+  }
+
+  .picture {
+    width: 130px;
+  }
+}