Este proyecto es una aplicación web sencilla desarrollada con HTML, CSS y JavaScript. El objetivo es permitir a los usuarios agregar productos con nombre, precio y URL de imagen, y mostrarlos dinámicamente en una lista estilo tarjetas. Además, se puede eliminar cada producto individualmente haciendo clic en un ícono.
- HTML
- CSS
- JavaScript
- Agregar Productos: Los usuarios pueden ingresar un nombre, precio y URL de imagen para agregar un producto a la lista.
- Mostrar Productos: Cada producto agregado se muestra como una tarjeta con su nombre, precio y una imagen.
- Eliminar Productos: Se puede eliminar cada producto individualmente haciendo clic en un ícono en la tarjeta del producto.
- Scroll Independiente: Se implementó un scroll independiente para la lista de productos, permitiendo desplazarse dentro de un área específica sin afectar otras partes de la página.
- Validación de Formulario: Se añadió validación básica en el formulario para asegurar que los campos requeridos se completen antes de enviar el producto.
El proyecto está estructurado de la siguiente manera:
index.html: Contiene la estructura del formulario y el contenedor de productos.styles.css: Archivo CSS para estilos adicionales, como diseño de tarjetas, formularios y scroll personalizado.script.js: Archivo JavaScript que maneja la lógica para agregar productos, eliminar productos y otras interacciones dinámicas en la página.
Para probar o utilizar este proyecto, simplemente clona este repositorio y abre index.html en tu navegador web. Asegúrate de tener una conexión a Internet activa para cargar las imágenes de ejemplo.