Formulario de inicio de sesión

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 25 de 27.

Desafío

Fácil

Crea un formulario de inicio de sesión que valide las credenciales.

Tenemos un formulario de inicio de sesión con campos de nombre de usuario y contraseña. El nombre de usuario está pre rellenado como "admin". Tu tarea es validar la contraseña cuando se haga clic en el botón de inicio de sesión.

Pasos:

En JavaScript:
- Crea variables para la entrada de contraseña, el botón de inicio de sesión y el elemento de mensaje
- Añade un detector de eventos de clic al botón de inicio de sesión
Cuando se haga clic en el botón de inicio de sesión:
- Comprueba si la contraseña es igual a "admin123"
- Si es correcta, muestra: "Logged in successfully!" y establece la clase del mensaje en "success"
- Si es incorrecta, muestra: "Invalid password" y establece la clase del mensaje en "error"

Pruébalo tú mismo

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