diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..5008ddfc
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 1613a3b0..1136af54 100644
--- 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.
-
+The aim of this project was to build a GitHUb tracker of my projects submitted thus far to Technigop, using fetch and API technologies from the GitHub database
## 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 approached the problem in 2 main steps: first extracting data from a -filtered-API fetch of all of my forked projects from Technigo. I was then able to hard-code a card to present this data. I secondly then performed another fetch to extract the pull-requests from the Technigo repositories, to FIND all of my commit message for each submitted project. I then used dynamic-ids to input this data into my pre-coded index-card. Using Chart.js, I compiled a doughnut chart to illustrate the percentage of projects completed thus far. I have fulfilled all blue requirements, if I had more time I would like to show the last commit message and maybe a few comments.
+
## 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://kara-howes-tracker.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
new file mode 100644
index 00000000..c1af13a2
Binary files /dev/null and b/code/.DS_Store differ
diff --git a/code/assets/GitHub-Mark-120px-plus.png b/code/assets/GitHub-Mark-120px-plus.png
new file mode 100644
index 00000000..ea6ff545
Binary files /dev/null and b/code/assets/GitHub-Mark-120px-plus.png differ
diff --git a/code/assets/GitHub-Mark-32px.png b/code/assets/GitHub-Mark-32px.png
new file mode 100644
index 00000000..8b25551a
Binary files /dev/null and b/code/assets/GitHub-Mark-32px.png differ
diff --git a/code/assets/GitHub-Mark-64px.png b/code/assets/GitHub-Mark-64px.png
new file mode 100644
index 00000000..182a1a3f
Binary files /dev/null and b/code/assets/GitHub-Mark-64px.png differ
diff --git a/code/assets/GitHub_Logo.png b/code/assets/GitHub_Logo.png
new file mode 100644
index 00000000..e03d8dd8
Binary files /dev/null and b/code/assets/GitHub_Logo.png differ
diff --git a/code/assets/GitHub_Logo_White.png b/code/assets/GitHub_Logo_White.png
new file mode 100644
index 00000000..9181e6e5
Binary files /dev/null and b/code/assets/GitHub_Logo_White.png differ
diff --git a/code/assets/KH_profile.jpeg b/code/assets/KH_profile.jpeg
new file mode 100644
index 00000000..c3da4e70
Binary files /dev/null and b/code/assets/KH_profile.jpeg differ
diff --git a/code/chart.js b/code/chart.js
index 92e85a30..f275d13e 100644
--- a/code/chart.js
+++ b/code/chart.js
@@ -2,3 +2,30 @@
const ctx = document.getElementById('chart').getContext('2d')
//"Draw" the chart here 👇
+
+const drawChart = (amount) =>{
+ const config = {
+ type: 'doughnut',
+ data: {
+ labels: [
+ 'Completed Projects',
+ 'Remaining Projects',
+ ],
+ datasets: [{
+ label: 'My First Dataset',
+ data: [amount , 20-amount],
+ backgroundColor: [
+ 'rgb(255, 192, 203)',
+ 'rgb(135,190,231)'
+
+ ],
+ hoverOffset: 4
+ }]
+ },
+
+ };
+ const myChart = new Chart(ctx, config)
+}
+
+
+
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index 2fb5e0ae..1b1cd89d 100644
--- a/code/index.html
+++ b/code/index.html
@@ -4,16 +4,46 @@
- Project GitHub Tracker
+ Project GitHub Tracker- Kara Howes
+
+
+
-
GitHub Tracker
-
Projects:
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
diff --git a/code/script.js b/code/script.js
index e69de29b..d37b75f6 100644
--- a/code/script.js
+++ b/code/script.js
@@ -0,0 +1,109 @@
+const USER = 'KaraHowes'
+const USER_URL = `https://api.github.com/users/${USER}`
+const repoURL = `https://api.github.com/users/${USER}/repos`
+const profileContainer = document.getElementById('profile-container')
+const cardsContainer = document.getElementById('cards-container')
+
+const userProfile = () => {
+ // This function fetches User data from the API to update the user name, avator, location of User
+ fetch (USER_URL)
+ .then (response => response.json())
+ .then (data => {
+ // This injects the fetched data into the profileContainer innerHTML
+ profileContainer.innerHTML += `
+
+
+
+
+
+
+
+
Name:${data.login}
+
AKA:${data.name}
+
Location:${data.location}, CH
+
+
+
+
${data.bio}
+
+
+ `;
+ })
+}
+//This invokes the userProfile function
+userProfile()
+
+const getRepos = ()=>{
+ // This function fetches the data from the Github API
+ fetch(repoURL)
+ .then(response => response.json())
+ .then(data => {
+
+
+ //Here, I filter only the projects forked from Technigo, starting from 2021 (since I have earlier projects also forked from Technigo)
+ const forkedProjects = data.filter(repo => repo.fork && repo.name.startsWith('project-') && repo.created_at.startsWith('2021-'))
+
+ // Here I update the cards.Container to show cards with data extracted from the GitHUb API
+ //ForEach function ensures I perform this function for each card
+ forkedProjects.forEach(repo => cardsContainer.innerHTML += `
+
+
+ Project Name:${repo.name}
+
+ Most recent update: ${new Date(repo.pushed_at).toDateString()}
+
+
+ 
+ 
+ 
+ 
+ 
+