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>