0
I created a class called Api
import api from './api';
class App {
constructor(){
this.repositories = [];
this.formEl = document.getElementById('repo-form');
this.inputEl = document.getElementById('repository');
this.listEl = document.getElementById('repo-list');
this.registerHandlers();
}
registerHandlers() {
this.formEl.onsubmit = event => this.addRepository(event);
}
async addRepository(event) {
event.preventDefault();
const repoInput = this.inputEl.nodeValue;
if(repoInput.length === 0)
return;
const response = await api.get(`/users/${repoInput}`);
console.log(response);
this.repositories.push({
name: 'thaisamorandini',
description: 'Meu repositório',
avatar_url: 'https://avatars2.githubusercontent.com/u/13645895?v=4',
html_url: 'https://github.com/thaisamorandinialgaworks',
});
console.log(this.repositories);
this.render();
}
render(){
this.listEl.innerHTML = '';
this.repositories.forEach(repo => {
Unhandled promise rejection TypeError: "repoInput is null"let imgEl = document.createElement('img');
imgEl.setAttribute('src', repo.avatar_url);
let titleEl = document.createElement('strong');
titleEl.appendChild(document.createTextNode(repo.name));
let descriptionEl = document.createElement('p');
descriptionEl.appendChild(document.createTextNode(repo.description));
let linkEl = document.createElement('a');
linkEl.setAttribute('target', '_blank');
linkEl.appendChild(document.createTextNode('Acessar'));
let listItemEl = document.createElement('li');
listItemEl.appendChild(imgEl);
listItemEl.appendChild(titleEl);
listItemEl.appendChild(descriptionEl);
listItemEl.appendChild(linkEl);
this.listEl.appendChild(listItemEl);
});
}
}
new App();
and an api.js file
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.github.com',
});
export default api;
and an html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Busca de Repositórios Github</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
font-family: sans-serif;
}
li{
clear: both;
margin-top: 20px;
}
img{
width: 80px;
float: left;
margin-right: 10px;
}
strong{
font-size: 20px;
}
p {
margin: 5px 0;
}
</style>
</head>
<body>
<form id="repo-form">
<input type="text" id="repository"/>
<button type="submit">Adicionar</button>
</form>
<ul id="repo-list">
</ul>
<script src="./bundle.js"></script>
</body>
</html>
That by clicking the button it adds to the array the reports I have on github in a list , but this giving error promise I treated using the async and the await but you’re making a mistake.