Este proyecto es un componente web de "Micro-frontend" diseñado para capturar la satisfacción del cliente y comentarios post-compra. Se caracteriza por ser un archivo único (single-file component) que integra estructura (HTML), estilo (CSS) y lógica (JavaScript).
El objetivo principal es proporcionar una interfaz reactiva donde el ambiente visual cambia según la calificación del usuario, e incluye un sistema de moderación automática de comentarios.
- HTML5: Estructura semántica del contenido.
- CSS3: Diseño visual, variables CSS (Custom Properties), animaciones y diseño responsivo.
- JavaScript (ES6+): Lógica del cliente, manipulación del DOM y manejo de eventos.
- Google Fonts / System Fonts: Uso de la pila de fuentes del sistema (Inter, San Francisco, Segoe UI) para optimizar el rendimiento sin peticiones externas.
El código está contenido en un solo archivo .html para facilitar su portabilidad. A continuación se detallan las tres capas:
El diseño utiliza una arquitectura basada en Variables CSS definida en :root. Esto facilita el mantenimiento y el cambio de temas visuales.
Variables Clave:
:root {
--primary-color: #6366f1; /* Color principal (Botones, slider) */
--card-bg: #ffffff; /* Fondo de la tarjeta */
--shadow-soft: ...; /* Sistema de sombras */
}
Aspectos destacados de UI/UX:
- Transiciones: El body tiene una transición de 0.8s para suavizar el cambio de color de fondo.
- Animaciones: Se usan @keyframes slideUp y fadeIn para dar entrada a los mensajes de respuesta.
- Slider Personalizado: Se sobrescriben los estilos nativos de input[type="range"] para crear una experiencia visual consistente en diferentes navegadores (webkit).
La lógica se centra en dos funcionalidades principales: la reacción visual (cambio de fondo) y el procesamiento de texto (filtro).
El slider tiene un rango de 0 a 2:
- 0: Experiencia Buena (Verde)
- 1: Experiencia Regular (Amarillo)
- 2: Experiencia Mala (Rojo)
Función updateBackground(value):
Recibe el valor del input y mapea el color correspondiente desde un objeto colors. Si el valor no existe, hace fallback al color por defecto.
Para mantener un ambiente seguro, se implementa un filtro de palabras prohibidas del lado del cliente.
Función filtrarTexto(texto):
- Divide el texto en un array de palabras.
- Itera sobre cada palabra limpiando signos de puntuación (.,;:!?¿¡).
- Compara la palabra limpia con el array palabrasProhibidas.
- Si hay coincidencia, reemplaza la palabra con asteriscos (*) manteniendo la longitud original.
- Reconstruye la frase.
Array de configuración:
const palabrasProhibidas = [
'queso', 'huevo', 'leche', 'feo', 'horrible'
];
Para modificar los colores de la interfaz (botones, textos), edita las variables dentro de la etiqueta <style> en la sección :root.
Para modificar los colores de fondo reactivos (semáforo), edita el objeto colors dentro de la función updateBackground en el <script>:
const colors = {
'0': '#NUEVO_COLOR_VERDE',
'1': '#NUEVO_COLOR_AMARILLO',
'2': '#NUEVO_COLOR_ROJO'
};
Simplemente añade las palabras (en minúsculas) al array palabrasProhibidas dentro del bloque <script>:
const palabrasProhibidas = [
'queso',
'huevo',
'leche',
'NUEVA_PALABRA_1',
'NUEVA_PALABRA_2'
];
Actualmente, el botón "Enviar" solo simula el envío. Para conectar con un servidor real, se debe modificar el eventListener del botón sendBtn:
- Eliminar la lógica de visualización inmediata.
- Implementar fetch() o XMLHttpRequest.
- Enviar ratingSlider.value y commentInput.value al endpoint deseado.
Si el proyecto crece, se recomienda separar el código en tres archivos:
- index.html: Solo la estructura.
- styles.css: Todo el contenido de <style>.
- app.js: Todo el contenido de <script>.