Showing
2 changed files
with
39 additions
and
37 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,7 +51,7 @@ block content | ... | @@ -51,7 +51,7 @@ 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") |
... | @@ -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 | - | ||
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 | - | ||
87 | 67 | ||
88 | - //- .user-status__character | ||
89 | - //- h3 YOUR STATUS: | ||
90 | 68 | ||
91 | 69 | ||
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 | 70 | ||
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