├── imagens
    ├── logo.jpg
    └── backgroud.jpg
├── srcs
    ├── models
    │   ├── Repositorio.js
    │   └── Usuario.js
    ├── views
    │   ├── RepositorioView.js
    │   └── UsuarioView.js
    └── controllers
    │   ├── RepositorioController.js
    │   └── UsuarioController.js
├── main.js
├── index.html
└── css
    └── style.css


/imagens/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmandaDuart/API-Github/HEAD/imagens/logo.jpg


--------------------------------------------------------------------------------
/imagens/backgroud.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmandaDuart/API-Github/HEAD/imagens/backgroud.jpg


--------------------------------------------------------------------------------
/srcs/models/Repositorio.js:
--------------------------------------------------------------------------------
 1 | class Repositorio {
 2 |     constructor(nome) {
 3 |         this._nome = nome;
 4 |     };
 5 | 
 6 |     retornaRepositorio() {
 7 |         return {
 8 |             nome: this._nome
 9 |         };
10 |     };
11 | };


--------------------------------------------------------------------------------
/srcs/views/RepositorioView.js:
--------------------------------------------------------------------------------
 1 | class RepositorioView {
 2 |     constructor() {
 3 |         throw new Error("Erro não instanciado")
 4 |     }
 5 | 
 6 |     static templateRepositorio(repositorio) {
 7 |         return `
 8 |                 <li>
 9 |                     <h1>${repositorio.nome}</h1>
10 |                 </li>
11 |                `;
12 |     }
13 | }


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | let userInput = document.getElementById('userInput');
 2 | let buttonPesquisar = document.getElementById('buttonPesquisar');
 3 | let textoUser = "";
 4 | let respostGit = document.getElementById('repositorio');
 5 | 
 6 | buttonPesquisar.addEventListener("click", () => {
 7 |     textoUser = userInput.value;
 8 |     if (textoUser != "") {
 9 |         UsuarioController.geraUsuario();
10 |         RepositorioController.gerarRepositorio();
11 | 
12 |     } else {
13 |         alert("Usuário errado !");
14 |     }
15 | });


--------------------------------------------------------------------------------
/srcs/models/Usuario.js:
--------------------------------------------------------------------------------
 1 | class Usuario {
 2 |     constructor(foto, usuarioGit, followers, following) {
 3 |         this._foto = foto;
 4 |         this._usuarioGit = usuarioGit;
 5 |         this._followers = followers;
 6 |         this._following = following;
 7 |     };
 8 | 
 9 |     retornaUsuario() {
10 |         return {
11 |             foto: this._foto,
12 |             usuarioGit: this._usuarioGit,
13 |             followers: this._followers,
14 |             following: this._following
15 |         };
16 |     };
17 | };


--------------------------------------------------------------------------------
/srcs/controllers/RepositorioController.js:
--------------------------------------------------------------------------------
 1 | class RepositorioController {
 2 |     constructor() {
 3 |         throw new Error("Erro não instanciado");
 4 |     };
 5 | 
 6 |     static gerarRepositorio() {
 7 | 
 8 |         let repositoriorequi = new XMLHttpRequest();
 9 |         repositoriorequi.open("GET", `https://api.github.com/users/${textoUser}/repos`);
10 | 
11 |         repositoriorequi.onload = () => {
12 |             let listaRepos = JSON.parse(repositoriorequi.responseText);
13 |             for (let item of listaRepos) {
14 |                 let repositorioGit = new Repositorio(item.name);
15 |                 respostGit.innerHTML += RepositorioView.templateRepositorio(repositorioGit.retornaRepositorio());
16 |             }
17 |         };
18 |         repositoriorequi.send();
19 | 
20 |     }
21 | 
22 | }


--------------------------------------------------------------------------------
/srcs/views/UsuarioView.js:
--------------------------------------------------------------------------------
 1 | class UsuarioView {
 2 |     constructor() {
 3 |         throw new Error("Erro não instanciado")
 4 |     }
 5 | 
 6 |     static templateUsuario(usuario) {
 7 |         return `<div class="container">
 8 |                     
 9 |                     <div class="titulo">
10 |                         <h1>${usuario.usuarioGit}</h1>
11 |                     </div>
12 |                     <div class="op1">
13 |                         <label>Seguidores</label>
14 |                         <h1>${usuario.followers}</h1>
15 |                     </div>
16 |                     <div  class="op2">
17 |                         <label>Seguindo</label>
18 |                         <h1> ${usuario.following}</h1>
19 |                     </div>
20 |                    
21 |                 </div> 
22 |                 <div id ="foto">
23 |                 <img src = "${usuario.foto}" >
24 |             </div>`;
25 |     }
26 | }


--------------------------------------------------------------------------------
/srcs/controllers/UsuarioController.js:
--------------------------------------------------------------------------------
 1 |  class UsuarioController {
 2 |      constructor() {
 3 |          throw new Error("Erro não instanciado");
 4 |      };
 5 | 
 6 |      static geraUsuario() {
 7 | 
 8 |          let requisicao = new XMLHttpRequest();
 9 |          requisicao.open("GET", `https://api.github.com/users/${textoUser}`);
10 |          //console.log(userInput.value);
11 | 
12 |          requisicao.addEventListener("load", () => {
13 |              if (requisicao.status == 200) {
14 |                  let listaUsuarios = JSON.parse(requisicao.responseText);
15 | 
16 |                  let usuario = new Usuario(listaUsuarios.avatar_url, listaUsuarios.login, listaUsuarios.followers, listaUsuarios.following);
17 | 
18 |                  let usuarioGit = document.getElementById('usuarioGit');
19 | 
20 |                  usuarioGit.innerHTML = UsuarioView.templateUsuario(usuario.retornaUsuario());
21 | 
22 |              }
23 |          })
24 | 
25 |          requisicao.send();
26 | 
27 |      }
28 | 
29 |  }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="pt-br">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 | 
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Github </title>
10 |     <script src="https://kit.fontawesome.com/yourcode.js"></script>
11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
12 |     <link href="https://fonts.googleapis.com/css2?family=ABeeZee&family=Chewy&family=Righteous&display=swap" rel="stylesheet">
13 |     <link rel="stylesheet" href="css/style.css">
14 | 
15 | </head>
16 | 
17 | <body>
18 |     <header>
19 |         <div id="logo"></div>
20 |         <div id="superior">
21 |             <div class="inputform">
22 |                 <input type="text" name="userInput" id="userInput" placeholder="Digite aqui o usuário ">
23 |                 <button id="buttonPesquisar"><i class="fa fa-search"></i>  Pesquisar</button>
24 |             </div>
25 |         </div>
26 |     </header>
27 | 
28 | 
29 |     <div id="usuarioGit"></div>
30 | 
31 |     <div class="form"><img id="imagem"></div>
32 | 
33 |     <div id="containerRepos">
34 |         <ul id="repositorio"></ul>
35 |     </div>
36 | 
37 |     <footer>Amanda Duarte </footer>
38 | 
39 | 
40 |     <script src="srcs/models/Usuario.js"></script>
41 |     <script src="srcs/models/Repositorio.js"></script>
42 |     <script src="srcs/views/UsuarioView.js"></script>
43 |     <script src="srcs/views/RepositorioView.js"></script>
44 |     <script src="srcs/controllers/UsuarioController.js"></script>
45 |     <script src="srcs/controllers/RepositorioController.js"></script>
46 |     <script src="main.js"></script>
47 | </body>
48 | 
49 | 
50 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 |     body {
  2 |         background-image: url("../imagens/backgroud.jpg");
  3 |         padding: 0;
  4 |         margin: 0;
  5 |         color: #fff;
  6 |         text-align: center;
  7 |     }
  8 |     
  9 |     header {
 10 |         position: flex;
 11 |         top: 0px;
 12 |         right: 0px;
 13 |         left: 0px;
 14 |         margin: 0px auto;
 15 |     }
 16 |     
 17 |     #logo {
 18 |         position: absolute;
 19 |         width: 120px;
 20 |         height: 60px;
 21 |         top: 0px;
 22 |         bottom: 0px;
 23 |         left: 0px;
 24 |         background-image: url("../imagens/logo.jpg");
 25 |     }
 26 |     
 27 |     #superior {
 28 |         position: flex;
 29 |         font-size: 32px;
 30 |         top: 0px;
 31 |         right: 0px;
 32 |         bottom: 60px;
 33 |         left: 100%;
 34 |         background-color: #000;
 35 |         text-align: center;
 36 |         line-height: 40px;
 37 |         padding: 10px;
 38 |     }
 39 |     
 40 |     #containerRepos {
 41 |         margin: 0 auto;
 42 |         width: 80%;
 43 |     }
 44 |     
 45 |     #repositorio {
 46 |         display: flex;
 47 |         font-size: 14px;
 48 |         flex-wrap: wrap;
 49 |         text-align: center;
 50 |         color: #fff;
 51 |     }
 52 |     
 53 |     li {
 54 |         border-radius: 2em #2d2b2b;
 55 |         background-color: #000000b8;
 56 |         margin: 20px;
 57 |         width: 28%;
 58 |     }
 59 |     
 60 |     footer {
 61 |         color: #000;
 62 |         background-color: #f1f1f1d9;
 63 |         width: 100%;
 64 |         font-size: 24px;
 65 |         font-weight: bold;
 66 |         font-family: 'ABeeZee', sans-serif;
 67 |         font-weight: bold;
 68 |         position: absolute;
 69 |         top: auto;
 70 |         height: 35px;
 71 |         line-height: 35px;
 72 |         text-align: center;
 73 |     }
 74 |     
 75 |     #buttonPesquisar {
 76 |         border: #fff 2px;
 77 |         background-color: #fff;
 78 |         color: #000;
 79 |         padding-top: 3px;
 80 |         padding-bottom: 3px;
 81 |         border-radius: 5px;
 82 |         font-weight: bold;
 83 |         border: none;
 84 |         cursor: pointer;
 85 |         font-family: 'ABeeZee', sans-serif;
 86 |     }
 87 |     
 88 |     #foto {
 89 |         top: 50%;
 90 |         left: 50%;
 91 |     }
 92 |     
 93 |     h4 {
 94 |         text-align: justify;
 95 |     }
 96 |     
 97 |     .inputform {
 98 |         margin-top: 0px;
 99 |         text-align: right;
100 |         color: #fff;
101 |         margin: 0px;
102 |     }
103 |     
104 |     input[type="text" i] {
105 |         width: 300px;
106 |     }
107 |     
108 |     div.container {
109 |         height: 100%;
110 |         background-color: #2d2b2b7a;
111 |     }
112 |     
113 |     label {
114 |         font-size: 24px;
115 |     }
116 |     
117 |     div.titulo {
118 |         font-size: 20px;
119 |         text-align: center;
120 |         padding: 3vw;
121 |         position: relative;
122 |         padding-bottom: 0px;
123 |     }
124 |     
125 |     div.op1 {
126 |         padding-bottom: 0px;
127 |         padding-top: 0px;
128 |         width: 38%;
129 |         display: inline-block;
130 |         font-size: 12px;
131 |         text-align: center;
132 |         min-width: 40vw;
133 |     }
134 |     
135 |     div.op2 {
136 |         padding-bottom: 0px;
137 |         padding-top: 0px;
138 |         width: 38%;
139 |         display: inline-block;
140 |         margin-right: 0vw;
141 |         font-size: 12px;
142 |         text-align: center;
143 |         min-width: 40vw;
144 |         float: right;
145 |     }
146 |     
147 |     h1 {
148 |         margin-bottom: 0px;
149 |         margin-top: 0px;
150 |     }


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