Página para la ultima entrega del proyecto final "JavaScript - coderhouse"; Ahora comenzamos a usar asincronía, promesas y con lo que ya veníamos trabajando, eventos arreglos JSON, objetos y storage.
- 1) menú hamburguesa, usando eventos clic y añadiendo una clase al se añadio un menú desplegable.
- 2) todas las tarjetas se trae desde los arreglos de objetos, tanto las imágenes,los precios, los títulos y las descripciones. Tambien estructuras completas.
- 3) Modal funcional, donde se mostrara el producto descripción del mismo y se podrá comprar o simularemos al menos eso.
- 4) eventos clic para rotar las tarjetas( realmente no las roto, solo les cambio las clases y cambio la visibilidad de la img.)
- 5) al cliquear sobre el icono de carrito dentro de la tarjeta, se añade el producto a la lista de compra ("al carrito")
- 6) Carrito de compra, se genera dinámicamente desde el archivo js, en el mismo se visualizan los productos, si añadimos productos repetidos, no se repiten y no se suma su precio y su contador. se pueden eliminar individualmente, vaciar el carro y comprar (se mostrara una alerta generada con sweet alert2).
- 7) al comprar se añadió un evento para hacer uso de la libreri sweet alert, al no tener productos en el carrito y querer comprar, se mostrara un error, al haber productos, se completara la misma y se vaciara el carrito. x las dudas quedara guardada la compra en el local storage.
- 8) Al cliquear en el carrito para añadir productos, se hace uso de la librería toastify, para mostrar que se a añadido un producto al carrito, si se termina el stock, se bloqueara la tarjeta y se avisara con toastify, el producto esta agotado ("no se sumara al carrito").
- 9) Librería swiperjs para el banner. los elementos del banner se generan automáticamente desde js, solo si el elemento posee el tipo:“banner” que se corresponde con la sección en el documento HTML, lo mismo para los demas elementos traídos desde el JSONdonde el tipo corresponde a una seccion en documento html.
- 10) uso de api {JSON} Placeholder, api fake para realizar pruebas, de la misma capturare una lista de usuarios usando fetch y promesas y los cargare a un array de usuarios, donde iré enviando los usuarios que se van registrando a la pagina.. se que no esta bien hacer uso de una api de esta forma pero es la única forma que se me ocurrió para cumplir esta consigna sin re hacer entero el proyecto.
- 10) Al hacer clic en el elemento usuario en el nav, se abrirá una nueva sección, usando eventos de javascript, en la misma encontrara un formulario para registrarse y login, capturo los datos desde javascrit, usando promesas luego genero un nuevo arreglo de usuario. y se añade a los usuarios previamente ya cargados.
- 11) Todas las secciones dentro del main y el main del footer se generan desde un archivo Json, se usa fetch promesas y llamamos a las funciones que en entregas anteriores ya habíamos realizado.
- 12) El buscador funciona de forma simple, ingrese una palabra clave ("terror, anime, serie tv, los simpsons, futurama, pace maker, game of throne, etc") buscara la palabra dentro del arreglo, alert toastify EXISTE y lo redirigira a la pagina busqueda.html, donde se generaran las tarjetas coincicidentes.
- Loader, al redirigirnos y mientras carga la pagina, se mostrara un loader, solo para que se pueda visualizar se usara un setTimeout de 2s aprox.
Se que el modal no funciona para añadir productos y demas, si alcanzo lo dejare funcional, lo mismos con las tarjetas generales, para que los botones tengan alguna fioncionalidad mas que solo añadir al carrito.. la funcionalidad productos agotados de momento funciona en todos los elementos, pero nose si es la mejor manera.
## 👍 Espero te guste. Espero sea de tu agrado mi web...
Mi contacto