Get userDetail data by using githubApi from frontend

 const userContributionsBox = document.querySelector(".user-status__contributions");
 const userContributionsBox = document.querySelector(".user-status__contributions");
 const totalContributionIndicator = document.getElementById("jsTotalContributions");
 const totalContributionIndicator = document.getElementById("jsTotalContributions");
-
+const userCharacterBox = document.querySelector(".user-status__character");
+const userRepoBox = document.querySelector(".user-repo");
+const URL = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
 
 
 
 
 const handleImage = () =>{
 const handleImage = () =>{
     const total = totalContributionIndicator.innerText;
     const total = totalContributionIndicator.innerText;
-    console.log(total);
+    const img = new Image();
+    if (total>=0 && total<200){
+        img.src ="https://oss-2020105657.s3.amazonaws.com/first.png";
+        img.alt = "1단계";
+    }else if (total>=200 && total<600){
+        img.src ="https://oss-2020105657.s3.amazonaws.com/second.png";
+        img.alt = "2단계";
+    }else if (total>=600 && total<1200){
+        img.src = "https://oss-2020105657.s3.amazonaws.com/third.png";
+        img.alt = "3단계";
+    }else if (total>=1200 && total<2000){
+        img.src = "https://oss-2020105657.s3.amazonaws.com/four.png";
+        img.alt = "4단계";
+    }else{
+        img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png";
+        img.alt = "5단계";
+    }
+    userCharacterBox.appendChild(img);
 };
 };
 
 
+const handleRepo = (list) =>{
+    list.forEach(element => {
+        const anchor = document.createElement("a");
+        anchor.href = element.html_url;
+        anchor.target = "_blank"
+        anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>`
+        userRepoBox.appendChild(anchor);
+    });
+    
+};
 
 
 const getGithubRepo = () =>{
 const getGithubRepo = () =>{
-    console.log("Get Api here");
+    const response = fetch(URL).then(function(response){
+        return response.json();
+    }).then(function(data){
+        const trendRepoList = data.slice(0,2);
+        handleRepo(trendRepoList);
+    });
 };
 };
 
 
 const init=()=>{
 const init=()=>{

@@ -46,15 +46,8 @@ block content
             img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
             img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
         .user-status__character
         .user-status__character
             h3 Your step
             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-repositories
         .user-repo
         .user-repo
-            a(href=firstRepoUrl)
-                h3 REPO 1
-                p=fitstRepoName
-            br
-            a(href=secondRepoUrl)
-                h3 REPO 2
-                p=secondRepoName
+            h3 Repositories
 block scripts 
 block scripts 
     script(src="/static/js/githubInfo.js") 
     script(src="/static/js/githubInfo.js")