-1
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Exercício 2 e 3</title>
</head>
<body>
<div id="main">
<h1>Lista de repositórios do Github</h1>
<input type="text" name="user" id="user" placeholder="Digite seu usuário do Github">
<button class="add">Adicionar</button>
<button class="clear">Limpar</button>
<ul class="list"></ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
const github_username = document.querySelector("input#user"); //input
// Botão adicionar
const btAdd = document
.querySelector("button.add")
.addEventListener("click", () => {
console.log(axios.request.status);
axios
.get(`https://api.github.com/users/${github_username.value}/repos`)
.then(response => {
// while (axios.status == 102) {
// console.log("Request ainda não concluída");
// }
// Verifica se está inserindo os mesmo repositórios mais de uma vez (mesmo usuário)
// if (
// linkAttribute.value == response.data[i].html_url ||
// linkElement.textContent == response.data[i].name
// ) {
// alert(
// "ERRO! \nTentativa de exibição dos repositórios do mesmo usuário anterior"
// );
// clearInput();
// clearLines();
// }
// Percorre o vetor com as informações sobre os repositórios vindo do response
for (var i = 0; i < response.data.length; i++) {
var itemElement = document.createElement("li"); //criação de uma linha
var linkElement = document.createElement("a"); //link
var linkAttribute = document.createAttribute("href"); //href
linkAttribute.value = response.data[i].html_url; //atribui a URL dos repositorios a cada href
linkElement.setAttributeNode(linkAttribute); //coloca os href dentro do link
linkElement.textContent = response.data[i].name; //Pega os nomes dos repositórios e coloca no nó de texto do link ao lado do href
document.querySelector("ul.list").appendChild(itemElement); //coloca as linhas na ul
itemElement.appendChild(linkElement); //coloca os links nas linhas
}
})
.catch(error => {
alert(
`Erro na requisição! \nUsuário ${github_username.value} não encontrado!`
);
// console.log("Erro na requisição");
clearInput();
});
});
// Botão limpar
const btClear = document
.querySelector("button.clear")
.addEventListener("click", () => {
let lines = document.querySelector("li");
// Se as linhas existem, são apagadas
if (lines) {
clearLines();
} else {
alert("Nenhuma linha encontrada para ser apagada");
}
// Verifica se o input está vazio
if (github_username.value === "") {
alert("Nenhum usuário a ser apagado do input");
} else {
clearInput();
}
});
// Limpa o input e coloca o foco nele
function clearInput() {
github_username.value = "";
github_username.focus();
}
// Limpa as linhas em que estão os repositórios
function clearLines() {
let list = document.querySelector("ul.list");
// Enquanto a ul tiver alguma li (filha de ul)
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
Status comes in Sponse:
response.status
.. that’s what I wanted?– Sam
@Sam I believe so. I want to show a message on screen while the request is taking place.
– José Guilherme
Just show the message when the click function is triggered and when you enter the
.then
Axios (meaning the request has been completed) you remove the message.– Sam