Contact List w/ Local Storage
View Online | View Source Code
About this Project
When I was at General Assembly, our second project was to create a contact list. At the time, I remember being overwhelmed by the MVP list. Although I delivered most of what was on that list, I remember thinking I would come back later and redo it. So this is Contact List 2.0 and there was quite a bit of changes.
For starters, the original project had us create a postgreSQL database for for the contact’s information. I have nothing against postgres, its my go-to for databases. But, over the past few weeks, I had wanted to work on a small project that incorporated local storage, a way for web pages to locally store name/key value pairs. That is the simply put definition, but for a more in depth look at local storage, check out Dive Into HTML5’s chapter dedicated to local storage. Also, the original version either showed all the contacts or would break them up into categories(I omitted the categories on this version), but the search feature on this returns all contacts that contain the inputs in the name. Lastly, I played with some jquery animation and toggle functions to display the information.
Challenges
What took me the longest was getting the jquery right. Oftentimes, once I got one feature working, something else would break. Also, I had originally set up the contact information to save in a table format, but the gave me limited options when it came to displaying the info the way I had planned. I also came across times where the code did what I wanted it to do within local storge, but would not change the info on the DOM without a page refresh. So, I had to make sure that what was happening in local storage was being reflected on the DOM. However, I think my biggest challenge DOM traversal. I’ve worked with the DOM in the past, so I was a bit frustrated that I could not get the animation to work on the child elements at first, but after a break and some more careful reading on the subject I was able to get the functions working.
Final Thoughts
I can still see things here and there that I would like to edit, but not sure how to yet… for example all the white space on the search portion of the page, editing the css for the pagination links, and I’ll likely get to those in version 3, but for now I’m happy to have learned how to work with local storage, as well as getting jquery animation working the way I intented it to. It took a little longer than I hoped to get these edits done, but it truly is so much better that the first version, and I can see my personal growth, which deep down was the purpose of revisiting this project.
Resources Used