index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livraria Online</title>
    <link rel="stylesheet" type="text/css" href="livros.css">
</head>
<body>
    <header>
        <div class="cabeca"> 
        <nav>
            <ul>
                <li><a href="index.html">Página Principal</a></li>
                <li><a href="livraria.html">Cadastrar Usuário</a></li>
                <li><a href="cadastroLivro.html">Cadastrar Livro</a></li>
            </ul>
        </nav>
        </div>
    </header>
    <h1>Bem-vindo à Livraria Online</h1>
    <p>Insira o valor total da sua compra:</p>
    <input type="number" id="valorCompra" placeholder="Insira o valor em R$">
    <button onclick="calcularDesconto()">Calcular Desconto</button>
    <p>Desconto aplicado: <span id="desconto"></span></p>
    <form>
        Defina seu nível de satisfação:<br>
        Pouco satisfeito
        <input type="range" name="satisfacao" min="0" max="10">
        Muito satisfeito
        <br>
    <main>
        <ul class="produtos">
            <li>
                <img src="livro1.jpg" id="livros">
            </li>
            <li>
                <img src="livro2.jpg" id="livros">
            </li>
            <li>
                <img src="livro3.jpg" id="livros">
            </li>
        </ul>
    </main>
    <input type="button" value="Clique Aqui" onclick="msg()">
    <script>
        function msg() {
                alert("Você clicou no botão!");
            }

        function calcularDesconto() {
            const valorCompra = parseFloat(document.getElementById('valorCompra').value);

            let desconto = 0;

            if(valorCompra > 200) {
                desconto = 0.2; // 20%
            } else if (valorCompra > 100) {
                desconto = 0.1; // 10%
            }else if (valorCompra <= 100) {
                desconto = 0.05; // 5%
            }

            const valorDesconto = valorCompra * desconto;
            document.getElementById('desconto').textContent = `R$ ${valorDesconto.toFixed(2)}`;
        }
    </script>
</body>
</html>