├── README.md
├── img
    ├── favicon.ico
    ├── gitRepos.png
    ├── giterro.jpg
    ├── githome.jpg
    └── gitlogo.PNG
├── srcs
    ├── Models
    │   ├── Repository.js
    │   └── user.js
    ├── Views
    │   ├── ReposView.js
    │   └── UserView.js
    └── Controller
    │   ├── ControllerAux.js
    │   ├── ReposController.js
    │   └── UserController.js
├── css
    ├── reset.css
    └── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # GitFinder
2 | Projeto utilizando API do GitHub
3 | 


--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaaatiMachado/GitFinder/HEAD/img/favicon.ico


--------------------------------------------------------------------------------
/img/gitRepos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaaatiMachado/GitFinder/HEAD/img/gitRepos.png


--------------------------------------------------------------------------------
/img/giterro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaaatiMachado/GitFinder/HEAD/img/giterro.jpg


--------------------------------------------------------------------------------
/img/githome.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaaatiMachado/GitFinder/HEAD/img/githome.jpg


--------------------------------------------------------------------------------
/img/gitlogo.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaaatiMachado/GitFinder/HEAD/img/gitlogo.PNG


--------------------------------------------------------------------------------
/srcs/Models/Repository.js:
--------------------------------------------------------------------------------
 1 | class Repository {
 2 |     constructor(name, url){
 3 |         this._name = name;
 4 |         this._url = url;
 5 |     }
 6 | 
 7 |     getRepos() {
 8 |         return {
 9 |             name: this._name,
10 |             url: this._url
11 |         };
12 |     }
13 | }


--------------------------------------------------------------------------------
/srcs/Views/ReposView.js:
--------------------------------------------------------------------------------
 1 | class ReposView {
 2 | 
 3 |     static template(repos) {
 4 |         return `<div id="respositories">
 5 |                     <a href="${repos.url}">
 6 |                     <img src="img/gitRepos.png" id="reposImg">
 7 |                     </a>
 8 |                     <p id="reposName">Repository:<br> ${repos.name}</p>      
 9 |                 </div>`;
10 |     }
11 | 
12 | }


--------------------------------------------------------------------------------
/srcs/Controller/ControllerAux.js:
--------------------------------------------------------------------------------
 1 | let buttonSearch = document.querySelector("#userSearch");
 2 | let inputSearch = document.querySelector("#userForm");
 3 | let reposSearch = document.querySelector("#userRepos")
 4 | 
 5 | buttonSearch.addEventListener ("click", () => {
 6 |     let userURL = `https://api.github.com/users/${inputSearch.value}`
 7 |     let reposURL = `https://api.github.com/users/${inputSearch.value}/repos`;
 8 |     
 9 |     UserController.getUser(userURL);
10 |     ReposController.getRepos(reposURL);
11 |     inputSearch.value = "";
12 |     inputSearch.focus();
13 | })
14 | 
15 | 


--------------------------------------------------------------------------------
/srcs/Views/UserView.js:
--------------------------------------------------------------------------------
 1 | class UserView {
 2 | 
 3 |     static template(user) {
 4 |         return `<div id="profile">
 5 |                     <a href="https://github.com/${inputSearch.value}">
 6 |                     <img id="imgProfile" src="${user.avatar}"> </a>
 7 |                     <div>
 8 |                     <p> Login: ${user.login}</p>
 9 |                     <p> Name: ${user.name}</p>
10 |                     <p> Local: ${user.local}</p>
11 |                     <p> Followers: ${user.followers}</p>
12 |                     <p> Following: ${user.following}</p>
13 |                     </div>
14 |                 </div>
15 | 
16 |                `;
17 |     }
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/srcs/Models/user.js:
--------------------------------------------------------------------------------
 1 | 
 2 | class User {
 3 | 
 4 |     constructor(avatar, login, name, local, followers, following) {
 5 |         this._avatar = avatar;
 6 |         this._login = login;
 7 |         this._name = name;
 8 |         this._local = local;
 9 |         this._followers = followers;
10 |         this._following = following;
11 |     }
12 | 
13 |     //programação defensiva: retorna uma cópia do User
14 |     returnUser() {
15 |         return {
16 |             avatar: this._avatar,
17 |             login: this._login,
18 |             name: this._name,
19 |             local: this._local,
20 |             followers: this._followers,
21 |             following: this._following
22 |         };
23 |     }
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/srcs/Controller/ReposController.js:
--------------------------------------------------------------------------------
 1 | class ReposController {
 2 |     constructor() {throw new Error("Você não pode fazer isso!") }
 3 |     
 4 |     static getRepos(url) {
 5 |         let reposDiv = document.querySelector("#userRepos");
 6 |         reposDiv.innerHTML = "";
 7 |         
 8 |         let reposReq = new XMLHttpRequest();
 9 |         
10 |         reposReq.open("GET",url);
11 | 
12 |         reposReq.addEventListener("load", ()=> {
13 | 
14 |             if(reposReq.status == 200){
15 |                 
16 |                 let reposObj = JSON.parse(reposReq.responseText);
17 | 
18 |                 for(let i=0; i < reposObj.length; i++){
19 |                     let reposApi = new Repository(reposObj[i].name, reposObj[i].html_url);
20 |                     reposDiv.innerHTML += ReposView.template(reposApi.getRepos());
21 |                 }
22 |             }
23 |         })
24 | 
25 |         reposReq.send();
26 |     }
27 | }


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }


--------------------------------------------------------------------------------
/srcs/Controller/UserController.js:
--------------------------------------------------------------------------------
 1 | class UserController {
 2 |     constructor() {throw new Error("Você não pode fazer isso!") }
 3 | 
 4 |     static getUser(url) {
 5 |         let divUser = document.getElementById("content");        
 6 |         let userRequest = new XMLHttpRequest(); 
 7 |         userRequest.open("GET", url);
 8 | 
 9 |         userRequest.addEventListener ("load", () => {
10 |             
11 |             if (userRequest.status == 200) {
12 |                        
13 |             let userObj = JSON.parse(userRequest.responseText);
14 |             
15 |             //criando o usuário do controller
16 |             let gitUser = new User( userObj.avatar_url, 
17 |                                     userObj.login, 
18 |                                     userObj.name, 
19 |                                     userObj.location, 
20 |                                     userObj.followers, 
21 |                                     userObj.following
22 |                                     );
23 |                                 
24 |             divUser.innerHTML = UserView.template(gitUser.returnUser()); 
25 |                                         
26 |         } else {
27 |             divUser.innerHTML = `<div id="content" class="divContent">
28 |                                  <img class="imgFundo" src="img/giterro.jpg">
29 |                                  </div>`
30 |         }
31 | 
32 |                         
33 |     });
34 | 
35 |     userRequest.send();  
36 | }
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
 7 |     <link rel="stylesheet" href="css/reset.css">
 8 |     <link rel="stylesheet" href="css/style.css">
 9 |     <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet"> 
10 |     <title>• GIT Finder •</title>
11 |     
12 | </head>
13 | <body>
14 |     <header>
15 |         <a href="index.html">
16 |             <div class="logo">
17 |                 <img src="img/gitlogo.PNG">
18 |                 <h1>GIT Finder</h1>
19 |                 </div>
20 |         </a>
21 | 
22 |         <div class="search">
23 |             <input  id="userForm"type="text" placeholder="  Insira o usuário">
24 |             <button id="userSearch">Procurar</button>
25 |         </div>
26 | 
27 |     </header>
28 |     
29 |     <div id="content" class="divContent">
30 |         <img class="imgFundo" src="img/githome.jpg">
31 |     </div>
32 | 
33 |     <div id="userRepos" >
34 | 
35 |     </div>
36 |     
37 | </body>
38 | 
39 | 
40 | 
41 | <script src="srcs/Models/user.js"></script>
42 | <script src="srcs/Models/Repository.js"></script>
43 | <script src="srcs/Controller/UserController.js"></script>
44 | <script src="srcs/Controller/ReposController.js"></script>
45 | <script src="srcs/Views/UserView.js"></script>
46 | <script src="srcs/Views/ReposView.js"></script>
47 | <script src="srcs/Controller/ControllerAux.js"></script>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     background-color: rgba(255, 255, 255, 0.712);
  3 | }
  4 | header {
  5 |     background-color: #24292e;
  6 |     padding: 10px;
  7 |     display: flex;
  8 |     align-items: center;
  9 |     justify-content: space-between;
 10 |     padding-left: 35px;
 11 |     padding-right: 35px;
 12 | 
 13 | }
 14 | 
 15 | .logo{
 16 |     display: flex;
 17 |     align-items: center;
 18 |     
 19 | 
 20 | }
 21 | 
 22 | header img  {
 23 |     width: 115px;
 24 |     opacity: 90%;
 25 |     cursor: pointer;
 26 |     display: inline-block;
 27 |     
 28 | }
 29 | h1{
 30 |     font-family: 'Poiret One', cursive;
 31 |     font-size: 35px;
 32 |     text-align: center;
 33 |     background-color: #24292e;
 34 |     color: rgba(255, 255, 255, 0.712);
 35 |     cursor: pointer;
 36 | 
 37 | }
 38 | 
 39 | .search {
 40 |     display: flex;
 41 |     align-items: flex-end;
 42 |         
 43 | }
 44 | 
 45 | input {
 46 |     height: 25px;
 47 |     margin-right: 8px;
 48 |     border-radius: 15px;
 49 |     width: 275px;
 50 | }
 51 | 
 52 | button {
 53 |     height: 30px;
 54 |     border-radius: 15px;
 55 |     background-color: #24292e;
 56 |     color: rgba(255, 255, 255, 0.712);
 57 |     width: 125px;
 58 | 
 59 | }
 60 | 
 61 | button:hover{
 62 |     color: #24292e;
 63 |     background-color: rgba(255, 255, 255, 0.712);
 64 |     cursor: pointer;
 65 | }
 66 | 
 67 | .divContent {
 68 |     display: flex;
 69 |     justify-content: center; 
 70 |     width: 100%;
 71 |     
 72 | }
 73 | .divContent img{
 74 |     
 75 |     width: 550px;
 76 |     opacity: 100%;
 77 |     padding: 80px;
 78 | 
 79 | }
 80 | 
 81 | 
 82 | #profile {
 83 |     width: 100%;
 84 |     display: flex;
 85 |     justify-content: space-evenly;
 86 |     align-items: center;
 87 |     font-size: 20px;
 88 |     color: #24292e;
 89 |     border: 3px;
 90 |     border-color: #24292e;
 91 |     border-style: outset;
 92 |     box-sizing: border-box;
 93 |     padding: 35px;
 94 |     margin-top: 30px;
 95 |     margin-bottom: 30px;
 96 |    
 97 | 
 98 | }
 99 | 
100 | #imgProfile {
101 |     width: 200px;
102 |     border: 3px;
103 |     border-color: #24292e;
104 |     border-style: dashed;
105 |     padding: 10px;
106 |     margin-top: 30px;
107 |     margin-bottom: 30px;
108 | 
109 | }
110 | 
111 | #profile p {
112 |     margin: 13px;
113 | 
114 | }
115 | 
116 | #userRepos {
117 |     width: 100%;
118 |     display: flex;
119 |     justify-content: space-around;
120 |     flex-wrap: wrap;
121 |     justify-content: space-evenly;
122 |     font-size: 20px;
123 |     color: #24292e;
124 |     box-sizing: border-box;
125 |     padding: 18px;
126 |     margin-top: 30px;
127 |     margin-bottom: 30px;
128 |     text-align: center;
129 | 
130 | }
131 | 
132 | #reposImg {
133 |     width: 150px;
134 |     padding: 10px;
135 |     margin: 50px;
136 |     margin-bottom: 5px;
137 |     
138 | 
139 | }
140 | 
141 | 
142 | @media (max-width: 768px) { 
143 |     
144 | header {
145 |     flex-flow: column;
146 | }
147 | 
148 | .search {
149 |     width: 90%;
150 | }
151 | 
152 | #profile {
153 |     flex-flow: column;
154 |     text-align: center;
155 | }
156 | 
157 | #imgProfile {
158 |     margin-bottom: 50px;
159 |     width: 75%;
160 | }
161 | 
162 | footer {
163 |     display: none;
164 | }


--------------------------------------------------------------------------------