Technigo · Mattsson717 · Sep 27, 2021 · Sep 29, 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.
+This project was about fetching data from the github API and create your own github tracker.
 
 ## 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 think this project was a fun one, it went well and I understood a big part of it until the fetch commits. That was the hardest part, and if I had more time I would had put more functions and styling into it.
 
 ## 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.
+Netlify link: https://gifted-stonebraker-86699f.netlify.app
diff --git a/burger.png b/burger.png
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,24 @@
 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-amount],
+            backgroundColor: [
+                "rgb(255, 99, 71)",
+                "#d5a021"
+            ],
+                hoverOffset: 4
+        }]
+        },
+    };
+    const myChart = new Chart(ctx, config)
+}
diff --git a/code/github-logo.png b/code/github-logo.png
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <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=Cabin&display=swap" rel="stylesheet">
+  <link rel="icon" href="https://i.ibb.co/ctPyhfL/burger.png">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </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>
+<body>  
+    <section class="section">
+      <article class="profile-container">
+        <h1>GitHub Tracker</h1>
+          <div class="profile" id="profile"></div>
+              <!-- This will be used to draw the chart 👇 -->
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div>
+      </article>
+
+    <article class="project-container">
+      <fieldset>
+        <legend><h2>Projects:</h2></legend>
+          <main class="project-grid" id="projects"></main>
+      </fieldset>
+    </article>
+  </section>
+
+
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>
-</html>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,98 @@
+// API's
+const USER = 'Mattsson717'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const PROFILE_URL = `https://api.github.com/users/${USER}`
+const COMMITS_URL = `https://api.github.com/repos/${USER}/project-business-site/commits`
+const projectsContainer = document.getElementById('projects')
+const profileContainer = document.getElementById('profile')
+
+// Profile
+const getProfile = () => {
+    fetch(PROFILE_URL)
+    .then(response => response.json())
+    .then(data => {
+        profileContainer.innerHTML += `
+        <div class="profile-card">
+        <img class="profile-img" src=${data.avatar_url} alt="profile-image">
+        <h2>${data.login}</h2>
+        </div>`
+    })
+}
+getProfile()
+
+// Repositories
+const getRepos = () => {
+    fetch(REPOS_URL)
+    .then(res => res.json())
+    .then(data => {
+        const forkedRepos = data.filter(
+            (repo) => repo.name.includes('project-') && repo.fork
+            )
+            forkedRepos.forEach((repo) => {
+                projectsContainer.innerHTML += 
+            `
+            <div class="project-cards">
+            <a href="${repo.html_url}"><h3>${repo.name}</h3></a>
+             <p>Default branch: ${repo.default_branch}</p>
+             <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+             <p id="commit-${repo.name}">Commits amount: </p>
+            </div>
+             `})
+        fetchPullRequestsArray(forkedRepos)     
+        drawChart(forkedRepos.length)   
+    })
+}
+
+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
+				);
+
+				// Detect if we have pull request or not.
+				// If yes - call fetchCommits function
+				// If no - inform user that no pull request was yet done
+				if (myPullRequest) {
+					fetchCommits(myPullRequest.commits_url, repo.name);
+				} else {
+					document.getElementById(`commit-${repo.name}`).innerHTML =
+						'No pull request yet done :(';
+				}
+			});
+	});
+};
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+	fetch(myCommitsUrl)
+		.then((res) => res.json())
+		.then((data) => {
+			document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+		});
+}; 
+
+
+getRepos()
+
+
+
+
+
+
+
+
+// const getCommits = () => {
+//     fetch(COMMITS_URL)
+//     .then(response => response.json())
+//     .then(json => {
+//         console.log('Commits:',json.length)
+//         const commitsNumber = json.
+//         commitsNumber.forEach(repo => projectsContainer.innerHTML += 
+//             `
+//              `)
+//     })
+// }
+// getCommits()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,121 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
-  background: #FFECE9;
-}
+  background-color: #313638;
+  color: #e0dfd585;
+  font-family: "Cabin", sans-serif;
+  background-image: url("https://i.ibb.co/vDY4RQR/burger.png");
+  background-size: 15px;
+  background-repeat: repeat-x;
+  padding: 5%;
+  margin: 0;
+  font-size: 15px;
+}
+
+.section {
+  grid-template-columns: 1fr 2fr;
+  grid-gap: 2rem;
+  margin: auto;
+  width: 100%;
+  max-width: 1200px;
+}
+/* Profile */
+.profile-card {
+  display: grid;
+  width: 100%;
+  justify-items: center;
+}
+
+.profile-img {
+  align-self: center;
+  border-radius: 50%;
+  width: 50%;
+  height: auto;
+  border: 2px solid #e0dfd585;
+}
+/* Chart */
+.chart {
+  display: none;
+}
+/* Projects */
+
+fieldset {
+  border: 2px solid;
+  border-radius: 1%;
+  border-color: #e0dfd585;
+  background-color: rgba(34, 33, 33, 0.671);
+}
+
+.project-container {
+  display: grid;
+  width: 100%;
+}
+
+.project-grid {
+  border-radius: 2%;
+  min-width: auto;
+}
+.project-grid :hover {
+  background-color: rgba(34, 33, 33, 0.671);
+}
+
+.project-cards {
+  grid-template-columns: 1fr 1fr;
+  padding: 5px;
+  border-radius: 3%;
+  margin: 6px;
+  min-width: auto;
+  border-top: 2px solid black;
+  border-bottom: 2px solid black;
+}
+
+.project-cards a {
+  text-decoration: none;
+  color: #e4e4e2c5;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 200ms ease-in;
+}
+
+.project-cards a:hover {
+  color: rgb(116, 15, 15);
+}
+
+@media (min-width: 768px) {
+  body {
+    font-size: 12px;
+  }
+  .section {
+    display: flex;
+    flex-direction: row;
+  }
+  /* Profile */
+  .profile-container {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+  }
+
+  .profile-img {
+    width: 50%;
+  }
+  /* Chart */
+  .chart {
+    align-items: center;
+    width: 50%;
+    display: flex;
+    padding: 5px;
+  }
+  /* Projects */
+
+  .project-container {
+    width: 100%;
+  }
+  .project-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    line-height: 0.86;
+  }
+}