added media queries and updated readme

Author: NinaAlejandra

README.md

@@ -14,4 +14,4 @@ I've also learned how to do shading in css which was cool. Hopefully my javascri
 
 ## 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://githubtracker-ninaalejandra.netlify.app/

code/script.js

@@ -17,12 +17,11 @@ const getUser = () => {
         profileInfo.innerHTML = 
             `<img src="https://github.com/NinaAlejandra.png" alt="Profile picture">
             <h4> ${data.name}</h4>
-            <h4> <a href="${data.html_url}">${data.login}</a></h4>`
-            
-      })
+            <h4> <a href="${data.html_url}">${data.login}</a></h4>`  
+    })
 }
 
-  //Fetch
+  //Fetches
 const getRepos = () => {
     fetch(REPOS_URL)
     .then(response => response.json())
@@ -31,13 +30,13 @@ const getRepos = () => {
         const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
         const forkedSortedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow)
         forkedSortedRepos.forEach(repo => list.innerHTML += `
-                    <div class="projects">
-                    <h3><a href="${repo.html_url}">${repo.name} 
-                    with default branch ${repo.default_branch}</h3></a>
-                    <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
-                    <p id="pull-request-${repo.name}"></p>
-                    <p id="commits-${repo.name}"></p>
-                    </div>` )
+                <div class="projects">
+                 <h3><a href="${repo.html_url}">${repo.name} 
+                 with default branch ${repo.default_branch}</h3></a>
+                 <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+                 <p id="pull-request-${repo.name}"></p>
+                 <p id="commits-${repo.name}"></p>
+                </div>`)
         drawChart(forkedSortedRepos.length)
         fetchPullRequest(forkedSortedRepos)
         addCommits(forkedSortedRepos)
@@ -56,8 +55,6 @@ const fetchPullRequest = (allRepos) => {
     })
 }
 
-
-
 const addCommits = (allRepos) => {
     allRepos.forEach(repo => {
         fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`)
@@ -70,8 +67,9 @@ const addCommits = (allRepos) => {
 }
 
 function sortingFunctionFromStackOverflow(a, b) {
-    // https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property
     return new Date(a.created_at) - new Date(b.created_at)
 }
+
+//invoking functions
 getUser()
 getRepos()

code/style.css

@@ -2,10 +2,10 @@ body {
   background: #F7D4BC;
   font-family: 'Gemunu Libre', sans-serif;
 }
-header {
-text-align: center;
 
-font-size: 30px;
+header {
+  text-align: center;
+  font-size: 30px;
 }
 
 .profile {
@@ -16,9 +16,7 @@ font-size: 30px;
   color: #218380;
   margin:auto;
   width: 100%;
-  flex-direction: column;
-
-  
+  flex-direction: column;  
 }
 
 img {
@@ -58,4 +56,25 @@ h4 {
 a {
   font-size: 18px;
   color: #218380;
-}
+}
+
+@media (min-width: 668px){
+  main {
+    
+    text-align: center;
+    flex-direction: row;
+  }
+  
+  .projects {
+    display: inline-block;
+    text-align: center; 
+    padding: 5px;
+    width: 33%;
+    height: 50%;
+  }
+  
+  .chart-class {
+    width: 40%;
+    margin-top: 20px;
+  }
+}