From 0035b2dbe3ed937ba5cda2c19676afee6d8f29dd Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Thu, 24 Feb 2022 11:43:13 +0100
Subject: [PATCH 01/14] added function for fetching API for all my repos and
 filtering them on forks and projects from Technigo

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

diff --git a/code/script.js b/code/script.js
index e69de29b..323f7236 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,53 @@
+const username = 'Kras053'
+const API_URL =`https://api.github.com/users/${username}/repos`
+
+//my repos in GitHub filtered on forks from Technigo
+const myRepos = () => {
+
+    fetch(API_URL)
+    .then((response) => response.json())
+    .then((data) => {
+    console.log(data)
+
+    const forkedRepos = data.filter(repo => repo.fork)
+    const technigoRepos = data.filter(repo => repo.name.startsWith('project'))
+    console.log(forkedRepos)    
+    console.log(technigoRepos)
+})
+}
+
+myRepos()
+
+
+
+
+/* later specific repos list
+const getPullRequests = (repos) => {
+    repos.forEach(repo => {
+        fetch('API_URL')
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+
+    })
+
+}*/
+
+/*
+
+https://api.github.com/repos/Technigo/${reponame}/pulls
+
+*/
+
+/*
+step 1 worked: 
+const username = 'Kras053'
+const API_URL =`https://api.github.com/users/${username}/repos`
+
+fetch(API_URL)
+.then((response) => response.json())
+.then((data) => {
+    console.log('data', data)
+})
+*/
\ No newline at end of file

From 0f46eea90a7626ecf56228730f00c53dad9b75f6 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Thu, 24 Feb 2022 13:04:54 +0100
Subject: [PATCH 02/14] added function for fetching the pull requests and used
 data.find method to get my pull requests

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

diff --git a/code/script.js b/code/script.js
index 323f7236..2e53c1e2 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,6 +1,7 @@
 const username = 'Kras053'
 const API_URL =`https://api.github.com/users/${username}/repos`
 
+
 //my repos in GitHub filtered on forks from Technigo
 const myRepos = () => {
 
@@ -13,32 +14,40 @@ const myRepos = () => {
     const technigoRepos = data.filter(repo => repo.name.startsWith('project'))
     console.log(forkedRepos)    
     console.log(technigoRepos)
+
+    //need to invoke this next function here already, passing along the filtered repos 
+    //as an argument when calling the pull request function
+    getPullRequests(technigoRepos)
 })
 }
-
 myRepos()
 
 
-
-
-/* later specific repos list
-const getPullRequests = (repos) => {
-    repos.forEach(repo => {
-        fetch('API_URL')
-        .then(res => res.json())
-        .then(data => {
-            console.log(data)
-        })
-
+const getPullRequests = (technigoRepos) => {
+    //this fetches all the pull requests for each filtered project
+    technigoRepos.forEach(repo => {
+      fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`)
+      .then(res => res.json())
+      .then(data => {
+          console.log(data)
+              
+          //this finds the pull requests I made by comparing the user.login from the pull API
+              // with the owner.login in the filtered repo API, and therefore we use pull in the
+              // find array method because that is the name of the array. 
+              // when undefined bc I did not do the pull request but my teammate
+
+              const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
+              console.log(myPullRequests)
+              
+              //2. Now you're able to get the commits for each repo by using
+              // the commits_url as an argument to call another function
+              //3. You can also get the comments for each PR by calling
+              // another function with the review_comments_url as argument
+          })   
     })
+        
+}
 
-}*/
-
-/*
-
-https://api.github.com/repos/Technigo/${reponame}/pulls
-
-*/
 
 /*
 step 1 worked: 

From e5725ca87b1272b4927ff8814f06cb61af79b975 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Fri, 25 Feb 2022 14:27:42 +0100
Subject: [PATCH 03/14] added token and started on number of commits

---
 .gitignore      |  2 ++
 code/index.html |  3 ++
 code/script.js  | 77 +++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..58702a2e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+// .gitignore file
+code/secret.js
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..b0d0b7f5 100644
--- a/code/index.html
+++ b/code/index.html
@@ -11,10 +11,13 @@
   <h1>GitHub Tracker</h1>
   <h2>Projects:</h2>
   <main id="projects"></main>
+  <div class="repo-container"></div>
 
   <!-- This will be used to draw the chart 👇 -->
   <canvas id="chart"></canvas>
 
+
+  <script src="./secret.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>
diff --git a/code/script.js b/code/script.js
index 2e53c1e2..e654a515 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,11 +1,22 @@
+
+
 const username = 'Kras053'
 const API_URL =`https://api.github.com/users/${username}/repos`
+const repoContainer = document.querySelector('.repo-container')
+
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: `token ${GITHUBTOKEN}`
+      }
+  }
+
 
 
 //my repos in GitHub filtered on forks from Technigo
 const myRepos = () => {
 
-    fetch(API_URL)
+    fetch(API_URL, options)
     .then((response) => response.json())
     .then((data) => {
     console.log(data)
@@ -18,36 +29,72 @@ const myRepos = () => {
     //need to invoke this next function here already, passing along the filtered repos 
     //as an argument when calling the pull request function
     getPullRequests(technigoRepos)
+
 })
 }
 myRepos()
 
-
 const getPullRequests = (technigoRepos) => {
     //this fetches all the pull requests for each filtered project
     technigoRepos.forEach(repo => {
-      fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`)
+      fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options)
       .then(res => res.json())
       .then(data => {
           console.log(data)
               
-          //this finds the pull requests I made by comparing the user.login from the pull API
-              // with the owner.login in the filtered repo API, and therefore we use pull in the
-              // find array method because that is the name of the array. 
-              // when undefined bc I did not do the pull request but my teammate
+//this finds the pull requests I made by comparing the user.login from the pull API
+// with the owner.login in the filtered repo/data(?) API, and therefore we use pull in the
+// find array method because that is the name of the array. 
+// when undefined bc I did not do the pull request but my teammate
 
-              const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
-              console.log(myPullRequests)
-              
-              //2. Now you're able to get the commits for each repo by using
-              // the commits_url as an argument to call another function
-              //3. You can also get the comments for each PR by calling
-              // another function with the review_comments_url as argument
+        const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
+        console.log(myPullRequests)
+
+        if (myPullRequests) {
+            getCommits(myPullRequests.commits_url, repo.name)
+           /* console.log(myCommitsURL)*/
+        }
+        
+        // från myPullrequests vill jag hämta från varje array alla 3 commits_URL:sen och ? comments_URl:sen 
+        // och sedan göra en fetch för varje??
+
+// To get the commits from a PR, you need to get the URL from the commits_url property in the PR json object. It might look something like this:
+// https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits
+// and then do a fetch with that url.
           })   
     })
-        
 }
 
+const getCommits = (URL, myRepo) => {
+    fetch (URL, options)
+    .then((res) => res.json())
+    .then(data => {
+   /*     document.getElementById(`${myRepo}`).innerHTML += `<p>${data.length}</p>`*/
+        console.log(data.length)
+    })
+    }
+
+    /* printing out my repos: 
+    data.name.forEach(repo => {
+        document.querySelector('.repo-container').innerHTML += `
+          <div class="repo" id=${repo.name}>
+            <h2>${repo.name}</h2>
+          </div>
+        `
+      })*/
+/*
+    data.name.forEach((repo) => {
+    repoContainer.innerHTML += `<p>${repo.name}</p>`
+    })*/
+
+    // repos.forEach(repo => {
+//     document.getElementById('container').innerHTML += `
+//       <div class="repo" id=${repo.name}>
+//         <h2>${repo.name}</h2>
+//       </div>
+//     `
+//   })
+//   document.getElementById(repoName).innerHTML += 'New data to inject'
 
 /*
 step 1 worked: 

From 7d72a6f4b9e067c0dd097275c07e47fec540b435 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sat, 26 Feb 2022 09:09:12 +0100
Subject: [PATCH 04/14] added user profile and some grid styling etc

---
 code/index.html |  3 ++-
 code/script.js  | 57 ++++++++++++++++++++++++++++++++++++-------------
 code/style.css  | 36 +++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/code/index.html b/code/index.html
index b0d0b7f5..a948517b 100644
--- a/code/index.html
+++ b/code/index.html
@@ -9,7 +9,8 @@
 </head>
 <body>
   <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
+  <div class ="user-container"></div>
+
   <main id="projects"></main>
   <div class="repo-container"></div>
 
diff --git a/code/script.js b/code/script.js
index e654a515..75bfd103 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,9 +1,10 @@
-
-
 const username = 'Kras053'
-const API_URL =`https://api.github.com/users/${username}/repos`
+const USER_URL =`https://api.github.com/users/${username}`
+const REPOS_URL =`https://api.github.com/users/${username}/repos`
 const repoContainer = document.querySelector('.repo-container')
+const userContainer = document.querySelector('.user-container')
 
+//Token from GitHub
 const options = {
     method: 'GET',
     headers: {
@@ -11,12 +12,28 @@ const options = {
       }
   }
 
-
+// my user info from GitHub 
+const userProfile = () => {
+	fetch(USER_URL, options)
+		.then((res) => res.json())
+		.then((data) => {
+			userContainer.innerHTML += `
+			  <a href="${data.html_url}">
+          <img class="profile-image" src="${data.avatar_url}"/>
+          <span class="profile-name">
+            ${data.login}
+          </span>
+        </a>
+		  `;
+		});
+};
+
+userProfile();
 
 //my repos in GitHub filtered on forks from Technigo
 const myRepos = () => {
 
-    fetch(API_URL, options)
+    fetch(REPOS_URL, options)
     .then((response) => response.json())
     .then((data) => {
     console.log(data)
@@ -26,6 +43,17 @@ const myRepos = () => {
     console.log(forkedRepos)    
     console.log(technigoRepos)
 
+    technigoRepos.forEach(repo => {
+        repoContainer.innerHTML += `<p>Projects: ${data.name}</p>`
+        console.log(data.name)
+
+        })
+/*
+    if (technigoRepos) {
+        repoContainer.innerHTML += `<p>Projects: ${data[0].name}</p>`
+        console.log(data[0].name)
+    }*/
+
     //need to invoke this next function here already, passing along the filtered repos 
     //as an argument when calling the pull request function
     getPullRequests(technigoRepos)
@@ -44,7 +72,7 @@ const getPullRequests = (technigoRepos) => {
               
 //this finds the pull requests I made by comparing the user.login from the pull API
 // with the owner.login in the filtered repo/data(?) API, and therefore we use pull in the
-// find array method because that is the name of the array. 
+// find array method because that is the name of the array?
 // when undefined bc I did not do the pull request but my teammate
 
         const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
@@ -54,26 +82,25 @@ const getPullRequests = (technigoRepos) => {
             getCommits(myPullRequests.commits_url, repo.name)
            /* console.log(myCommitsURL)*/
         }
-        
-        // från myPullrequests vill jag hämta från varje array alla 3 commits_URL:sen och ? comments_URl:sen 
-        // och sedan göra en fetch för varje??
 
-// To get the commits from a PR, you need to get the URL from the commits_url property in the PR json object. It might look something like this:
-// https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits
-// and then do a fetch with that url.
           })   
-    })
-}
 
+          // To get the commits from a PR we get the URL from the commits_url property in the PR json object 
+// and then do a fetch with that url.
 const getCommits = (URL, myRepo) => {
     fetch (URL, options)
     .then((res) => res.json())
     .then(data => {
-   /*     document.getElementById(`${myRepo}`).innerHTML += `<p>${data.length}</p>`*/
+   repoContainer.innerHTML += `<p>Number of commits: ${data.length}</p>`
         console.log(data.length)
     })
     }
 
+    })
+    }
+
+
+
     /* printing out my repos: 
     data.name.forEach(repo => {
         document.querySelector('.repo-container').innerHTML += `
diff --git a/code/style.css b/code/style.css
index 7c8ad447..63ef0be2 100644
--- a/code/style.css
+++ b/code/style.css
@@ -1,3 +1,39 @@
+* {
+  margin: 0; 
+  padding: 0;  
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: content-box;
+  -webkit-font-smoothing: antialiased; 
+  text-rendering: optimizeLegibility;
+}
+
 body {
   background: #FFECE9;
+}
+
+.user-container img {
+  width: 250px;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  justify-items: center;
+  place-items: center;
+  margin: 15px;
+}
+
+.user-container a {
+  margin: 10px;
+  color:black;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  justify-items: center;
+  place-items: center;
+}
+
+.repo-container {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  justify-items: center;
+  place-items: center;
+  grid-gap: 15px;
 }
\ No newline at end of file

From 9a2157efbaf271efb074546f02b4ec8b6c7c6f5d Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sat, 26 Feb 2022 10:01:33 +0100
Subject: [PATCH 05/14] added containers with repo info and some styling

---
 code/index.html |  7 ++++++-
 code/script.js  | 49 ++++++++++++++++++++++++++++++++++++-------------
 code/style.css  |  4 +++-
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/code/index.html b/code/index.html
index a948517b..b57e800d 100644
--- a/code/index.html
+++ b/code/index.html
@@ -6,9 +6,14 @@
   <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=Nixie+One&family=Roboto:wght@300&display=swap"
+        rel="stylesheet">
+
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
   <div class ="user-container"></div>
 
   <main id="projects"></main>
diff --git a/code/script.js b/code/script.js
index 75bfd103..7c28cfea 100644
--- a/code/script.js
+++ b/code/script.js
@@ -12,20 +12,20 @@ const options = {
       }
   }
 
-// my user info from GitHub 
+// my user info from GitHub wrapped in clickable link to my GitHub page
 const userProfile = () => {
 	fetch(USER_URL, options)
-		.then((res) => res.json())
-		.then((data) => {
-			userContainer.innerHTML += `
-			  <a href="${data.html_url}">
-          <img class="profile-image" src="${data.avatar_url}"/>
-          <span class="profile-name">
-            ${data.login}
-          </span>
-        </a>
-		  `;
-		});
+	.then((res) => res.json())
+	.then((data) => {
+	userContainer.innerHTML += `
+	<a href="${data.html_url}">
+    <img class="profile-image" src="${data.avatar_url}"/>
+    <span class="profile-name">
+    ${data.login}
+    </span>
+    </a>
+	`;
+  });
 };
 
 userProfile();
@@ -43,11 +43,34 @@ const myRepos = () => {
     console.log(forkedRepos)    
     console.log(technigoRepos)
 
+    // gets info from the filtered repos arrays and displays them on my page
+
+    technigoRepos.forEach((repo) => {
+        repoContainer.innerHTML += `
+
+            <div class="repo-cards" id="${repo.id}">
+                <h3><a href="${repo.html_url}"><b>${repo.name}</b></a> 
+                 (${repo.default_branch})</h3>
+                <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                <p id="commit_${repo.name}">Number of commits: </p>
+            </div> 
+            `
+        })
+
+        // repos.forEach(repo => {
+        //     document.getElementById('container').innerHTML += `
+        //       <div class="repo" id=${repo.name}>
+        //         <h2>${repo.name}</h2>
+        //       </div>
+        //     `
+        //   })
+
+    /*
     technigoRepos.forEach(repo => {
         repoContainer.innerHTML += `<p>Projects: ${data.name}</p>`
         console.log(data.name)
 
-        })
+        })*/
 /*
     if (technigoRepos) {
         repoContainer.innerHTML += `<p>Projects: ${data[0].name}</p>`
diff --git a/code/style.css b/code/style.css
index 63ef0be2..1b023bb2 100644
--- a/code/style.css
+++ b/code/style.css
@@ -10,6 +10,7 @@
 
 body {
   background: #FFECE9;
+  font-family: 'roboto', sans-serif;
 }
 
 .user-container img {
@@ -28,6 +29,7 @@ body {
   grid-template-columns: repeat(1, 1fr);
   justify-items: center;
   place-items: center;
+  margin-bottom: 35px;
 }
 
 .repo-container {
@@ -35,5 +37,5 @@ body {
   grid-template-columns: repeat(1, 1fr);
   justify-items: center;
   place-items: center;
-  grid-gap: 15px;
+  grid-gap: 40px;
 }
\ No newline at end of file

From 1e7852a90d68b0d4ac16b9eee1c89a38fcc28732 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sat, 26 Feb 2022 11:47:42 +0100
Subject: [PATCH 06/14] added link to pull reqest and fixed new issue this led
 to with if-statements

---
 code/script.js | 68 +++++++++++++-------------------------------------
 1 file changed, 18 insertions(+), 50 deletions(-)

diff --git a/code/script.js b/code/script.js
index 7c28cfea..4d303db3 100644
--- a/code/script.js
+++ b/code/script.js
@@ -44,39 +44,19 @@ const myRepos = () => {
     console.log(technigoRepos)
 
     // gets info from the filtered repos arrays and displays them on my page
+    // using repo.name as dynamic ID to also insert commits
 
     technigoRepos.forEach((repo) => {
         repoContainer.innerHTML += `
 
-            <div class="repo-cards" id="${repo.id}">
+            <div class="repo-cards" id="${repo.name}">
                 <h3><a href="${repo.html_url}"><b>${repo.name}</b></a> 
                  (${repo.default_branch})</h3>
                 <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
-                <p id="commit_${repo.name}">Number of commits: </p>
             </div> 
             `
         })
 
-        // repos.forEach(repo => {
-        //     document.getElementById('container').innerHTML += `
-        //       <div class="repo" id=${repo.name}>
-        //         <h2>${repo.name}</h2>
-        //       </div>
-        //     `
-        //   })
-
-    /*
-    technigoRepos.forEach(repo => {
-        repoContainer.innerHTML += `<p>Projects: ${data.name}</p>`
-        console.log(data.name)
-
-        })*/
-/*
-    if (technigoRepos) {
-        repoContainer.innerHTML += `<p>Projects: ${data[0].name}</p>`
-        console.log(data[0].name)
-    }*/
-
     //need to invoke this next function here already, passing along the filtered repos 
     //as an argument when calling the pull request function
     getPullRequests(technigoRepos)
@@ -100,50 +80,38 @@ const getPullRequests = (technigoRepos) => {
 
         const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
         console.log(myPullRequests)
+        /*console.log(myPullRequests.html_url)*/
+       
+        if(myPullRequests) {
+            document.getElementById(`${repo.name}`).innerHTML += 
+            `<a href="${repo.html_url}">${myPullRequests.html_url}</a>`
+        } else {
+            document.getElementById(`${repo.name}`).innerHTML += 
+            `<p> Pull requests made by teammate</p>`
+        }
 
         if (myPullRequests) {
-            getCommits(myPullRequests.commits_url, repo.name)
-           /* console.log(myCommitsURL)*/
-        }
+            getCommits(myPullRequests.commits_url, repo.name) 
 
+        } else {
+            document.getElementById(`${repo.name}`).innerHTML += 
+            `<p> Commits made by teammate</p>`
+        }
           })   
 
           // To get the commits from a PR we get the URL from the commits_url property in the PR json object 
 // and then do a fetch with that url.
-const getCommits = (URL, myRepo) => {
+const getCommits = (URL, repoName) => {
     fetch (URL, options)
     .then((res) => res.json())
     .then(data => {
-   repoContainer.innerHTML += `<p>Number of commits: ${data.length}</p>`
+        document.getElementById(`${repo.name}`).innerHTML += `<p>Number of commits: ${data.length}</p>`
         console.log(data.length)
     })
     }
-
     })
     }
 
-
-
-    /* printing out my repos: 
-    data.name.forEach(repo => {
-        document.querySelector('.repo-container').innerHTML += `
-          <div class="repo" id=${repo.name}>
-            <h2>${repo.name}</h2>
-          </div>
-        `
-      })*/
-/*
-    data.name.forEach((repo) => {
-    repoContainer.innerHTML += `<p>${repo.name}</p>`
-    })*/
-
-    // repos.forEach(repo => {
-//     document.getElementById('container').innerHTML += `
-//       <div class="repo" id=${repo.name}>
-//         <h2>${repo.name}</h2>
-//       </div>
-//     `
-//   })
 //   document.getElementById(repoName).innerHTML += 'New data to inject'
 
 /*

From ba1c04750da3071ca0594744eadd16a31437ad92 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sat, 26 Feb 2022 19:46:53 +0100
Subject: [PATCH 07/14] added chart

---
 code/chart.js   | 34 ++++++++++++++++++++++++++++++++++
 code/index.html |  6 +++++-
 code/script.js  | 11 ++++++-----
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/code/chart.js b/code/chart.js
index 92e85a30..52a3d2af 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -2,3 +2,37 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const doughnutCounter = (finishedProjects) => {
+    const labels = [
+        'Finished projects',
+        'Remaining projects',
+      ];
+   
+      const data = {
+        labels: labels,
+        datasets: [{
+          label: 'My finished projects',
+          backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 95, 155)'],
+          borderColor: 'rgb(255, 99, 132)',
+          data: [finishedProjects, 19-finishedProjects],
+        }]
+        
+      };
+
+      const config = {
+        type: 'doughnut',
+        data: data,
+        options: {}
+      };
+
+      
+      const myChart = new Chart(
+        document.getElementById('chart'),
+        config
+        
+      );
+     
+      }
+      doughnutCounter()
+      
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index b57e800d..0042c830 100644
--- a/code/index.html
+++ b/code/index.html
@@ -11,6 +11,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nixie+One&family=Roboto:wght@300&display=swap"
         rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>     -->
 
 </head>
 <body>
@@ -20,9 +22,11 @@
   <div class="repo-container"></div>
 
   <!-- This will be used to draw the chart 👇 -->
+  <div class="chart-container">
   <canvas id="chart"></canvas>
+</div>
 
-
+<!--this is for the GitHub secret token so it can fetch more than 60 times/h-->
   <script src="./secret.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
diff --git a/code/script.js b/code/script.js
index 4d303db3..fbfb22d1 100644
--- a/code/script.js
+++ b/code/script.js
@@ -76,20 +76,23 @@ const getPullRequests = (technigoRepos) => {
 //this finds the pull requests I made by comparing the user.login from the pull API
 // with the owner.login in the filtered repo/data(?) API, and therefore we use pull in the
 // find array method because that is the name of the array?
-// when undefined bc I did not do the pull request but my teammate
 
         const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
         console.log(myPullRequests)
         /*console.log(myPullRequests.html_url)*/
        
-        if(myPullRequests) {
+
+        // here the pull request link is printed or if no link a default message. In log it would say undefined. 
+        if (myPullRequests) {
             document.getElementById(`${repo.name}`).innerHTML += 
             `<a href="${repo.html_url}">${myPullRequests.html_url}</a>`
         } else {
             document.getElementById(`${repo.name}`).innerHTML += 
-            `<p> Pull requests made by teammate</p>`
+            `<p> Pull request made by teammate</p>`
         }
 
+        //here is a first step to get the commits for each pull request, and we add the dynamic id to pass on
+        // or default message that teammate did the commits
         if (myPullRequests) {
             getCommits(myPullRequests.commits_url, repo.name) 
 
@@ -112,8 +115,6 @@ const getCommits = (URL, repoName) => {
     })
     }
 
-//   document.getElementById(repoName).innerHTML += 'New data to inject'
-
 /*
 step 1 worked: 
 const username = 'Kras053'

From 5455b55885d71cdc680fb290227de1ba745c5f88 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sun, 27 Feb 2022 08:17:44 +0100
Subject: [PATCH 08/14] added function to pass on my repos to the chart

---
 code/chart.js   | 15 +++------------
 code/index.html |  3 +--
 code/script.js  |  7 +++++++
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/code/chart.js b/code/chart.js
index 52a3d2af..a7f68995 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -1,9 +1,7 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
-
-const doughnutCounter = (finishedProjects) => {
+const doughnutCounter = (projects) => {
     const labels = [
         'Finished projects',
         'Remaining projects',
@@ -12,12 +10,11 @@ const doughnutCounter = (finishedProjects) => {
       const data = {
         labels: labels,
         datasets: [{
+          data: [projects, 19-projects],
           label: 'My finished projects',
           backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 95, 155)'],
           borderColor: 'rgb(255, 99, 132)',
-          data: [finishedProjects, 19-finishedProjects],
         }]
-        
       };
 
       const config = {
@@ -27,12 +24,6 @@ const doughnutCounter = (finishedProjects) => {
       };
 
       
-      const myChart = new Chart(
-        document.getElementById('chart'),
-        config
-        
-      );
-     
+      const myChart = new Chart(document.getElementById('chart'),config);
       }
-      doughnutCounter()
       
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 0042c830..86730bbd 100644
--- a/code/index.html
+++ b/code/index.html
@@ -12,7 +12,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Nixie+One&family=Roboto:wght@300&display=swap"
         rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>     -->
 
 </head>
 <body>
@@ -23,7 +22,7 @@
 
   <!-- This will be used to draw the chart 👇 -->
   <div class="chart-container">
-  <canvas id="chart"></canvas>
+  <canvas class="chart" id="chart"></canvas>
 </div>
 
 <!--this is for the GitHub secret token so it can fetch more than 60 times/h-->
diff --git a/code/script.js b/code/script.js
index fbfb22d1..6c345b80 100644
--- a/code/script.js
+++ b/code/script.js
@@ -61,6 +61,9 @@ const myRepos = () => {
     //as an argument when calling the pull request function
     getPullRequests(technigoRepos)
 
+         //Passing the filtered repos length to the chart in the file chart.js
+         doughnutCounter(technigoRepos.length)
+
 })
 }
 myRepos()
@@ -100,8 +103,12 @@ const getPullRequests = (technigoRepos) => {
             document.getElementById(`${repo.name}`).innerHTML += 
             `<p> Commits made by teammate</p>`
         }
+      
           })   
 
+  
+       
+
           // To get the commits from a PR we get the URL from the commits_url property in the PR json object 
 // and then do a fetch with that url.
 const getCommits = (URL, repoName) => {

From a47d863d4b7bd7fd049d378c6da3f50c4ced7474 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sun, 27 Feb 2022 10:56:06 +0100
Subject: [PATCH 09/14] added styling and responsiveness

---
 code/chart.js   |  4 ++--
 code/index.html |  4 +++-
 code/script.js  |  5 ++---
 code/style.css  | 51 ++++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/code/chart.js b/code/chart.js
index a7f68995..1972ffc8 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -12,8 +12,8 @@ const doughnutCounter = (projects) => {
         datasets: [{
           data: [projects, 19-projects],
           label: 'My finished projects',
-          backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 95, 155)'],
-          borderColor: 'rgb(255, 99, 132)',
+          backgroundColor: ['rgb(217, 96, 152)', 'rgb(50, 82, 136)'],
+          borderColor: 'rgb(38, 0, 27)',
         }]
       };
 
diff --git a/code/index.html b/code/index.html
index 86730bbd..fea7d5d4 100644
--- a/code/index.html
+++ b/code/index.html
@@ -15,15 +15,17 @@
 
 </head>
 <body>
+  <main class="projects" id="projects">
+  
   <div class ="user-container"></div>
 
-  <main id="projects"></main>
   <div class="repo-container"></div>
 
   <!-- This will be used to draw the chart 👇 -->
   <div class="chart-container">
   <canvas class="chart" id="chart"></canvas>
 </div>
+</main> 
 
 <!--this is for the GitHub secret token so it can fetch more than 60 times/h-->
   <script src="./secret.js"></script>
diff --git a/code/script.js b/code/script.js
index 6c345b80..7dd6faf4 100644
--- a/code/script.js
+++ b/code/script.js
@@ -20,8 +20,7 @@ const userProfile = () => {
 	userContainer.innerHTML += `
 	<a href="${data.html_url}">
     <img class="profile-image" src="${data.avatar_url}"/>
-    <span class="profile-name">
-    ${data.login}
+    <span class="profile-name">Github tracker for ${data.login}
     </span>
     </a>
 	`;
@@ -88,7 +87,7 @@ const getPullRequests = (technigoRepos) => {
         // here the pull request link is printed or if no link a default message. In log it would say undefined. 
         if (myPullRequests) {
             document.getElementById(`${repo.name}`).innerHTML += 
-            `<a href="${repo.html_url}">${myPullRequests.html_url}</a>`
+            `<a href="${myPullRequests.html_url}"> Pull request</a>`
         } else {
             document.getElementById(`${repo.name}`).innerHTML += 
             `<p> Pull request made by teammate</p>`
diff --git a/code/style.css b/code/style.css
index 1b023bb2..e77a2b39 100644
--- a/code/style.css
+++ b/code/style.css
@@ -9,7 +9,7 @@
 }
 
 body {
-  background: #FFECE9;
+  background: rgb(250, 238, 231);
   font-family: 'roboto', sans-serif;
 }
 
@@ -20,11 +20,15 @@ body {
   justify-items: center;
   place-items: center;
   margin: 15px;
+  border-style:inset;
+  border-width: 4px;
+  border-color:rgb(50, 82, 136);
 }
 
 .user-container a {
   margin: 10px;
   color:black;
+  text-decoration: none;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   justify-items: center;
@@ -38,4 +42,49 @@ body {
   justify-items: center;
   place-items: center;
   grid-gap: 40px;
+  margin-bottom: 55px;
+
+}
+
+.repo-container a {
+text-decoration: none;  
+color:rgb(36, 161, 156);
+}
+
+.chart {
+ max-width: 350px; 
+ max-height: 350px; 
+}
+
+.chart-container {
+  display: grid;
+  place-items: center;
+  margin-top: 25px;
+}
+
+@media (min-width: 668px) {
+.repo-container {  
+grid-template-columns: repeat(2, 1fr);
+justify-items: center;
+place-items: center;
+}
+}
+
+@media (min-width: 1024px) {
+.repo-container {
+ grid-template-columns: repeat(3, 1fr); 
+}  
+
+.user-container a:hover {
+  background-color: black;
+  color: rgb(217, 96, 152);
+} 
+.user-container img:hover {
+  border-color:rgb(217, 96, 152);  
+} 
+
+.repo-container a:hover {
+  background-color: black;
+  color: rgb(217, 96, 152);
+    }  
 }
\ No newline at end of file

From aff5bf9a0e023d5ff586a1a9bff95b83bfc3be4f Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sun, 27 Feb 2022 12:25:47 +0100
Subject: [PATCH 10/14] added readme

---
 README.md       |  23 ++++++++---
 code/chart.js   |   7 +++-
 code/index.html |  17 ++++----
 code/script.js  | 105 ++++++++++++++++++++----------------------------
 code/style.css  |  19 +++++----
 5 files changed, 85 insertions(+), 86 deletions(-)

diff --git a/README.md b/README.md
index 1613a3b0..4665bebb 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,26 @@
 # 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 week we created a GitHub tracker which uses GitHubs APIs to keep track of our finished projects and a chart to display how many are left.
 
 ## The problem
+We worked with fetching APIs and retrieving specific info from them:
+- 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 should be responsive (mobile first)
+- A chart of how many projects that are done so far, compared to how many you will do using Chart.js
+
+This was accomplished by fetching and filtering the APIs with filter, startsWith, forEach, and find-methods and then using template literals ${} to displaying this on out webpage. 
+
+The issue of 60 fetches/hour being the limit was solved by using a token from GitHub in a secret js-file and gitignore-file.
 
-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 was challenging to target the specific info in the APIs and find the right filtering method and parameters to use. 
+If I had more time I would like to find a way to put the third API at the top calling it with a const name instead which did not work. 
+I would also like to fetch pullrequest and commit stats from the projects that were in teams instead of default messages.
+And connect the chart to the pullrequests length instead of the forked projects length. 
 
 ## 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.
diff --git a/code/chart.js b/code/chart.js
index 1972ffc8..c51ccc06 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -1,6 +1,10 @@
-//DOM-selector for the canvas 👇
+//DOM-selector for the canvas
 const ctx = document.getElementById('chart').getContext('2d')
 
+// the function that draws the chart of finished/remaining projects. 
+//It gets the value from line 60 in script.js where doughnuCounter and technigoRepos.length 
+// is passing the filtered repos length to the chart here
+
 const doughnutCounter = (projects) => {
     const labels = [
         'Finished projects',
@@ -10,6 +14,7 @@ const doughnutCounter = (projects) => {
       const data = {
         labels: labels,
         datasets: [{
+        //here is the calculation for remaining projects
           data: [projects, 19-projects],
           label: 'My finished projects',
           backgroundColor: ['rgb(217, 96, 152)', 'rgb(50, 82, 136)'],
diff --git a/code/index.html b/code/index.html
index fea7d5d4..d4ad3987 100644
--- a/code/index.html
+++ b/code/index.html
@@ -8,26 +8,25 @@
   <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=Nixie+One&family=Roboto:wght@300&display=swap"
-        rel="stylesheet">
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nixie+One&family=Roboto:wght@300&display=swap" rel="stylesheet">
+  
+  <!-- link to chart.js -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 </head>
 <body>
   <main class="projects" id="projects">
-  
   <div class ="user-container"></div>
-
   <div class="repo-container"></div>
 
   <!-- This will be used to draw the chart 👇 -->
   <div class="chart-container">
   <canvas class="chart" id="chart"></canvas>
-</div>
-</main> 
+  </div>
+  </main> 
 
-<!--this is for the GitHub secret token so it can fetch more than 60 times/h-->
+<!--this secret.js is the GitHub token so we can fetch more than 60 times/h-->
   <script src="./secret.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
diff --git a/code/script.js b/code/script.js
index 7dd6faf4..753b029e 100644
--- a/code/script.js
+++ b/code/script.js
@@ -4,7 +4,7 @@ const REPOS_URL =`https://api.github.com/users/${username}/repos`
 const repoContainer = document.querySelector('.repo-container')
 const userContainer = document.querySelector('.user-container')
 
-//Token from GitHub
+//The secret token from GitHub, we type the options const in the fetch to use it and not get 404 error
 const options = {
     method: 'GET',
     headers: {
@@ -12,7 +12,7 @@ const options = {
       }
   }
 
-// my user info from GitHub wrapped in clickable link to my GitHub page
+// my user info from GitHub wrapped in a clickable link to my GitHub page
 const userProfile = () => {
 	fetch(USER_URL, options)
 	.then((res) => res.json())
@@ -20,8 +20,7 @@ const userProfile = () => {
 	userContainer.innerHTML += `
 	<a href="${data.html_url}">
     <img class="profile-image" src="${data.avatar_url}"/>
-    <span class="profile-name">Github tracker for ${data.login}
-    </span>
+    <span class="profile-name">Github tracker for ${data.login}</span>
     </a>
 	`;
   });
@@ -29,25 +28,24 @@ const userProfile = () => {
 
 userProfile();
 
-//my repos in GitHub filtered on forks from Technigo
+//my repos in GitHub filtered on those that are forks from Technigo and our weekly projects
 const myRepos = () => {
 
     fetch(REPOS_URL, options)
     .then((response) => response.json())
     .then((data) => {
-    console.log(data)
+    // console.log(data)
 
     const forkedRepos = data.filter(repo => repo.fork)
     const technigoRepos = data.filter(repo => repo.name.startsWith('project'))
-    console.log(forkedRepos)    
-    console.log(technigoRepos)
+    // console.log(forkedRepos)    
+    // console.log(technigoRepos)
 
-    // gets info from the filtered repos arrays and displays them on my page
+    // this function gets info from the filtered repos arrays and displays them on my page
     // using repo.name as dynamic ID to also insert commits
 
     technigoRepos.forEach((repo) => {
         repoContainer.innerHTML += `
-
             <div class="repo-cards" id="${repo.name}">
                 <h3><a href="${repo.html_url}"><b>${repo.name}</b></a> 
                  (${repo.default_branch})</h3>
@@ -60,75 +58,60 @@ const myRepos = () => {
     //as an argument when calling the pull request function
     getPullRequests(technigoRepos)
 
-         //Passing the filtered repos length to the chart in the file chart.js
-         doughnutCounter(technigoRepos.length)
+    //Passing the filtered repos length to the chart in the file chart.js
+    doughnutCounter(technigoRepos.length)
 
 })
 }
 myRepos()
 
 const getPullRequests = (technigoRepos) => {
-    //this fetches all the pull requests for each filtered project
+    //this fetches all my pull requests for each filtered project. 
+    //because of the repo.name it did not work to use a const for it instead and placing it at the top. 
+
     technigoRepos.forEach(repo => {
-      fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options)
-      .then(res => res.json())
-      .then(data => {
-          console.log(data)
+    fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options)
+    .then(res => res.json())
+    .then(data => {
+        //   console.log(data)
               
-//this finds the pull requests I made by comparing the user.login from the pull API
-// with the owner.login in the filtered repo/data(?) API, and therefore we use pull in the
-// find array method because that is the name of the array?
+    //this finds the pull requests, PRs, I made by comparing the user.login from the pull API
+    // with the owner.login in the filtered repo API
 
-        const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
-        console.log(myPullRequests)
-        /*console.log(myPullRequests.html_url)*/
+    const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
+    // console.log(myPullRequests)
+    //console.log(myPullRequests.html_url)
        
 
-        // here the pull request link is printed or if no link a default message. In log it would say undefined. 
-        if (myPullRequests) {
-            document.getElementById(`${repo.name}`).innerHTML += 
-            `<a href="${myPullRequests.html_url}"> Pull request</a>`
-        } else {
-            document.getElementById(`${repo.name}`).innerHTML += 
-            `<p> Pull request made by teammate</p>`
-        }
-
-        //here is a first step to get the commits for each pull request, and we add the dynamic id to pass on
-        // or default message that teammate did the commits
-        if (myPullRequests) {
-            getCommits(myPullRequests.commits_url, repo.name) 
-
-        } else {
-            document.getElementById(`${repo.name}`).innerHTML += 
-            `<p> Commits made by teammate</p>`
-        }
-      
-          })   
-
-  
-       
+    // here the PR link is printed or if no link a default message since in console it would say undefined. 
+    if (myPullRequests) {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<a href="${myPullRequests.html_url}"> Pull request</a>`
+    } else {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<p> Pull request made by teammate</p>`
+    }
+
+    //here is a first step to get the commits for each PR, and we add the dynamic id to pass on
+    // or default message that teammate did the commits
+    if (myPullRequests) {
+        getCommits(myPullRequests.commits_url, repo.name) 
 
-          // To get the commits from a PR we get the URL from the commits_url property in the PR json object 
+    } else {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<p> Commits made by teammate</p>`
+    }  
+    })   
+
+// To get the commits from a PR we get the URL from the commits_url property in the PR json object 
 // and then do a fetch with that url.
 const getCommits = (URL, repoName) => {
     fetch (URL, options)
     .then((res) => res.json())
     .then(data => {
         document.getElementById(`${repo.name}`).innerHTML += `<p>Number of commits: ${data.length}</p>`
-        console.log(data.length)
+        // console.log(data.length)
     })
     }
     })
-    }
-
-/*
-step 1 worked: 
-const username = 'Kras053'
-const API_URL =`https://api.github.com/users/${username}/repos`
-
-fetch(API_URL)
-.then((response) => response.json())
-.then((data) => {
-    console.log('data', data)
-})
-*/
\ No newline at end of file
+    }
\ No newline at end of file
diff --git a/code/style.css b/code/style.css
index e77a2b39..d814721a 100644
--- a/code/style.css
+++ b/code/style.css
@@ -16,11 +16,11 @@ body {
 .user-container img {
   width: 250px;
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: 1, 1fr;
   justify-items: center;
   place-items: center;
   margin: 15px;
-  border-style:inset;
+  border-style: inset;
   border-width: 4px;
   border-color:rgb(50, 82, 136);
 }
@@ -30,7 +30,7 @@ body {
   color:black;
   text-decoration: none;
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: 1, 1fr;
   justify-items: center;
   place-items: center;
   margin-bottom: 35px;
@@ -38,12 +38,11 @@ body {
 
 .repo-container {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: 1, 1fr;
   justify-items: center;
   place-items: center;
   grid-gap: 40px;
   margin-bottom: 55px;
-
 }
 
 .repo-container a {
@@ -52,14 +51,14 @@ color:rgb(36, 161, 156);
 }
 
 .chart {
- max-width: 350px; 
- max-height: 350px; 
+max-width: 350px; 
+max-height: 350px; 
 }
 
 .chart-container {
-  display: grid;
-  place-items: center;
-  margin-top: 25px;
+display: grid;
+place-items: center;
+margin-top: 25px;
 }
 
 @media (min-width: 668px) {

From 459eef1a8ef7ee8ed804af190116047fb888d3d1 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sun, 27 Feb 2022 12:51:03 +0100
Subject: [PATCH 11/14] deployed

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4665bebb..5e4bc118 100644
--- a/README.md
+++ b/README.md
@@ -23,4 +23,4 @@ I would also like to fetch pullrequest and commit stats from the projects that w
 And connect the chart to the pullrequests length instead of the forked projects length. 
 
 ## View it live
-
+https://github-tracker-lo.netlify.app/

From e50a229cf5d3cdbdd277bba11a3e014b3a73f086 Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Sun, 6 Mar 2022 09:32:21 +0100
Subject: [PATCH 12/14] removed two of the desktop hover effects on the
 user-container

---
 code/style.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/code/style.css b/code/style.css
index d814721a..194e3eb5 100644
--- a/code/style.css
+++ b/code/style.css
@@ -74,10 +74,6 @@ place-items: center;
  grid-template-columns: repeat(3, 1fr); 
 }  
 
-.user-container a:hover {
-  background-color: black;
-  color: rgb(217, 96, 152);
-} 
 .user-container img:hover {
   border-color:rgb(217, 96, 152);  
 } 

From 6a3b464ba08bcfa72e6ba69114fc10e43cf9bc0b Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Fri, 3 Jun 2022 08:20:08 +0200
Subject: [PATCH 13/14] test to update GitHub token, changed margin
 user-container

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

diff --git a/code/style.css b/code/style.css
index 194e3eb5..887775cf 100644
--- a/code/style.css
+++ b/code/style.css
@@ -19,7 +19,7 @@ body {
   grid-template-columns: 1, 1fr;
   justify-items: center;
   place-items: center;
-  margin: 15px;
+  margin: 10px;
   border-style: inset;
   border-width: 4px;
   border-color:rgb(50, 82, 136);

From bbbfa5a01c6ad2645371937d6b4fb9c714745bae Mon Sep 17 00:00:00 2001
From: Louisa <lundislon@gmail.com>
Date: Fri, 3 Jun 2022 08:20:56 +0200
Subject: [PATCH 14/14] changed user-container margin back

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

diff --git a/code/style.css b/code/style.css
index 887775cf..194e3eb5 100644
--- a/code/style.css
+++ b/code/style.css
@@ -19,7 +19,7 @@ body {
   grid-template-columns: 1, 1fr;
   justify-items: center;
   place-items: center;
-  margin: 10px;
+  margin: 15px;
   border-style: inset;
   border-width: 4px;
   border-color:rgb(50, 82, 136);