Formulário de Login

Parte da seção JavaScript in Action do Journey de HTML da Coddy. Lição 25 de 27.

Desafio

Fácil

Crie um formulário de login que valide as credenciais.

Temos um formulário de login com campos de nome de usuário e senha. O nome de usuário está pré-preenchido como "admin". Seu trabalho é validar a senha quando o botão de login for clicado.

Passos:

Em JavaScript:
- Crie variáveis para o input de senha, o botão de login e o elemento de mensagem
- Adicione um ouvinte de evento de clique ao botão de login
Quando o botão de login for clicado:
- Verifique se a senha é igual a "admin123"
- Se estiver correta, exiba: "Logged in successfully!" e defina a classe da mensagem como "success"
- Se estiver incorreta, exiba: "Invalid password" e defina a classe da mensagem como "error"

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" value="admin" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" placeholder="Enter password">
            </div>
            <button type="button" id="loginBtn">Login</button>
            <p id="loginMsg"></p>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>