livraria.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>Sobre Livros</title>
    <link rel="stylesheet" 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>Cadastro Usuário</h1>
    <form id="cadastroForm">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome"><br><br>

        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email"><br><br>

        <label for="senha">Senha:</label>
        <input type="password" id="senha" name="senha"><br><br>

        <p id="genero">Qual seu gênero preferido?</p>
        <div class="texto">
        <input type="radio" name="genero" value="romance">Romance <br>
        <input type="radio" name="genero" value="terror">Terror <br>
        <input type="radio" name="genero" value="suspense">Suspense <br>
        <input type="radio" name="genero" value="conto">Conto <br>
        <input type="radio" name="genero" value="poema">Poema <br>
        <input type="radio" name="genero" value="cronica">Crônica <br>
        </div>

        <button type="button" onclick="cadastrarUsuario()">Cadastrar</button>
    </form>

        <div id="mensagem"></div>

        <script>
            function cadastrarUsuario(){
                var nome = document.getElementById("nome").value;
                var email = document.getElementById("email").value;
                var senha = document.getElementById("senha").value;
            
            if (nome === "" || email ==="" || senha ==="") {
                document.getElementById("mensagem").innerHTML= "Por favor, preencha todos os campos."
                return;
            }
    
        var usuario = {
            nome: nome,
            email: email,
            senha: senha
        };
    
        console.log("Usuário cadastrado: ", usuario);
    
        document.getElementById("cadastroForm").reset();
        document.getElementById("mensagem").innerHTML= "Cadastro realizado com sucesso";
        }
        </script>
</body>
</html>