Estou tentando exibir na tela dois preços, com desconto e sem desconto. Consegui exibir os dois, mas não consigo alinhar o preço com desconto abaixo do preço sem desconto. Alguém pode me ajudar? Segue o que consegui fazer:
HTML - na section coloquei essa div para tentar de alguma forma alinhar os preços com desconto
<section class="livros wrap" id="livros">
<div id="livros-desconto"></div>
Arquivo JS que busca livros da API
//
let livros = []
const endPointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';
getBuscarLivrosDaAPI();
//modo de manter uma moeda para cada país, nesse caso apenas Brasileira
const preco = new Intl.NumberFormat("pt-br", {
style: "currency",
currency: "BRL",
minimumFractionDigits: 2,
});
async function getBuscarLivrosDaAPI() {
const res = await fetch(endPointDaAPI);
livros = await res.json();
console.log(livros)
livrosComDesconto = aplicarDescontoLivros(livros);
exibirDescontoLivro(livrosComDesconto); //Chamar a função de preço com desconto
exibirLivrosNaTela(livros); //Chamar a função de preço sem desconto
}
Nesse arquivo JS fiz uma função para exibir o preço com desconto aplicarDescontoLivros(livros), que é igual a exibirLivrosNaTela(listaDeLivros) que exibe os preços sem desconto. A grande questão é conseguir colocar as duas tags p dentro da
para conseguir alinha-las.
const elementoParaInserirLivros = document.getElementById('livros');
const elementoParaInserirPrecoDesconto = document.getElementById('livros-desconto');
function exibirLivrosNaTela(listaDeLivros) {
listaDeLivros.forEach(livro => {
elementoParaInserirLivros.innerHTML += `
<div class="livro" id="livro">
<img class="livro__imagens" src="${livro.imagem}" alt="${livro.alt}" />
<h2 class="livro__titulo">
${livro.titulo}
</h2>
<p class="livro__descricao">${livro.autor}</p>
<p class="livro__preco" id="preco">${preco.format(livro.preco)}</p>
<div class="tags">
<span class="tag">${livro.categoria}</span>
</div>
</div>
`
})
}
function exibirDescontoLivro(listadeLivrosComDesconto) {
listadeLivrosComDesconto.forEach(livro => {
elementoParaInserirPrecoDesconto.innerHTML += `
<p class="livro__preco" id="preco">${preco.format(livro.preco)}</p> `
})
}
Arquivo JS que tem a função para aplicar desconto
function aplicarDescontoLivros(livros) {
const desconto = 0.10;
let livrosComDesconto = livros.map(livro => {
return {...livro, preco: livro.preco - (livro.preco * desconto)}
})
return livrosComDesconto;
}
