Facilitar os códigos da parte cortada

Houve um corte nesta aula, onde não mostrou a separação do "main.js" para mais dois arquivos, o "metodoMap.js" e "metodoForEach.js".

Lembrar de fazer a referência destes arquivos lá no HTML, no finalizinho do body.

<script src="app/main.js"></script>
 <script src="app/metodoForEach.js"></script>
 <script src="app/metodoMap.js"></script>

Após criar estes dois arquivos js na pasta "app", os códigos ficaram assim:

main.js

let livros = []; 

const endpointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';

getBuscarLivrosDaAPI();

async function getBuscarLivrosDaAPI() {
    const res = await fetch(endpointDaAPI);
    livros = await res.json();
    let livrosComDesconto = aplicarDesconto(livros);

    exibirLivrosNaTela(livrosComDesconto);
}

metodoMap.js

function aplicarDesconto(livros){
    const desconto = 0.3;
    livrosComDesconto = livros.map(livro =>{


        return {...livro, preco: livro.preco - (livro.preco * desconto)};

    })
    return livrosComDesconto;

}

metodoForEach.js

const elementoparaInserirLivros = document.getElementById('livros');

function exibirLivrosNaTela (listaDeLivros){
    listaDeLivros.forEach(livro => {
        elementoparaInserirLivros.innerHTML += `
            <div class="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">${livro.preco.toFixed(2)}</p>
            <div class="tags">
            <span class="tag">${livro.categoria}</span>
            </div>
        </div>

        `
    });
}