Formulário de Login

Parte da seção JavaScript em Ação 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 já está preenchido como "admin". Sua tarefa é validar a senha quando o botão de login for clicado.

Etapas:

Em JavaScript:
- Crie variáveis para o campo de senha, o botão de login e o elemento de mensagem
- Adicione um listener 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>