Showing
2 changed files
with
40 additions
and
38 deletions
| 1 | const userContributionsBox = document.querySelector(".user-status__contributions"); | 1 | const userContributionsBox = document.querySelector(".user-status__contributions"); |
| 2 | const totalContributionIndicator = document.getElementById("jsTotalContributions"); | 2 | const totalContributionIndicator = document.getElementById("jsTotalContributions"); |
| 3 | - | 3 | +const userCharacterBox = document.querySelector(".user-status__character"); |
| 4 | +const userRepoBox = document.querySelector(".user-repo"); | ||
| 5 | +const URL = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2"; | ||
| 4 | 6 | ||
| 5 | 7 | ||
| 6 | const handleImage = () =>{ | 8 | const handleImage = () =>{ |
| 7 | const total = totalContributionIndicator.innerText; | 9 | const total = totalContributionIndicator.innerText; |
| 8 | - console.log(total); | 10 | + const img = new Image(); |
| 11 | + if (total>=0 && total<200){ | ||
| 12 | + img.src ="https://oss-2020105657.s3.amazonaws.com/first.png"; | ||
| 13 | + img.alt = "1단계"; | ||
| 14 | + }else if (total>=200 && total<600){ | ||
| 15 | + img.src ="https://oss-2020105657.s3.amazonaws.com/second.png"; | ||
| 16 | + img.alt = "2단계"; | ||
| 17 | + }else if (total>=600 && total<1200){ | ||
| 18 | + img.src = "https://oss-2020105657.s3.amazonaws.com/third.png"; | ||
| 19 | + img.alt = "3단계"; | ||
| 20 | + }else if (total>=1200 && total<2000){ | ||
| 21 | + img.src = "https://oss-2020105657.s3.amazonaws.com/four.png"; | ||
| 22 | + img.alt = "4단계"; | ||
| 23 | + }else{ | ||
| 24 | + img.src = "https://oss-2020105657.s3.amazonaws.com/fifth.png"; | ||
| 25 | + img.alt = "5단계"; | ||
| 26 | + } | ||
| 27 | + userCharacterBox.appendChild(img); | ||
| 9 | }; | 28 | }; |
| 10 | 29 | ||
| 30 | +const handleRepo = (list) =>{ | ||
| 31 | + list.forEach(element => { | ||
| 32 | + const anchor = document.createElement("a"); | ||
| 33 | + anchor.href = element.html_url; | ||
| 34 | + anchor.target = "_blank" | ||
| 35 | + anchor.innerHTML = `<div class =number><span class="repoName">${element.name}</span> : <span class="repoUrl">${element.html_url} </span></div>` | ||
| 36 | + userRepoBox.appendChild(anchor); | ||
| 37 | + }); | ||
| 38 | + | ||
| 39 | +}; | ||
| 11 | 40 | ||
| 12 | const getGithubRepo = () =>{ | 41 | const getGithubRepo = () =>{ |
| 13 | - console.log("Get Api here"); | 42 | + const response = fetch(URL).then(function(response){ |
| 43 | + return response.json(); | ||
| 44 | + }).then(function(data){ | ||
| 45 | + const trendRepoList = data.slice(0,2); | ||
| 46 | + handleRepo(trendRepoList); | ||
| 47 | + }); | ||
| 14 | }; | 48 | }; |
| 15 | 49 | ||
| 16 | const init=()=>{ | 50 | const init=()=>{ | ... | ... |
| ... | @@ -51,9 +51,9 @@ block content | ... | @@ -51,9 +51,9 @@ block content |
| 51 | .user-status | 51 | .user-status |
| 52 | .user-status__contributions | 52 | .user-status__contributions |
| 53 | h3 YOU'VE MADE | 53 | h3 YOU'VE MADE |
| 54 | - span #{totalContributions} | 54 | + span#jsTotalContributions=totalContributions |
| 55 | h3 CONTRIBUTIONS! | 55 | h3 CONTRIBUTIONS! |
| 56 | - | 56 | + |
| 57 | img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") | 57 | img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") |
| 58 | 58 | ||
| 59 | 59 | ||
| ... | @@ -62,43 +62,11 @@ block content | ... | @@ -62,43 +62,11 @@ block content |
| 62 | 62 | ||
| 63 | 63 | ||
| 64 | .user-repositories | 64 | .user-repositories |
| 65 | - h3 Your recent updated repositories | ||
| 66 | .user-repo | 65 | .user-repo |
| 67 | - a(href=firstRepoUrl) | 66 | + h3 Your recent updated repositories: |
| 68 | - h3 REPO 1 | ||
| 69 | - p=fitstRepoName | ||
| 70 | - br | ||
| 71 | - a(href=secondRepoUrl) | ||
| 72 | - h3 REPO 2 | ||
| 73 | - p=secondRepoName | ||
| 74 | - | ||
| 75 | - | ||
| 76 | 67 | ||
| 77 | - | ||
| 78 | - | ||
| 79 | - //- .user-status | ||
| 80 | - //- .user-status__contributions | ||
| 81 | - //- h3 YOU'VE MADE | ||
| 82 | - //- span #{totalContributions} | ||
| 83 | - //- h3 CONTRIBUTIONS! | ||
| 84 | - | ||
| 85 | - //- img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart") | ||
| 86 | 68 | ||
| 87 | - | ||
| 88 | - //- .user-status__character | ||
| 89 | - //- h3 YOUR STATUS: | ||
| 90 | 69 | ||
| 91 | 70 | ||
| 92 | - //- .user-repositories | ||
| 93 | - //- h3 Your recent updated repositories | ||
| 94 | - //- .user-repo | ||
| 95 | - //- a(href=firstRepoUrl) | ||
| 96 | - //- h3 REPO 1 | ||
| 97 | - //- p=fitstRepoName | ||
| 98 | - //- br | ||
| 99 | - //- a(href=secondRepoUrl) | ||
| 100 | - //- h3 REPO 2 | ||
| 101 | - //- p=secondRepoName | ||
| 102 | - | ||
| 103 | block scripts | 71 | block scripts |
| 104 | script(src="/static/js/githubInfo.js") | 72 | script(src="/static/js/githubInfo.js") | ... | ... |
-
Please register or login to post a comment