Olá, estyou fazendo um projeto parecido com o Alura books e estou usando as requisições que estão sendo ensinadas nessa aula. Sempre que clico no menu de contexto de cada livro e adiciono o livro, a página sempre recarrega. Poderiam me ajudar, por favor?
Segue o código:
const input = document.querySelector('.pesquisa-input');
const button = document.querySelector('.pesquisa-botao');
const menuList = document.querySelector('.livro-menu');
button.addEventListener('click', (event) => {
event.preventDefault();
//requisição para a API do google
const text = input.value;
const url = `https://www.googleapis.com/books/v1/volumes?q=${text}`;
fetch(url)
.then(response => response.json())
.then(data => {
const livros = data.items;
//limpa a div de livros
const livrosContainer = document.querySelector('.livros-container');
livrosContainer.innerHTML = '';
//cria os elementos de cada livro
livros.forEach(livro => {
const livroContainer = document.createElement('div');
livroContainer.classList.add('livro-container');
const tituloContainer = document.createElement('div');
tituloContainer.classList.add('livro-titulo-container');
const titulo = document.createElement('h2');
titulo.classList.add('livro-titulo');
titulo.textContent = livro.volumeInfo.title;
//cria o menu de cada livro
const divCheckbox = document.createElement('div');
divCheckbox.classList.add('container__checkbox');
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.id = 'menu';
checkBox.classList.add('container__botao');
const label = document.createElement('label');
label.setAttribute('for', 'menu');
label.classList.add('container__rotulo');
const span = document.createElement('span');
span.classList.add('cabeçalho__menu-hamburguer');
label.appendChild(span);
divCheckbox.appendChild(checkBox);
divCheckbox.appendChild(label);
//evento para abrir o menu
span.addEventListener('click', (event) => {
event.preventDefault();
checkBox.classList.toggle('active');
listaMenu.style.display = checkBox.classList.contains('active') ? 'block' : 'none';
});
//cria a lista de opções do menu
const listaMenu = document.createElement('ul');
listaMenu.classList.add('lista-menu');
const itemMenu1 = document.createElement('li');
itemMenu1.classList.add('lista-menu-item');
//evento para adicionar o livro
const linkMenu1 = document.createElement('p');
linkMenu1.classList.add('lista-menu-link');
linkMenu1.href = '#';
linkMenu1.textContent = 'Add';
//função para adicionar o livro
async function addLivro(evento) {
evento.preventDefault();
console.log(evento);
const conexao = await fetch('http://localhost:3000/livros', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
titulo: livro.volumeInfo.title,
descricao: livro.volumeInfo.description,
imagem: livro.volumeInfo.imageLinks.thumbnail,
link: livro.volumeInfo.previewLink
})
});
const conexaoConvertida = await conexao.json();
return conexaoConvertida;
}
linkMenu1.addEventListener('click', evento => addLivro(evento));
//evento para remover o livro
const itemMenu2 = document.createElement('li');
itemMenu1.classList.add('lista-menu-item');
const linkMenu2 = document.createElement('a');
linkMenu2.classList.add('lista-menu-link');
linkMenu2.href = '#';
linkMenu2.textContent = 'Remove';
Resto do cógigo, não possui mais addEventListerners...
Obrigado.