ateliware · thiago0908 · Mar 22, 2022
diff --git a/README.txt b/README.txt
@@ -0,0 +1,14 @@
+- Bot�o para buscar reposit�rios;
+- Lista dos reposit�rios encontrados listando nome, linguagem, descri��o e url de cada reposit�rio.
+
+
+Linguagens utilizadas:
+
+Html, css, JavaScript;
+
+
+Utilizando: 
+
+Manter os arquivos html, css e Js juntos;
+
+Executar o index.html, o qual vai abrir uma pagina onde � necessario escrever o nome do user do qual deseja ter acesso aos repositorios do github.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Busca Repo</title>
+    <link href="style.css" rel="stylesheet" />
+</head>
+<body>
+	<div id="app" class="app">
+		<div align="center">
+		<h1>Buscar Repositórios no Github</h1>
+		</div>
+
+		<div class="content-form">
+			<form>
+				<input type="" id="input_user" placeholder="Digite o User do Github" />
+				<button type="submit" class="btn-app">Buscar</button>
+			</form>
+		</div>
+
+
+
+		<div class="content-list">
+			<div class="content-list-container">
+				<ul></ul>
+			</div>
+		</div>
+	</div>
+
+
+
+
+	<script src="page.js"></script>
+</body>
+</html>
diff --git a/page.js b/page.js
@@ -0,0 +1,87 @@
+var appForm = document.querySelector("#app form");
+var listaEl = document.querySelector("#app ul");
+
+
+var xhttp = new XMLHttpRequest();
+var url_base = 'https://api.github.com/';
+
+var lista = [];
+
+
+appForm.onsubmit = buscarRepo;
+
+
+
+
+function buscarRepo(e){
+	e.preventDefault();
+
+	var user = document.getElementById("input_user").value;
+	if(user.length === 0) {
+		alert("Por favor, preencha o nome do usuário");
+		return;
+	}
+
+	var url = url_base + 'users/' + user + '/repos';
+	xhttp.open('GET', url);
+	xhttp.send();
+
+	xhttp.onreadystatechange = function(){
+		if(xhttp.readyState === 4){
+			if(xhttp.status === 200){
+				var result = JSON.parse(xhttp.responseText);
+				//console.log(result);
+
+				lista = result.map(function(item){
+					return { 
+						name: item.name, 
+						description: item.description, 
+						html_url: item.html_url,
+						language: item.language
+					};
+				});
+				renderLista();
+			}
+			else{
+				alert('Falha ao buscar usuário. Tente novamente.');
+			}
+		}
+	}
+}
+
+
+
+
+
+
+function renderLista(){
+	listaEl.innerHTML = '';
+
+	for(item of lista){
+
+		var nameEl = document.createElement('strong');
+		nameEl.appendChild(document.createTextNode('Nome Repositório: ' + item.name));
+
+
+		var descriptionEl = document.createElement('p');
+		descriptionEl.appendChild(document.createTextNode(item.description));
+
+		var languageEl = document.createElement('strong');
+		languageEl.appendChild(document.createTextNode('Linguagem dev: ' + item.language));
+
+		var urlEl = document.createElement('a');
+		urlEl.setAttribute('href', item.html_url);
+		urlEl.setAttribute('target', '_blank');
+		urlEl.appendChild(document.createTextNode(item.html_url));
+
+		var itemEl = document.createElement('li');
+		itemEl.appendChild(nameEl);
+		itemEl.appendChild(languageEl);
+		itemEl.appendChild(descriptionEl);
+		itemEl.appendChild(urlEl);
+
+
+		listaEl.appendChild(itemEl);
+	}
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,146 @@
+* {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font: 400 14px Roboto, sans-serif;
+    background: #f0f0f5;
+    -webkit-font-smoothing: antialiased;
+}
+
+input, button {
+    font: 400 18px Roboto, sans-serif;
+}
+
+form input {
+    width: 100%;
+    height: 60px;
+    color: #333;
+    border: 1px solid #dcdce6;
+    border-radius: 8px;
+    padding: 0 24px;
+    margin: 5px 2px;
+}
+
+.btn-app{
+    width: 100%;
+    height: 60px;
+    background: #0d98ba;
+    border: 0;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 700;
+    text-align: center;
+    text-decoration: none;
+    font-size: 18px;
+    margin: 5px 2px;
+    transition: filter 0.2s;
+}
+
+.btn-app:hover{
+    filter: brightness(90%)
+}
+
+.app {
+    width: 100%;
+    max-width: 1180px;
+    padding: 0 30px;
+    margin: 32px auto;
+
+    background: #f1f1f1;
+}
+
+.app .content-form{
+    width: 100%;
+    padding: 15px;
+    background: #f0f0f5;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.app form{
+    width: 100%;
+    max-width: 700px;
+}
+
+
+
+.app .content-list{
+    width: 100%;
+    margin: 15px auto;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.app .content-list .content-list-container{
+    width: 100%;
+    max-width: 700px;
+    margin: 32px auto;
+}
+
+.app .content-list ul{
+    display: grid;
+    grid-gap: 24px;
+    list-style: none;
+}
+
+.app .content-list ul li{
+    background: #fff;
+    padding: 24px;
+    border-radius: 8px;
+    position: relative;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
+}
+
+.app .content-list ul li strong{
+    display: block;
+    margin-bottom: 16px;
+    color: #41414d
+}
+
+
+
+.app .content-list ul li strong{
+    display: block;
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #41414d
+}
+
+
+.app .content-list ul li p{
+    color: #737380;
+    line-height: 21px;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.app .content-list ul li a{
+    height: 30px;
+    padding: 5px;
+    background: #0b7698;
+    border: 0;
+    border-radius: 2px;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    font-size: 14px;
+    margin: 0 5px;
+    transition: filter 0.2s;
+}
+
+.app .content-list ul li a:hover{
+    filter: brightness(90%)
+}
+
+
+