From 7412d72cd16d0233234eac332157600a62eeb7c1 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Tue, 28 Sep 2021 12:05:32 +0200
Subject: [PATCH 01/15] fetched repos, filtered forked projects and added to
 browser. started fetching pull requests

---
 code/script.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/code/script.js b/code/script.js
index e69de29b..8c82dbc5 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,29 @@
+const USER = "amandatilly";
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+const PR_URL = `https://api.github.com/repos/Technigo/${reponame}/pulls`;
+const projectContainer = document.getElementById("projects");
+
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data);
+      //   data.forEach((repo) => console.log(repo.name));
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith("project-")
+      );
+      forkedRepos.forEach(
+        (repo) => (projectContainer.innerHTML += `<h3>${repo.name}</h3>`)
+      );
+    });
+};
+
+const getPullRequests = (repos) => {
+  repos.forEach((repo) => {
+    fetch(PR_URL)
+      .then((res) => res.json())
+      .then((data) => {});
+  });
+};
+
+getRepos();

From b8cfa379704e5c93965fe00eda8d220cceed31fa Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Tue, 28 Sep 2021 16:28:22 +0200
Subject: [PATCH 02/15] fetched and filtered pull requests

---
 code/script.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/code/script.js b/code/script.js
index 8c82dbc5..72401d95 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,6 +1,8 @@
 const USER = "amandatilly";
 const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
-const PR_URL = `https://api.github.com/repos/Technigo/${reponame}/pulls`;
+const NEWSSITE_URL =
+  "https://api.github.com/repos/Technigo/project-news-site/pulls/222/commits";
+
 const projectContainer = document.getElementById("projects");
 
 const getRepos = () => {
@@ -8,21 +10,30 @@ const getRepos = () => {
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
-      //   data.forEach((repo) => console.log(repo.name));
+
       const forkedRepos = data.filter(
         (repo) => repo.fork && repo.name.startsWith("project-")
       );
       forkedRepos.forEach(
         (repo) => (projectContainer.innerHTML += `<h3>${repo.name}</h3>`)
       );
+      getPullRequests(forkedRepos);
     });
 };
 
 const getPullRequests = (repos) => {
   repos.forEach((repo) => {
-    fetch(PR_URL)
+    fetch(
+      `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`
+    )
       .then((res) => res.json())
-      .then((data) => {});
+      .then((data) => {
+        //   console.log(data);
+        const userPullRequests = data.filter(
+          (pull) => pull.user.login === repo.owner.login
+        );
+        console.log(userPullRequests);
+      });
   });
 };
 

From f74513278668655f6da79e5f50f4a1d540436acd Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Tue, 28 Sep 2021 17:37:29 +0200
Subject: [PATCH 03/15] fetching data for commits and comments from api

---
 code/script.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/code/script.js b/code/script.js
index 72401d95..a7980aec 100644
--- a/code/script.js
+++ b/code/script.js
@@ -33,8 +33,18 @@ const getPullRequests = (repos) => {
           (pull) => pull.user.login === repo.owner.login
         );
         console.log(userPullRequests);
+        const commitsURL = userPullRequests[0].commits_url;
+        console.log(commitsURL);
+        // getCommits(commitsURL);
+
+        const commentsURL = userPullRequests[0].review_comments_url;
+        console.log(commentsURL);
       });
   });
 };
 
+// const getCommits = (commits) => {
+//   projectContainer.innerHTML += `<h2>${commits}</h2>`;
+// };
+
 getRepos();

From 0d746779c6a1a40a85a3c7f42275ca573ca5fbdd Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Wed, 29 Sep 2021 16:05:04 +0200
Subject: [PATCH 04/15] fetched most recent push date, default branch name for
 repos, number of commits for repos and linked to github repo

---
 code/script.js | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/code/script.js b/code/script.js
index a7980aec..eb699535 100644
--- a/code/script.js
+++ b/code/script.js
@@ -9,13 +9,23 @@ const getRepos = () => {
   fetch(REPOS_URL)
     .then((res) => res.json())
     .then((data) => {
-      console.log(data);
+      // console.log(data);
 
       const forkedRepos = data.filter(
         (repo) => repo.fork && repo.name.startsWith("project-")
+        // (repo) => repo.fork === true && repo.name.includes('project-')
       );
       forkedRepos.forEach(
-        (repo) => (projectContainer.innerHTML += `<h3>${repo.name}</h3>`)
+        (repo) =>
+          (projectContainer.innerHTML += `
+        <div>
+        <a href="${repo.html_url}">${repo.name} with default branch ${
+            repo.default_branch
+          }</a>
+        <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+        <p id="commit-${repo.name}"> Commits amount: </p>
+        </div>
+        `)
       );
       getPullRequests(forkedRepos);
     });
@@ -28,23 +38,26 @@ const getPullRequests = (repos) => {
     )
       .then((res) => res.json())
       .then((data) => {
-        //   console.log(data);
-        const userPullRequests = data.filter(
+        const userPullRequests = data.find(
           (pull) => pull.user.login === repo.owner.login
         );
-        console.log(userPullRequests);
-        const commitsURL = userPullRequests[0].commits_url;
-        console.log(commitsURL);
-        // getCommits(commitsURL);
 
-        const commentsURL = userPullRequests[0].review_comments_url;
-        console.log(commentsURL);
+        if (userPullRequests) {
+          fetchCommits(userPullRequests.commits_url, repo.name);
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            "No pull request yet";
+        }
       });
   });
 };
 
-// const getCommits = (commits) => {
-//   projectContainer.innerHTML += `<h2>${commits}</h2>`;
-// };
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+  fetch(myCommitsUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+    });
+};
 
 getRepos();

From 868cffdcff470d4188bf0b95e633e4dc69695408 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Wed, 29 Sep 2021 17:18:23 +0200
Subject: [PATCH 05/15] username and profile picture

---
 code/index.html | 35 ++++++++++++++++++-----------------
 code/script.js  | 20 +++++++++++++++++---
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..02fbf4cd 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,21 +1,22 @@
 <!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" />
+  </head>
+  <body>
+    <h1>GitHub Tracker</h1>
+    <div class="profile" id="userProfile"></div>
+    <h2>Projects:</h2>
+    <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <!-- This will be used to draw the chart 👇 -->
+    <canvas id="chart"></canvas>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
index eb699535..7e94cbc9 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,9 +1,22 @@
 const USER = "amandatilly";
 const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
-const NEWSSITE_URL =
-  "https://api.github.com/repos/Technigo/project-news-site/pulls/222/commits";
+const USER_URL = `https://api.github.com/users/${USER}`;
 
 const projectContainer = document.getElementById("projects");
+const profileContainer = document.getElementById("userProfile");
+
+const fetchUser = () => {
+  fetch(USER_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      profileContainer.innerHTML = /*html*/ `
+      <section class="user">
+      <h2>Username: ${data.login}</h2>
+      <img class="picture" src="${data.avatar_url}" alt="profile picture" />
+      </section>
+      `;
+    });
+};
 
 const getRepos = () => {
   fetch(REPOS_URL)
@@ -17,7 +30,7 @@ const getRepos = () => {
       );
       forkedRepos.forEach(
         (repo) =>
-          (projectContainer.innerHTML += `
+          (projectContainer.innerHTML += /*html*/ `
         <div>
         <a href="${repo.html_url}">${repo.name} with default branch ${
             repo.default_branch
@@ -61,3 +74,4 @@ const fetchCommits = (myCommitsUrl, myRepoName) => {
 };
 
 getRepos();
+fetchUser();

From ea408775400662df302fc678ea7197fd9a1c4e6d Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Wed, 29 Sep 2021 17:23:14 +0200
Subject: [PATCH 06/15] readme update

---
 README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1613a3b0..0869350e 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
 # 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 that I am using at Technigo. Using JavaScript, html, css and fetching data from API's from the JSON response.
 
 ## The problem
 
@@ -10,4 +8,4 @@ Describe how you approached to problem, and what tools and techniques you used t
 
 ## 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/

From dc2f55d6c4e5fe0492865b7e7374a0bf1c86a86b Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Thu, 30 Sep 2021 18:08:23 +0200
Subject: [PATCH 07/15] added chart and class names, started styling

---
 code/chart.js   | 25 ++++++++++++++++++-
 code/index.html | 20 +++++++++++-----
 code/script.js  | 16 ++++++-------
 code/style.css  | 64 +++++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/code/chart.js b/code/chart.js
index 92e85a30..61e65e38 100644
--- 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: ["Finished Projects", "Projects Left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - amount],
+          backgroundColor: [
+            "rgb(255, 99, 132)",
+            "rgb(54, 162, 235)",
+            "rgb(255, 205, 86)",
+          ],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
index 02fbf4cd..f9f1c5e2 100644
--- a/code/index.html
+++ b/code/index.html
@@ -6,15 +6,23 @@
     <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>
   </head>
+
   <body>
-    <h1>GitHub Tracker</h1>
-    <div class="profile" id="userProfile"></div>
-    <h2>Projects:</h2>
-    <main id="projects"></main>
+    <header class="header">
+      <h1>GitHub Tracker</h1>
+    </header>
+
+    <div class="user-profile" id="userProfile"></div>
+
+    <section class="grid">
+      <h2>Projects:</h2>
+      <main class="projects" id="projects"></main>
 
-    <!-- This will be used to draw the chart 👇 -->
-    <canvas id="chart"></canvas>
+      <!-- This will be used to draw the chart 👇 -->
+      <canvas id="chart"></canvas>
+    </section>
 
     <script src="./script.js"></script>
     <script src="./chart.js"></script>
diff --git a/code/script.js b/code/script.js
index 7e94cbc9..2ee89efa 100644
--- a/code/script.js
+++ b/code/script.js
@@ -11,8 +11,8 @@ const fetchUser = () => {
     .then((data) => {
       profileContainer.innerHTML = /*html*/ `
       <section class="user">
-      <h2>Username: ${data.login}</h2>
       <img class="picture" src="${data.avatar_url}" alt="profile picture" />
+      <h2>Username: ${data.login}</h2>
       </section>
       `;
     });
@@ -31,15 +31,15 @@ const getRepos = () => {
       forkedRepos.forEach(
         (repo) =>
           (projectContainer.innerHTML += /*html*/ `
-        <div>
-        <a href="${repo.html_url}">${repo.name} with default branch ${
-            repo.default_branch
-          }</a>
-        <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
-        <p id="commit-${repo.name}"> Commits amount: </p>
-        </div>
+        <div class="repo-card" id=${repo.name}>
+          <a href="${repo.html_url}">${repo.name}</a>
+				  <p>Branch: ${repo.default_branch} </p>
+            <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Amount of commits: </p>
+            </div>
         `)
       );
+      drawChart(forkedRepos.length);
       getPullRequests(forkedRepos);
     });
 };
diff --git a/code/style.css b/code/style.css
index 7c8ad447..7f5e24cd 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,3 +1,63 @@
+* {
+  box-sizing: border-box;
+  }
+
 body {
-  background: #FFECE9;
-}
\ No newline at end of file
+  background: #939F5C;
+}
+
+/* .section {
+  display: grid;
+  grid-template-columns: 1fr;
+} */
+
+.user-profile {
+  /* max-height: 60vh; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: sticky;
+}
+
+.projects {
+  display: grid;
+  grid-template-columns: 1fr;
+  height: auto;
+  width: 100%;
+  grid-gap: 5px;
+  text-align: center;
+  padding: 20px;
+} 
+
+.grid {
+  /* display: grid;
+  grid-template-columns: 1fr; */
+  
+}
+
+.repo-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* padding: 10px; */
+  border: 1px solid black;
+  /* box-shadow: 5px 5px black; */
+  /* margin-top: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+  max-width: 400px; */
+
+
+
+  @media (min-width: 768px) {
+    .projects {
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 30px;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .projects {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
\ No newline at end of file

From 12c000c7b28d9ed0320d9c2209e74614725e4578 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 16:49:48 +0200
Subject: [PATCH 08/15] styling and media queries

---
 code/chart.js   |   6 +-
 code/index.html |  16 +++--
 code/script.js  |   8 ++-
 code/style.css  | 183 ++++++++++++++++++++++++++++++++++++++----------
 4 files changed, 165 insertions(+), 48 deletions(-)

diff --git a/code/chart.js b/code/chart.js
index 61e65e38..c1a0bb68 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -7,14 +7,14 @@ const drawChart = (amount) => {
   const config = {
     type: "doughnut",
     data: {
-      labels: ["Finished Projects", "Projects Left"],
+      labels: ["Completed Projects", "Remaining Projects"],
       datasets: [
         {
           label: "My First Dataset",
           data: [amount, 20 - amount],
           backgroundColor: [
-            "rgb(255, 99, 132)",
-            "rgb(54, 162, 235)",
+            "rgb(22, 35, 50)",
+            "rgba(222,207,168,255)            ",
             "rgb(255, 205, 86)",
           ],
           hoverOffset: 4,
diff --git a/code/index.html b/code/index.html
index f9f1c5e2..77f98d7f 100644
--- a/code/index.html
+++ b/code/index.html
@@ -7,21 +7,27 @@
     <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>
 
   <body>
     <header class="header">
-      <h1>GitHub Tracker</h1>
+      <div class="user-profile" id="userProfile"></div>
     </header>
 
-    <div class="user-profile" id="userProfile"></div>
-
     <section class="grid">
-      <h2>Projects:</h2>
+      <h1>GitHub Tracker</h1>
       <main class="projects" id="projects"></main>
 
       <!-- This will be used to draw the chart 👇 -->
-      <canvas id="chart"></canvas>
+      <div class="chart-container">
+        <canvas id="chart"></canvas>
+      </div>
     </section>
 
     <script src="./script.js"></script>
diff --git a/code/script.js b/code/script.js
index 2ee89efa..f93368bc 100644
--- a/code/script.js
+++ b/code/script.js
@@ -12,7 +12,9 @@ const fetchUser = () => {
       profileContainer.innerHTML = /*html*/ `
       <section class="user">
       <img class="picture" src="${data.avatar_url}" alt="profile picture" />
-      <h2>Username: ${data.login}</h2>
+      <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>
       `;
     });
@@ -34,8 +36,8 @@ const getRepos = () => {
         <div class="repo-card" id=${repo.name}>
           <a href="${repo.html_url}">${repo.name}</a>
 				  <p>Branch: ${repo.default_branch} </p>
-            <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
-            <p id="commit-${repo.name}">Amount of commits: </p>
+            <p>Latest update: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Number of commits: </p>
             </div>
         `)
       );
diff --git a/code/style.css b/code/style.css
index 7f5e24cd..3bd8acca 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,63 +1,172 @@
 * {
-  box-sizing: border-box;
-  }
+  margin: 0;
+  padding: 0;
+  border: 0 none;
+}
 
 body {
-  background: #939F5C;
+  background: #ce7f5a;
+  font-family: "Josefin Sans", sans-serif;
+  line-height: 1.5;
 }
 
-/* .section {
-  display: grid;
-  grid-template-columns: 1fr;
-} */
-
-.user-profile {
-  /* max-height: 60vh; */
+.header {
+  height: 80vh;
+  width: auto;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  position: sticky;
+  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;
 }
 
 .projects {
-  display: grid;
-  grid-template-columns: 1fr;
-  height: auto;
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
   grid-gap: 5px;
-  text-align: center;
   padding: 20px;
-} 
+}
 
 .grid {
-  /* display: grid;
-  grid-template-columns: 1fr; */
-  
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  margin-top: 60px;
+  margin-bottom: 60px;
+}
+
+.grid h1 {
+  font-size: 50px;
+  color: whitesmoke;
+  text-align: center;
+  font-family: "Amatic SC", cursive;
 }
 
 .repo-card {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  /* padding: 10px; */
-  border: 1px solid black;
-  /* box-shadow: 5px 5px black; */
-  /* margin-top: 10px;
+  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;
-  max-width: 400px; */
+  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 (min-width: 768px) {
+  .projects {
+  }
+
+  .chart-container {
+    min-width: 400px;
+  }
+
+  .grid h1 {
+    font-size: 60px;
+  }
 
+  .repo-card p,
+  a {
+    font-size: 20px;
+  }
+
+  .header h2 {
+    font-size: 30px;
+  }
+
+  .header p {
+    font-size: 20px;
+  }
+}
 
+@media (min-width: 992px) {
+  .projects {
+    gap: 10px;
+  }
 
-  @media (min-width: 768px) {
-    .projects {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 30px;
-    }
+  .chart-container {
+    min-width: 600px;
   }
 
-  @media (min-width: 992px) {
-    .projects {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
\ No newline at end of file
+  .repo-card p,
+  a {
+    font-size: 25px;
+  }
+
+  .header h2 {
+    font-size: 35px;
+  }
+
+  .header p {
+    font-size: 25px;
+  }
+
+  .grid h1 {
+    font-size: 70px;
+  }
+}

From c85baa1911456598f8df116605c0665cd0a010bc Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 17:06:13 +0200
Subject: [PATCH 09/15] header styling, picture size and background height

---
 code/style.css | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/code/style.css b/code/style.css
index 3bd8acca..3dfc4ced 100644
--- a/code/style.css
+++ b/code/style.css
@@ -11,7 +11,7 @@ body {
 }
 
 .header {
-  height: 80vh;
+  height: 90vh;
   width: auto;
   display: flex;
   align-items: center;
@@ -50,7 +50,7 @@ h2 {
   width: 100px;
 }
 .user {
-  text-shadow: 5px 5px 10px black;
+  text-shadow: 5px 5px 8px black;
 }
 
 .projects {
@@ -69,15 +69,15 @@ h2 {
   justify-content: center;
   align-items: center;
   gap: 30px;
-  margin-top: 60px;
+  margin-top: 100px;
   margin-bottom: 60px;
 }
 
 .grid h1 {
-  font-size: 50px;
+  font-size: 30px;
   color: whitesmoke;
   text-align: center;
-  font-family: "Amatic SC", cursive;
+  text-transform: uppercase;
 }
 
 .repo-card {
@@ -127,7 +127,7 @@ h2 {
   }
 
   .grid h1 {
-    font-size: 60px;
+    font-size: 40px;
   }
 
   .repo-card p,
@@ -167,6 +167,10 @@ h2 {
   }
 
   .grid h1 {
-    font-size: 70px;
+    font-size: 60px;
+  }
+
+  .picture {
+    width: 130px;
   }
 }

From 5fd17177e5ead983541d37bbfba646a8e93de387 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 17:09:59 +0200
Subject: [PATCH 10/15] h1 size

---
 code/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/style.css b/code/style.css
index 3dfc4ced..4ec4cb1e 100644
--- a/code/style.css
+++ b/code/style.css
@@ -167,7 +167,7 @@ h2 {
   }
 
   .grid h1 {
-    font-size: 60px;
+    font-size: 50px;
   }
 
   .picture {

From 70d3032c3a7a948d2f2a038431ba307317fad8a1 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 17:18:41 +0200
Subject: [PATCH 11/15] text shadow

---
 code/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/style.css b/code/style.css
index 4ec4cb1e..da136056 100644
--- a/code/style.css
+++ b/code/style.css
@@ -50,7 +50,7 @@ h2 {
   width: 100px;
 }
 .user {
-  text-shadow: 5px 5px 8px black;
+  text-shadow: 5px 5px 10px black;
 }
 
 .projects {

From 5eb8df7390d12f8c3de821ff38f980059dc6f589 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 19:04:19 +0200
Subject: [PATCH 12/15] cleaned up code and added comments

---
 code/script.js | 19 ++++++++++++-------
 code/style.css |  6 ++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/code/script.js b/code/script.js
index f93368bc..ecc2413a 100644
--- a/code/script.js
+++ b/code/script.js
@@ -5,11 +5,12 @@ 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 = /*html*/ `
+      profileContainer.innerHTML = `
       <section class="user">
       <img class="picture" src="${data.avatar_url}" alt="profile picture" />
       <h2>Hi I'm ${data.name}</h2>
@@ -20,19 +21,18 @@ const fetchUser = () => {
     });
 };
 
+//function to fetch and display repos
 const getRepos = () => {
   fetch(REPOS_URL)
     .then((res) => res.json())
     .then((data) => {
-      // console.log(data);
-
       const forkedRepos = data.filter(
         (repo) => repo.fork && repo.name.startsWith("project-")
-        // (repo) => repo.fork === true && repo.name.includes('project-')
       );
+
       forkedRepos.forEach(
         (repo) =>
-          (projectContainer.innerHTML += /*html*/ `
+          (projectContainer.innerHTML += `
         <div class="repo-card" id=${repo.name}>
           <a href="${repo.html_url}">${repo.name}</a>
 				  <p>Branch: ${repo.default_branch} </p>
@@ -46,6 +46,7 @@ const getRepos = () => {
     });
 };
 
+//function to fetch pull
 const getPullRequests = (repos) => {
   repos.forEach((repo) => {
     fetch(
@@ -53,10 +54,13 @@ const getPullRequests = (repos) => {
     )
       .then((res) => res.json())
       .then((data) => {
+        //compares repo user info to pull user info and title with my name
         const userPullRequests = data.find(
-          (pull) => pull.user.login === repo.owner.login
+          (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);
         } else {
@@ -67,6 +71,7 @@ const getPullRequests = (repos) => {
   });
 };
 
+//function to fetch and display commits
 const fetchCommits = (myCommitsUrl, myRepoName) => {
   fetch(myCommitsUrl)
     .then((res) => res.json())
diff --git a/code/style.css b/code/style.css
index da136056..314738f1 100644
--- a/code/style.css
+++ b/code/style.css
@@ -10,6 +10,8 @@ body {
   line-height: 1.5;
 }
 
+/* Hero */
+
 .header {
   height: 90vh;
   width: auto;
@@ -53,6 +55,8 @@ h2 {
   text-shadow: 5px 5px 10px black;
 }
 
+/* Main Section */
+
 .projects {
   display: flex;
   flex-direction: row;
@@ -118,6 +122,8 @@ h2 {
   max-width: 400px;
 }
 
+/* Media Queries */
+
 @media (min-width: 768px) {
   .projects {
   }

From 82130cc2268d1f1cc3ec41851eb196d5ca85cea7 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 19:14:26 +0200
Subject: [PATCH 13/15] adding comments in js

---
 code/script.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/script.js b/code/script.js
index ecc2413a..96d95dfd 100644
--- a/code/script.js
+++ b/code/script.js
@@ -26,6 +26,7 @@ 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-")
       );
@@ -41,8 +42,8 @@ const getRepos = () => {
             </div>
         `)
       );
-      drawChart(forkedRepos.length);
-      getPullRequests(forkedRepos);
+      drawChart(forkedRepos.length); // calling function and passing value to chart.js (amount)
+      getPullRequests(forkedRepos); // calling function and passing value
     });
 };
 
@@ -62,7 +63,7 @@ const getPullRequests = (repos) => {
         );
         // displays number of commits if a pull request has been made, if not it displays message
         if (userPullRequests) {
-          fetchCommits(userPullRequests.commits_url, repo.name);
+          fetchCommits(userPullRequests.commits_url, repo.name); //calling function and passing values
         } else {
           document.getElementById(`commit-${repo.name}`).innerHTML =
             "No pull request yet";

From 5d1d6f34c7e7b0f6ae3a6332af9b6810d7027f1d Mon Sep 17 00:00:00 2001
From: Amanda Tilly <amandatilly@Amandas-2.lan>
Date: Fri, 1 Oct 2021 19:20:01 +0200
Subject: [PATCH 14/15] updated readme

---
 README.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0869350e..acb346a6 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,18 @@ Creating a place to keep track of the GitHub repos that I am using at Technigo.
 
 ## 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?
+Focused on the blue requirements and mostly on JavaScript this week. I found it challenging but asked for help and worked a lot with my team. I feel like I learned a lot this week and I am happy with the final result.
+
+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
 

From 68f484102635166bda3ad15f9a5babb90d6fb152 Mon Sep 17 00:00:00 2001
From: Amanda Tilly <hello@amandatilly.com>
Date: Sun, 9 Jan 2022 20:31:38 +0100
Subject: [PATCH 15/15] Update README.md

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index acb346a6..e550ec2f 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,9 @@
 # GitHub Tracker
 
-Creating a place to keep track of the GitHub repos that I am using at Technigo. Using JavaScript, html, css and fetching data from API's from the JSON response.
+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
 
-Focused on the blue requirements and mostly on JavaScript this week. I found it challenging but asked for help and worked a lot with my team. I feel like I learned a lot this week and I am happy with the final result.
-
 My page includes:
 
 - A list of all repos that are forked from Technigo