Modulo di accesso

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 25 di 27.

Sfida

Facile

Crea un modulo di accesso che convalidi le credenziali.

Abbiamo un modulo di accesso con campi per nome utente e password. Il nome utente è precompilato con "admin". Il tuo compito è convalidare la password quando si fa clic sul pulsante di accesso.

Passaggi:

In JavaScript:
- Crea variabili per il campo della password, il pulsante di accesso e l'elemento del messaggio
- Aggiungi un listener per l'evento click al pulsante di accesso
Quando si fa clic sul pulsante di accesso:
- Controlla se la password è uguale a "admin123"
- Se è corretta, mostra: "Logged in successfully!" e imposta la classe del messaggio su "success"
- Se non è corretta, mostra: "Invalid password" e imposta la classe del messaggio su "error"

Provalo tu

<!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>