Haga lo que hcimos en aula | Aprendizaje con IA: personalizando tu rutina con ChatGPT | Alura Latam

Objetivo General
Comprender y aplicar conceptos técnicos del desarrollo Front-End mediante la creación de un prototipo interactivo basado en un caso real del entorno laboral.

Caso Práctico: Desarrollador/a Junior Front-End en una empresa de servicios
Contexto:
Trabajas como Desarrollador/a Junior Front-End en una empresa que ofrece soluciones digitales para pequeñas empresas. El equipo de diseño ha entregado un boceto en Figma para una página de inicio de sesión de clientes. Tu tarea es convertir ese diseño en una interfaz funcional usando tecnologías básicas de Front-End.

Prototipo Interactivo a Desarrollar: Página de Inicio de Sesión (Login)
Requisitos técnicos:
HTML: estructura de la página con campos de usuario y contraseña.

CSS: estilos para el formulario, botones, colores institucionales.

JavaScript: validación básica de campos (que no estén vacíos, y que la contraseña tenga al menos 6 caracteres).

Opcional: guardar el usuario en localStorage si se marca “Recordarme”.

Tareas a realizar:
Crear una carpeta de proyecto con archivos index.html, style.css y script.js.

Construir el formulario con campos para correo electrónico y contraseña.

Estilizar la interfaz usando Flexbox para centrar el formulario.

Programar la validación en JavaScript al hacer clic en “Iniciar sesión”.

Probar distintos casos reales, como dejar campos vacíos, contraseña corta, etc.

(Opcional avanzado): mostrar un mensaje de bienvenida con el nombre del usuario tras iniciar sesión correctamente.

Resultado Esperado
Un prototipo funcional y visualmente presentable de una página de inicio de sesión, que simule el proceso de autenticación de un sistema real. Esto permite aplicar conocimientos técnicos concretos y ganar experiencia práctica como lo harías en un entorno profesional.

Plazo estimado de ejecución del prototipo
4 días hábiles, distribuidos así:

Día Actividad
1 Crear estructura HTML y CSS básica
2 Agregar validaciones con JavaScript
3 Revisar errores y probar distintos casos
4 Mejoras visuales + validación final del prototipo

Hola Mariana, espero que estés bien

Parece que estás trabajando en un proyecto de desarrollo Front-End y necesitas orientación sobre cómo proceder. Aunque tu pregunta menciona "Haga lo que hicimos en aula", el contexto que compartiste parece estar más relacionado con la creación de un prototipo interactivo para una página de inicio de sesión. Aquí te dejo algunos pasos prácticos que podrían ayudarte a avanzar en tu proyecto:

Estructura HTML: Comienza creando un archivo index.html y define la estructura básica de tu formulario. Asegúrate de incluir campos para el correo electrónico y la contraseña.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Página de Inicio de Sesión</title>
</head>
<body>
    <div class="login-container">
        <form id="login-form">
            <label for="email">Correo Electrónico:</label>
            <input type="email" id="email" required>
            <label for="password">Contraseña:</label>
            <input type="password" id="password" required>
            <button type="submit">Iniciar sesión</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

Estilos CSS: En tu archivo style.css, utiliza Flexbox para centrar el formulario y aplica los estilos necesarios.

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.login-container {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label, input, button {
    margin: 5px 0;
}

Validación JavaScript: Implementa la validación de los campos en tu archivo script.js.

document.getElementById('login-form').addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!email || !password) {
        alert('Por favor, complete todos los campos.');
        return;
    }

    if (password.length < 6) {
        alert('La contraseña debe tener al menos 6 caracteres.');
        return;
    }

    alert('Inicio de sesión exitoso');
});

Espero que estos pasos te ayuden a avanzar en tu proyecto. ¡Bons estudios!