Unión entre los elementos desktop-menu, mobile-menu y product-detail #2203
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e fonts. Se modifica la etiqueta title a YardSale | Tienda Online. Se registra la clase inactive encargada de no mostrar la clase desktop-menu, mobile-menu y en shoppingCartContainer. Se crean dos etiquetas aside, una con id: shoppingCartContainer y la otra con id: productDetail
…usadas en todo el proyecto, al igual que la etiqueta body con datos predeterminados para igual fin. Se crea la clase inactive. Se crean todos los estilos de las clases de la navbar. Se crean todos los estilos de las clases de desktop-menu. Se crean todos los estilos de las clases de mobile-menu. Se reemplazan las clases product.detail creadas inicialmente por la etiqueta aside. Se crean todos los estilos de la clase con id: shoppingCart. Se crean todos los estilos de las clases de product-detail registrando que pertenecen puntualmente al id: productDetail en los estilos de las clases product-info. Se crean todos los estilos de las clases de cards-container registrando que pertenecen puntualmente a la clsae product-card en los estilos de las clases product-info. Se registran los media query necesarios
…ndoles como valor document.querySelector() para la accion de mostrar el elemento de la clase desktop-menu. Lo mismo se realiza para las acciones de mostrar el elemento de las clases mobile-menu, product-detail. Se crea variable cardsContainer para la estructura HTML que se está creando desde JS. Se crean los metodos addEventListener para la accion de los click. Se crean las tres funciones para ordenar las acciones de los click cuando se realicen en el carrito de compras, menu hamburguesa en la version mobile, menu en version escritorio y cuando se de click en los detalles del producto. Se crea variable array para listado de productos. Se crea ciclo for para la creacion del codigo HTML de la clase main-container en JS
…na opcion de realizacion, ya no son necesarias
… para que el menu en version mobile ocupe el 100% del tamaño de la pantalla cuando sea abierto
…cto y otra para cerrarla desde la X. Se crea el evento de addEventListener para cerrar el detalle del producto cuando se de click en la X. Se crean dos funciones que abriran y cerraran el detalle del producto y dentro de estas, sus interacciones con el menu de escritorio y el carrito de compras. Se llama a la funcion closeProductDetailAside() dentro de las funciones del menu de escritorio y del mobile menu
|
Colaboración en Github Pages: https://guilevasa.github.io/Fork-to-curso-frontend-developer-practico/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Se realizan las uniones entre los elementos mencionados en el título, elaborando su funcionamiento de tal manera, cuando se abra el carrito de compras y se desee abrir el menú en la versión de escritorio, se cierre automáticamente el carrito de compras, y lo mismo si se elige abrir el detalle del producto, se cierre el carrito de compras. Esta misma interactividad entre estos elementos se desarrolló para la versión mobile.