Technigo · waliem · Sep 28, 2021 · Sep 28, 2021 · Sep 29, 2021 · Oct 1, 2021
diff --git a/.DS_Store b/.DS_Store
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 project is about making a github tracker for our technigo projects. it is fetched with API 
 
 ## 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?
+it took some time to manage to get the api fetches working and displaying in a correct way, but I'm proud that it is working now. if I had more time I would add some more features such as perhaps a searchbar or more data to display inside. 
 
 ## 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://waliem-github-tracker.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/Octocat.png b/code/Octocat.png
diff --git a/code/TO DO-LIST b/code/TO DO-LIST
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,22 @@
 //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: ["Finished projects", "Projects left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - 6],
+          backgroundColor: ["rgb(255, 92, 88)", "rgb(242, 141, 138)"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  }
+  const myChart = new Chart(ctx, config)
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,34 @@
 <!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>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <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=Montserrat:wght@100&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+  <body>
+    <header>
+      <h1>GITHUB TRACKER</h1>
+      <img class="github-icon" src="./octocat.png" />
+    </header>
+
+    <section id="user-info"></section>
+
+    <main id="projects"></main>
+
+    <div class="chart-box"><canvas id="chart"></canvas></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,77 @@
+const USER = "waliem"
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const USER_INFO_URL = `https://api.github.com/users/${USER}`
+
+const projectsContainer = document.getElementById("projects")
+const userContainer = document.getElementById("user-info")
+
+// function for getting my user info
+const getUserInfo = () => {
+  fetch(USER_INFO_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      userContainer.innerHTML += `
+      <img class="profile-img" src="https://avatars.githubusercontent.com/u/84201089?v=4" alt="User profile picture">
+      <span id="profile-name"> <a class="usr-name" href="https://github.com/waliem"><h2>${data.login}</h2></a> <h3>Front end developer student</h3><h3>Based in Gothenburg</h3></span>`
+    })
+}
+
+// function for getting all my repos and filter them to get only technigo projects and displaying them in inner html
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json())
+    .then((data) => {
+      let forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      )
+      forkedRepos.forEach(
+        (repo) =>
+          (projectsContainer.innerHTML += `
+        <div class="project-box"> 
+        <a style="font-weight:bold" href="${repo.html_url}"> ${
+            repo.name
+          } </a> <p>Default branch: ${repo.default_branch}</p>
+        <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+        <p id="commit-${repo.name}">Commits: </p></div>`)
+      )
+
+      drawChart(forkedRepos.length)
+      getPullRequests(forkedRepos)
+    })
+}
+
+//function for fetching my pull requests
+const getPullRequests = (forkedRepos) => {
+  forkedRepos.forEach((repo) => {
+    const PULLS_URL = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+
+    fetch(PULLS_URL)
+      .then((res) => res.json())
+      .then((data) => {
+        const myPulls = data.find(
+          (pull) => pull.user.login === repo.owner.login
+        )
+        // if/else conditon if I do not have any pull requests or commits it will display "no PR or commits done"
+        if (myPulls) {
+          getMyCommits(myPulls.commits_url, repo.name)
+        } else {
+          document.getElementById(
+            `commit-${repo.name}`
+          ).innerHTML = `<I>No pull request or commits done</I>`
+        }
+      })
+  })
+}
+
+// function for getting the number of commits
+const getMyCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+      console.log("my commits!", data)
+    })
+}
+
+getUserInfo()
+getRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,178 @@
 body {
-  background: #FFECE9;
-}
+  background: #f8e2cf;
+  display: flex;
+  flex-direction: column;
+  color: black;
+  font-family: "Montserrat", sans-serif;
+}
+
+#user-info {
+  display: flex;
+  justify-content: center;
+}
+
+.profile-img {
+  border-radius: 50%;
+  width: 30%;
+  height: 30%;
+  align-self: center;
+  box-shadow: 8px 8px 8px rgb(114, 114, 114);
+}
+
+#profile-name {
+  flex-direction: column;
+  margin-left: 20px;
+}
+
+header {
+  display: flex;
+  justify-content: center;
+}
+
+.github-icon {
+  width: 20%;
+  height: auto;
+}
+
+h1 {
+  align-self: center;
+  font-size: 25px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 12px;
+}
+
+#projects {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  column-gap: 1rem;
+  row-gap: 1rem;
+  margin: 30px 0px 20px 0px;
+}
+
+.project-box {
+  background: #ff5c58;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 10px 0px 10px 20px;
+  box-shadow: 10px 10px 5px rgb(155, 155, 155);
+  -moz-box-shadow: 10px 10px 5px rgb(155, 155, 155);
+  -webkit-box-shadow: 10px 10px 5px rgb(155, 155, 155);
+  -khtml-box-shadow: 10px 10px 5px rgb(155, 155, 155);
+}
+
+.project-box:hover {
+  background-color: #bf3d39;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+a {
+  font-size: 15px;
+  color: black;
+  text-decoration: none;
+  text-transform: capitalize;
+}
+
+.usr-name:hover {
+  color: #ff5c58;
+  text-transform: lowercase;
+}
+
+a:hover {
+  color: #f8e2cf;
+}
+
+.chart-box {
+  width: 80%;
+  display: flex;
+  align-self: center;
+}
+
+/* ---- media queries tablet ---- */
+
+@media (min-width: 668px) and (max-width: 1024px) {
+  .profile-img {
+    width: 25%;
+    height: 25%;
+  }
+
+  #profile-name {
+    padding-left: 10px;
+    align-self: center;
+  }
+
+  h1 {
+    font-size: 40px;
+  }
+
+  h2 {
+    font-size: 30px;
+  }
+
+  a {
+    font-size: 25px;
+  }
+
+  .chart-box {
+    width: 60%;
+    align-self: center;
+  }
+}
+
+/* ---- media queries desktop ---- */
+
+@media (min-width: 1025px) {
+  #user-info {
+    justify-content: center;
+  }
+
+  .github-icon {
+    width: 15%;
+    height: auto;
+  }
+
+  .profile-img {
+    width: 20%;
+  }
+
+  #profile-name {
+    align-self: center;
+    margin-left: 20px;
+  }
+
+  h1 {
+    font-size: 60px;
+  }
+
+  h2 {
+    font-size: 40px;
+  }
+
+  h3 {
+    font-size: 20px;
+  }
+
+  #projects {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
+    max-width: 80%;
+    align-self: center;
+    margin-top: 60px;
+  }
+
+  a {
+    font-size: 20px;
+  }
+
+  .chart-box {
+    width: 25%;
+  }
+}