├── srcs
    ├── assets
    │   ├── img
    │   │   ├── logo.png
    │   │   ├── coracao.png
    │   │   ├── femLogo.png
    │   │   └── search.png
    │   ├── js
    │   │   └── main.js
    │   └── css
    │   │   ├── reset.css
    │   │   └── style.css
    ├── models
    │   ├── Repositorio.js
    │   └── Usuario.js
    ├── views
    │   ├── RepositorioView.js
    │   └── UsuarioView.js
    └── controllers
    │   ├── RepositorioController.js
    │   └── UsuarioController.js
├── README.md
└── index.html


/srcs/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/projeto-github/HEAD/srcs/assets/img/logo.png


--------------------------------------------------------------------------------
/srcs/assets/img/coracao.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/projeto-github/HEAD/srcs/assets/img/coracao.png


--------------------------------------------------------------------------------
/srcs/assets/img/femLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/projeto-github/HEAD/srcs/assets/img/femLogo.png


--------------------------------------------------------------------------------
/srcs/assets/img/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/projeto-github/HEAD/srcs/assets/img/search.png


--------------------------------------------------------------------------------
/srcs/models/Repositorio.js:
--------------------------------------------------------------------------------
 1 | class Repositorio {
 2 |   constructor(nome, url) {
 3 |     this._nome = nome;
 4 |     this._url = url;
 5 |   }
 6 | 
 7 |   _retornaRepositorio() {
 8 |     return {
 9 |       nome: this._nome,
10 |       url: this._url,
11 |     };
12 |   }
13 | 
14 |   get retornaRepositorio() {
15 |     return this._retornaRepositorio();
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/srcs/views/RepositorioView.js:
--------------------------------------------------------------------------------
 1 | class RepositorioView {
 2 |   template(repositorio) {
 3 |     return ` 
 4 |             <div class="repositorios">
 5 |                 <a href="${repositorio.url}" target="blank">${repositorio.nome}</a
 6 |             </div>
 7 |     
 8 |                     
 9 |             
10 |               
11 |             
12 |         `;
13 |   }
14 | }
15 | 
16 | // ajeitar a:visited
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Projeto GitHub Search
 2 | > Esse projeto é um simples consultor de usuários do GitHub. 
 3 | 
 4 | ![enter image description here](https://i.imgur.com/T9EMcOw.png)
 5 | 
 6 | ## GitHub Pages
 7 | > Caso queira visualizar o projeto acesse esse link: [https://vicckm.github.io/projeto-github/index.html](https://vicckm.github.io/projeto-github/index.html)
 8 | 
 9 | ### Ferramentas: 
10 |  1. HTML
11 |  2. CSS
12 |  3. Vanilla Javascript
13 | 
14 | #### Observação: 
15 | Caso encontre algum bug que tenha passado despercebido, fique a vontade em fazer pull request :)
16 | 


--------------------------------------------------------------------------------
/srcs/models/Usuario.js:
--------------------------------------------------------------------------------
 1 | class Usuario {
 2 |   constructor(login, nome, avatar, bio, email, repos) {
 3 |     this._login = login;
 4 |     this._nome = nome;
 5 |     this._avatar = avatar;
 6 |     this._bio = bio;
 7 |     this._email = email;
 8 |     this._repos = repos;
 9 |   }
10 | 
11 |   _retornaUsuario() {
12 |     return {
13 |       login: this._login,
14 |       nome: this._nome,
15 |       avatar: this._avatar,
16 |       bio: this._bio,
17 |       email: this._email,
18 |       repos: this._repos,
19 |     };
20 |   }
21 | 
22 |   get retornaUsuario() {
23 |     return this._retornaUsuario();
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/srcs/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | let inputUser = document.getElementById("inputUser");
 2 | let botaoPesquisar = document.getElementById("botaoPesquisar");
 3 | let form = document.getElementById("form");
 4 | let paragrafo = document.querySelector(".introducao");
 5 | let imagemLogo = document.querySelector(".imagemLogo");
 6 | 
 7 | botaoPesquisar.addEventListener("click", (event) => {
 8 |   event.preventDefault();
 9 | 
10 |   let urlUsuario = `https://api.github.com/users/${inputUser.value}`;
11 |   let urlRepositorio = `https://api.github.com/users/${inputUser.value}/repos`;
12 | 
13 |   UsuarioController.geraUsuario(urlUsuario);
14 |   RepositorioController.geraRepositorio(urlRepositorio);
15 |   inputUser.value = "";
16 | });
17 | 


--------------------------------------------------------------------------------
/srcs/views/UsuarioView.js:
--------------------------------------------------------------------------------
 1 | class UsuarioView {
 2 |   template(usuario) {
 3 |     return ` 
 4 |             
 5 |     
 6 |             <img class="avatarGit" src="${usuario.avatar}">
 7 | 
 8 |             <div class="descricaoUsuario">
 9 |                 <p><span class="spanUsuario">Login:</span>  ${usuario.login}</p>
10 |                 <p><span class="spanUsuario">Nome:</span>  ${usuario.nome}</p>
11 |                 <p><span class="spanUsuario">Biografia:</span>  ${usuario.bio}</p>
12 |                 <p><span class="spanUsuario">E-mail:</span>  ${usuario.email}</p>
13 |                 <p><span class="spanUsuario">Repositório:</span>  ${usuario.repos}</p>
14 |             </div>
15 |        
16 |                     
17 |             
18 |               
19 |             
20 |         `;
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/srcs/controllers/RepositorioController.js:
--------------------------------------------------------------------------------
 1 | class RepositorioController {
 2 |   constructor() {
 3 |     throw new Error("Operação inválida");
 4 |   }
 5 | 
 6 |   static geraRepositorio(urlRepositorio) {
 7 |     let divRepositorio = document.getElementById("repositorio");
 8 |     divRepositorio.innerHTML = "";
 9 | 
10 |     let reqGitRepos = new XMLHttpRequest();
11 | 
12 |     reqGitRepos.open("GET", urlRepositorio);
13 | 
14 |     reqGitRepos.onload = () => {
15 |       if (reqGitRepos.status !== 200) {
16 |         throw new Error("Não foi possível realizar a requisição.");
17 |       }
18 | 
19 |       let viewRepositorio = new RepositorioView();
20 |       let reqParseRepos = JSON.parse(reqGitRepos.responseText);
21 | 
22 |       for (let i = 0; i < reqParseRepos.length; i++) {
23 |         let repositorios = new Repositorio(
24 |           reqParseRepos[i].name,
25 |           reqParseRepos[i].html_url
26 |         );
27 |         divRepositorio.innerHTML += viewRepositorio.template(
28 |           repositorios.retornaRepositorio
29 |         );
30 |       }
31 |     };
32 | 
33 |     reqGitRepos.send();
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/srcs/assets/css/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/ 
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   border: 0;
 90 |   font-size: 100%;
 91 |   font: inherit;
 92 |   vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |   display: block;
107 | }
108 | body {
109 |   line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |   list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |   quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: "";
124 |   content: none;
125 | }
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/srcs/controllers/UsuarioController.js:
--------------------------------------------------------------------------------
 1 | class UsuarioController {
 2 |   constructor() {
 3 |     throw new Error("Operação inválida");
 4 |   }
 5 | 
 6 |   static geraUsuario(urlUsuario) {
 7 |     let containerUsuario = document.querySelector(".container-usuario");
 8 |     let reqGitHub = new XMLHttpRequest();
 9 | 
10 |     reqGitHub.open("GET", urlUsuario);
11 | 
12 |     reqGitHub.onload = () => {
13 |       try {
14 |         if (reqGitHub.status !== 200) {
15 |           throw new Error("Não foi possível realizar a requisição.");
16 |         }
17 | 
18 |         let divUsuario = document.getElementById("usuario");
19 |         let viewUsuario = new UsuarioView();
20 |         let reqParse = JSON.parse(reqGitHub.responseText);
21 | 
22 |         let usuarioGit = {
23 |           login: reqParse.login,
24 |           nome: reqParse.name || "Não informado",
25 |           avatar: reqParse.avatar_url,
26 |           bio: reqParse.bio || "Não informado",
27 |           email: reqParse.email || "Não informado",
28 |           repos: reqParse.public_repos,
29 |         };
30 | 
31 |         let montaUsuario = new Usuario(
32 |           usuarioGit.login,
33 |           usuarioGit.nome,
34 |           usuarioGit.avatar,
35 |           usuarioGit.bio,
36 |           usuarioGit.email,
37 |           usuarioGit.repos
38 |         );
39 | 
40 |         paragrafo.classList.add("invisivel");
41 |         imagemLogo.classList.add("invisivel");
42 |         containerUsuario.classList.remove("invisivel");
43 | 
44 |         divUsuario.innerHTML = viewUsuario.template(
45 |           montaUsuario.retornaUsuario
46 |         );
47 |       } catch (erro) {
48 |         if (erro) {
49 |           let mensagemErro = document.querySelector(".mensagemErro");
50 | 
51 |           containerUsuario.classList.add("invisivel");
52 | 
53 |           mensagemErro.classList.remove("invisivel");
54 |           setTimeout(tirarMensagemErro, 3000);
55 | 
56 |           function tirarMensagemErro() {
57 |             mensagemErro.classList.add("invisivel");
58 |           }
59 |         }
60 |       }
61 |     };
62 | 
63 |     reqGitHub.send();
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/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="stylesheet" href="./srcs/assets/css/reset.css" />
 7 |     <link
 8 |       href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
 9 |       rel="stylesheet"
10 |     />
11 |     <link
12 |       href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap"
13 |       rel="stylesheet"
14 |     />
15 |     <link rel="stylesheet" href="./srcs/assets/css/style.css" />
16 |     <title>Projeto GitHub</title>
17 |   </head>
18 |   <body>
19 |     <header class="header">
20 |       <div class="logo-header">
21 |         <a href="index.html">
22 |           <img
23 |             class="logo"
24 |             src="./srcs/assets/img/logo.png"
25 |             alt="Logo da empresa GitHub"
26 |           />
27 |         </a>
28 |         <h1 class="titulo">GitHub Search</h1>
29 |       </div>
30 |       <div class="form-header">
31 |         <img
32 |           class="search"
33 |           src="./srcs/assets/img/search.png"
34 |           alt="Objeto lupa"
35 |         />
36 |         <form id="form">
37 |           <input
38 |             type="text"
39 |             id="inputUser"
40 |             name="inputUser"
41 |             placeholder="Nome do usuário"
42 |           />
43 |           <button type="submit" id="botaoPesquisar">Pesquisar</button>
44 |         </form>
45 |       </div>
46 |     </header>
47 |     <main class="main">
48 |       <p class="texto-erro mensagemErro invisivel">
49 |         Não foi possível encontrar esse usuário. Tente novamente :)
50 |       </p>
51 |       <p class="introducao">
52 |         Quer saber sobre algum usuário do GitHub? Pesquise aqui!
53 |       </p>
54 | 
55 |       <div class="imagemLogo">
56 |         <img
57 |           class="femLogo"
58 |           src="./srcs/assets/img/femLogo.png"
59 |           alt="Logo feminina GitHub"
60 |         />
61 |       </div>
62 | 
63 |       <div class="container-usuario invisivel">
64 |         <div class="usuario" id="usuario"></div>
65 | 
66 |         <div class="repositorio" id="repositorio"></div>
67 |       </div>
68 |     </main>
69 |   </body>
70 |   <script defer src="./srcs/models/Usuario.js"></script>
71 |   <script defer src="./srcs/models/Repositorio.js"></script>
72 |   <script defer src="./srcs/views/RepositorioView.js"></script>
73 |   <script defer src="./srcs/views/UsuarioView.js"></script>
74 |   <script defer src="./srcs/controllers/RepositorioController.js"></script>
75 |   <script defer src="./srcs/controllers/UsuarioController.js"></script>
76 |   <script defer src="./srcs/assets/js/main.js"></script>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/srcs/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   font-family: "Noto Sans JP", sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   height: 100vh;
  7 | }
  8 | 
  9 | /* Header */
 10 | 
 11 | .header {
 12 |   display: flex;
 13 |   justify-content: space-between;
 14 |   width: 100%;
 15 |   padding: 10px 0;
 16 |   background-color: black;
 17 | }
 18 | 
 19 | .logo-header {
 20 |   display: flex;
 21 |   align-items: center;
 22 | }
 23 | 
 24 | .logo {
 25 |   width: 64px;
 26 |   height: 64px;
 27 |   margin-left: 20px;
 28 | }
 29 | 
 30 | .titulo {
 31 |   color: white;
 32 |   margin-left: 10px;
 33 |   font-size: 24px;
 34 | }
 35 | 
 36 | .form-header {
 37 |   display: flex;
 38 |   justify-content: center;
 39 |   align-items: center;
 40 | }
 41 | 
 42 | .search {
 43 |   width: 35px;
 44 |   height: 35px;
 45 | }
 46 | 
 47 | #form input {
 48 |   margin-left: 10px;
 49 |   outline: none;
 50 |   border: 2px solid white;
 51 |   border-radius: 8px;
 52 |   padding: 5px;
 53 | }
 54 | 
 55 | #form button {
 56 |   margin-right: 20px;
 57 |   margin-left: 3px;
 58 |   border: 2px solid white;
 59 |   background: black;
 60 |   border-radius: 8px;
 61 |   padding: 5px;
 62 |   color: white;
 63 |   outline: none;
 64 | }
 65 | 
 66 | /* Introdução */
 67 | 
 68 | .introducao {
 69 |   text-align: center;
 70 |   font-size: 36px;
 71 |   font-weight: 300;
 72 |   margin-bottom: 60px;
 73 | }
 74 | 
 75 | .invisivel {
 76 |   display: none;
 77 |   width: 0;
 78 |   height: 0;
 79 | }
 80 | 
 81 | /* Conteúdo */
 82 | 
 83 | .main {
 84 |   padding-top: 40px;
 85 |   width: 100%;
 86 | }
 87 | 
 88 | .imagemLogo {
 89 |   text-align: center;
 90 |   margin-top: 30px;
 91 | }
 92 | 
 93 | .femLogo {
 94 |   width: 700px;
 95 | }
 96 | 
 97 | .container-usuario {
 98 |   height: 100%;
 99 |   width: 80%;
100 |   margin: 0 auto;
101 | }
102 | 
103 | .usuario {
104 |   display: flex;
105 |   align-items: center;
106 |   justify-content: center;
107 |   border-bottom: 1px solid black;
108 | }
109 | 
110 | .avatarGit {
111 |   border: 3px solid #000000;
112 |   border-radius: 50%;
113 |   width: 300px;
114 |   margin-bottom: 15px;
115 | }
116 | 
117 | .descricaoUsuario {
118 |   margin-left: 30px;
119 |   margin-bottom: 15px;
120 | }
121 | 
122 | .descricaoUsuario p {
123 |   margin-bottom: 8px;
124 | }
125 | 
126 | .spanUsuario {
127 |   font-weight: bold;
128 | }
129 | 
130 | .repositorio {
131 |   margin-top: 20px;
132 |   display: flex;
133 |   flex-wrap: wrap;
134 |   justify-content: center;
135 | }
136 | 
137 | .repositorios {
138 |   width: 200px;
139 |   padding: 40px;
140 |   margin: 10px;
141 |   border: 2px solid black;
142 |   text-align: center;
143 | }
144 | 
145 | .repositorios a {
146 |   word-break: break-all;
147 |   padding: 0;
148 |   color: black;
149 |   text-decoration: none;
150 | }
151 | 
152 | .repositorios a:hover {
153 |   text-decoration: underline;
154 | }
155 | 
156 | .repositorios a:visited {
157 |   color: black;
158 | }
159 | 
160 | /* Erro */
161 | 
162 | .texto-erro {
163 |   color: red;
164 |   text-align: center;
165 |   font-size: 26px;
166 |   margin-bottom: 20px;
167 | }
168 | 
169 | /* Responsivo */
170 | 
171 | @media (max-width: 768px) {
172 |   .header {
173 |     flex-direction: column;
174 |     height: auto;
175 |     padding: 10px 0;
176 |     align-items: center;
177 |   }
178 | 
179 |   .logo-header {
180 |     margin-bottom: 5px;
181 |   }
182 | 
183 |   .logo {
184 |     margin-left: 0;
185 |   }
186 | 
187 |   .titulo {
188 |     font-size: 22px;
189 |   }
190 | 
191 |   #form button {
192 |     margin-right: 0;
193 |   }
194 | 
195 |   .introducao {
196 |     font-size: 45px;
197 |     line-height: 50px;
198 |   }
199 | 
200 |   .femLogo {
201 |     width: 350px;
202 |   }
203 | 
204 |   .usuario {
205 |     flex-direction: column;
206 |   }
207 | 
208 |   .descricaoUsuario {
209 |     margin-left: 0;
210 |     margin-top: 20px;
211 |   }
212 | 
213 |   .repositorios:last-child {
214 |     margin-bottom: 20px;
215 |   }
216 | }
217 | 
218 | @media (max-width: 576px) {
219 |   .introducao {
220 |     font-size: 30px;
221 |     margin-bottom: 20px;
222 |   }
223 |   .femLogo {
224 |     width: 200px;
225 |   }
226 | 
227 |   #form input {
228 |     width: 130px;
229 |   }
230 | 
231 |   .avatarGit {
232 |     width: 200px;
233 |   }
234 |   .titulo {
235 |     font-size: 18px;
236 |   }
237 |   .descricaoUsuario {
238 |     margin: 0 20px;
239 |   }
240 | 
241 |   .repositorios:last-child {
242 |     margin-bottom: 20px;
243 |   }
244 | }
245 | 


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