Lista De Contactos Con localStorage
Ver En Línea | View Source Code
Acerca de Este Proyecto
Cuando estuve en classes en General Assembly, nuestro segundo proyecto era crear una lista de contactos. En ese momento, recuerdo que la lista de entregablesme dejo un poca abrumada. Complete casí todo lo que estaba en esa lista, pero supe que revisitaria este proyecto en el futuro. Así que esto es Lista de Contactos 2.0 con algunos cambios un poco de cambios.
Para empezar, los requisitos del proyecto incuia direciones de crear una base de datos usando PostgreSQL para guargar toda la informacion acerca de nuestos contactos. No tengo nada en contra de postgres, por lo general, es lo que uso para mis proyectos. Pero, queria usar localStorage, que permite acceder al objeto local Storage sin fecha de expiración usando pares de llaves/valors. Eso es una breve explicación de localStorage, pero si deseas leer un poco mas acerca del tema, Dive Into HTML5’s tiene un capitulo dedicado a localStorage. Además, la versión original mostró todos los contactos o separados por categorías (omití las categorías en esta versión), pero la función para búsquar en esta version devuelve todos los contactos que contienen las entradas en el nombre. Finalments, jugué con algunas funciones de jQuery animación jQuery y toggle para mostrar la información final.
Desafíos
Lo que me llevó más tiempo fue la animacion dejQuery . A menudo, cuando una función empezo a trabajar, otra se rompería. Además, originalmente pense que mostrando la información de contactos en una tabla de HTML, pero eso me dio pocas opciones para mostrar la información de la manera la qual había planeado. También me encontré con momentos en los que el código hice lo que quería que hiciera dentro localStorge, pero no cambiaría la información en el DOM sin una actualización de página. Así que tenía que asegurarme de que lo que estaba ocurriendo en localStorafe se reflejaria en el DOM. Pero, creo que mi mayor desafío era atravesar el DOM. He trabajado con el DOM en el pasado, así que estaba un poco frustrado que no pude podia codigar la animación deseada para los elementos padres e hijos. Pero después de un descanso y leer más cuidadiosamente en el tema, finalmente tenia las functionces trabajando.
Pensamientos Finales
Todavía puedo ver las cosas que me gustaría editar, pero todavia no estoy segura cómo… por ejemplo todo el espacio blanco en la párte derecha , la edición del CSS para los enlaces de paginación, cosas que probablemente revisitare versión 3, pero por ahora estoy feliz de haber aprendido a trabajar con el localStorage, la animación jQuery trabajado de la manera que intente. Me tomó un poco más de tiempo de lo que esperaba para con estos cambios, pero realmente esta mucho mejor de la primera versión. Importantements, puedo ver mi crecimiento personal, que en el fondo era el propósito de volver a visitar este proyecto.
Recursos Usado