Update getContribution and UserRepoitories in frontend

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}\\src\\client\\js\\getUserRepo.js"
+        }
+    ]
+}
\ No newline at end of file

 const userContributionsBox = document.querySelector(".user-status__contributions");
 const totalContributionIndicator = document.getElementById("jsTotalContributions");
+const URL = "https://api.github.com/graphql"
 
 
+// const handleImage = () =>{
+//     const total = totalContributionIndicator.innerText;
+//     console.log(total);
+// };
 
-const handleImage = () =>{
-    const total = totalContributionIndicator.innerText;
-    console.log(total);
+const handleContributons = (total) =>{
+    totalContributionIndicator.appendChild(total);
 };
 
-
 const getGithubRepo = () =>{
-    console.log("Get Api here");
+    const token = process.env.GH_SECRET_SH;
+    const username = user.username
+    const headers = {
+        'Authorization': `bearer ${token}`,
+    };
+    const body = {
+      "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`
+    };
+    const response = fetch(URL, { method: "POST", body: JSON.stringify(body), headers: headers }).then(function(response){
+        return response.json();
+    }).then(function(res){
+        const total = res.data.user.contributionsCollection.contributionCalendar.totalContributions;
+        handleContributons(total);
+    });
 };
 
 const init=()=>{

+const RepoBox = document.getElementById("jsgetRepo");
+const userRepoBox = document.getElementById("jsuserRepo");
+const indicator = document.getElementById("jsIndicator");
+const URL = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
+
+
+
+const handleRepo = (list) =>{
+    list.forEach(element => {
+        console.log(element.name);
+        console.log(element.url);
+        const anchor = document.createElement("a");
+        anchor.href = element.url;
+        anchor.target = "_blank"
+        anchor.innerHTML = `<span class="repoName">${element.name}</span> : <span class="repoUrl">${element.url}</span>`
+        userRepoBox.appendChild(anchor);
+    });
+    indicator.style.display = "none";
+};
+
+
+const getRepos = () =>{
+    const response = fetch(URL).then(function(response){
+        return response.json();
+    }).then(function(data){
+        const userRepoList = data;
+        handleRepo(userRepoList);
+    });
+};
+
+const init=()=>{
+    getRepos();
+};
+
+if(RepoBox){
+    init();
+};
\ No newline at end of file

@@ -28,18 +28,11 @@ export const getUserDetail = async (req, res) => {
     const id = req.params.id;
     const quote = await getQuote();
     const user = await User.findById(id);
-    const repo = await getRepos();
-    const totalCon = await getContributions(user.githubName);
     res.render("userDetail", {
       pagetTitle: "User Detail",
       quote: quote.quote,
       author: quote.author,
       user,
-      fitstRepoName: repo.fitstRepoName,
-      firstRepoUrl: repo.firstRepoUrl,
-      secondRepoName: repo.secondRepoName,
-      secondRepoUrl: repo.secondRepoUrl,
-      totalContributions: totalCon,
     });
   } catch(error){
     console.log(error);
@@ -154,36 +147,4 @@ export const postGithubLogin = (req, res) => {
 export const logout = (req, res) => {
   req.logout();
   res.redirect("/");
-};
-
-const getRepos = async() =>{
-  const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
-  const latelyRepos = await axios.get(url).then(function(response){
-      return response.data;
-  });
-  const fitstRepoName = latelyRepos[0].name;
-  const secondRepoName = latelyRepos[1].name;
-  const firstRepoUrl = latelyRepos[0].html_url;
-  const secondRepoUrl = latelyRepos[1].html_url;
-
-  return {
-    fitstRepoName,
-    firstRepoUrl,
-    secondRepoName,
-    secondRepoUrl,
-  };
-};
-
-const getContributions = async(username) =>{
-  const token = process.env.GH_SECRET_SH;
-  const headers = {
-      'Authorization': `bearer ${token}`,
-  };
-  const body = {
-    "query": `query {user(login: "${username}") {contributionsCollection {contributionCalendar {totalContributions}}}}`
-  };
-  const response = await fetch('https://api.github.com/graphql', { method: "POST", body: JSON.stringify(body), headers: headers });
-  const totalContributions = await response.json();
-  const total = totalContributions.data.user.contributionsCollection.contributionCalendar.totalContributions;
-  return total;
 };
\ No newline at end of file

@@ -37,19 +37,16 @@ block content
     hr
     .user-status
         .user-status__contributions
-            span#jsTotalContributions=totalContributions
+            span#jsTotalContributions
             img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
         .user-status__character
             h3 Your step
             img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;")
-    .user-repositories
-        .user-repo
-            a(href=firstRepoUrl)
-                h3 REPO 1
-                p=fitstRepoName
-            br
-            a(href=secondRepoUrl)
-                h3 REPO 2
-                p=secondRepoName
-block scripts 
-    script(src="/static/js/githubInfo.js") 
+    .user-repositories#jsgetRepo
+        h3 REPOSITORIES 
+        .about-userRepo#jsuserRepo
+            span#jsIndicator Waiting...
+
+block scripts
+    script(src="/static/js/getUserRepo.js")
+    script(src="/static/js/getContribution.js")
\ No newline at end of file