diff --git a/README.txt b/README.txt new file mode 100644 index 0000000000..1205770b0d --- /dev/null +++ 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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000..1559f956ff --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Busca Repo + + + +
+
+

Buscar Repositórios no Github

+
+ +
+
+ + +
+
+ + + +
+
+
    +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/page.js b/page.js new file mode 100644 index 0000000000..e322218ad7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e2406ed67d --- /dev/null +++ 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%) +} + + +