- Estructura HTML: Se creó la estructura básica del documento HTML utilizando las diversas etiquetas proporcionadas por el lenguaje de marcado, como section, div, button, header, h1, form, fieldset, input, footer, img, entre otras. Estas etiquetas se combinaron para crear una interfaz de usuario intuitiva y funcional.
- Estilos CSS: Los estilos CSS se aplicaron para personalizar la apariencia de la aplicación siguiendo un diseño proporcionado en Figma. Se utilizaron clases previamente definidas en HTML, junto con variables CSS personalizadas, para crear un diseño atractivo y coherente. Se hizo especial énfasis en la responsividad y flexibilidad del diseño para garantizar una experiencia de usuario óptima en diferentes dispositivos y tamaños de pantalla.
- Funcionalidades JavaScript: Se implementaron diversas funciones JavaScript para la interacción dinámica con la aplicación. Estas funciones, desarrolladas como funciones asíncronas, permiten listar los productos existentes, registrar nuevos productos y eliminar productos seleccionados. Para mantener la persistencia de los datos y asegurar la funcionalidad en entornos de desarrollo, se creó una API utilizando un archivo JSON (db.json) y se implementaron funciones de solicitud HTTP utilizando fetch.
- HTML5.
- CSS3.
- JavaScript (ES6+)
- JSON
- GitHub Pages (para la implementación y hospedaje del sitio web)
- Listar Productos: La página mostrará todos los productos actualmente registrados en la base de datos.
- Agregar Producto: Completa el formulario de registro con el nombre, precio e imagen mediante una URL del nuevo producto y haz clic en el botón "Enviar". El producto se agregará automáticamente a la lista después de un breve intervalo de tiempo.
- Eliminar Producto: Haz clic en el ícono de basurero asociado al producto que deseas eliminar. El producto será eliminado de la lista y de la base de datos.