Formulario de inicio de sesión

Parte de la sección JavaScript in Action 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-completado 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
- Agrega un escuchador 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:
- Verifica si la contraseña es igual a "admin123"
- Si es correcta, muestra: "Logged in successfully!" y establece la clase del mensaje como "success"
- Si es incorrecta, muestra: "Invalid password" y establece la clase del mensaje como "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>