Git Product home page Git Product logo

curso-frontend-javascript-practico_correcciones's Introduction

Detalles del proyecto

Se agregaron los archivos index.html, style.css e index.js, para fusionar algunos de los componentes de la vista principal.

Archivos y componentes fusionados:

  • clase11.html (menu general)
  • clase7.html (menu desktop)
  • clase8.html (menu mobile)
  • clase13.html (carrito de compras)
  • clase6.html (lista de productos)
  • clase12.html (detalle del producto)

Gracias a la fusión, los usuarios pueden utilizar el menú de navegación con todos sus componentes. Funciona en mobile, desktop, con el carrito de compras y los detalles de un producto; además de renderizar la lista de productos a partir de un array (hardcodeado). El contador de artículos funciona de manera interactiva, tanto para agregar como quitar productos de la lista de compra. En la lista de compra se pueden eliminar productos oprimiendo el botón rojo, y además, remueve precio del producto eliminado del total de la compra. Los detalles del producto cambia conforme se selecciona cada producto.

Todos los componentes se probaron individualmente y en conjunto, para que los usuarios tengan una buena experiencia. :)

Quedan algunos issues con el botón de compra de los detalles del producto, se duplica al presionarse más de una vez y junta los botones de otros artículos ·-·.

Demo en: https://natsumychan.github.io/curso-frontend-javascript-practico/


Correcciones Javascript

URL Corrección

https://carlosmperilla.github.io/curso-frontend-javascript-practico_Correcciones/

Botones que se repiten

Se verifica en el evento de la imagen (productImg) que no existan botones primarios en el estado de la tarjeta de detalles. Si existen se remueven.

El botón principal de detalles no se elimina, se deshabilita

Se creó una clase en CSS para desactivar el botón. Pueden desactivarse los estilos en línea, pero es más ordenado hacerlo por medio de clases. Asignamos la función del botón primario de detalles a una variable anónima, para nombrarla y poder remover el evento. Removemos el evento y añadimos la clase creada dentro de esta función.

Flecha del carrito no cierra el panel

Se creó una nueva constante para este elemento y se le añadió un evento al ser cliqueado. 

No se cierra el panel de correo en Modo Desktop

Dada la lógica de la página al abrir el carrito debería cerrarse este panel. En toggleAside se le añadió la clase "inactive" a desktopMenu.

Posibles correcciones Javascript

  • La lista de productos se podría leer de un archivo JSON, esto es más cercano a lo que se haría en la realidad, se puede guardar el JSON en un archivo y leerlo desde la URL del mismo.
  • En las funciones se pueden poner todas las constantes al inicio y luego las acciones al final, siguiendo una lógica por ejemplo:
      Constantes $\rightarrow$ Cambio de atributos $\rightarrow$ Añadir o remover clases $\rightarrow$ Luego añadir nodos $\rightarrow$ Luego añadir eventos.
    Por ejemplo. Puede ser otro orden, pero mientras tenga coherencia se puede leer con más facilidad y depurar errores más fácilmente.
  • Modularizar las funciones anónimas en funciones separadas, si están son muy largas (más de 5 líneas)
  • Cambiar pointerDown por click, ya que pointerdown en escritorio también se activa con click derecho y click medio, lo cual no genera una buena experiencia.

Ejercicio interesante Javascript

Darle funcionalidad al tab, para dar mayor accesibilidad por medio del teclado, dándole estilos al focus, con el atributo tabindex y con javascript.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.