vanillaJS Contact Book - Feedback / Reviews please

Hey Guys, I designed a simple contact book with HTML, CSS and vanilla JS. It’s part of a learning process I currently am in. Please check it out and give feedback, would be highly appreciated.

Link here: https://codepen.io/supercede/pen/ymOxYQ

1 Like

It looks good and functions well.
I noticed local storage. Does that mean if the user deletes all of their browser’s history, the contacts will be deleted?

1 Like

@d3st1ny Nice looking project!
Here is my feedback.

  • The search field gets squished in mobile view. I recommend having it drop below the
    ‘Contact Book’ text.
  • Using special characters in the phone number field such as this 234-234-2424 causes the field to not validate. Let the users know they cannot use those characters or parse the input for special characters.
  • Widen the “contact tiles” in mobile view so the buttons do not stack on top of each other. (image at 380px width)

contacts

  • I suggest not having a list saying “White female”, “Black female”, “Brown female”, etc. Some people do not fit into any of those categories or even want to be placed in categories such as those. Have it select a random image of geometric shapes or a plain silhouette of a gender neutral person would be a much, much better idea.
2 Likes

If the user deletes browser history AND clears cookies.

Noted, I’ll work on those

Looks good for me! Very nice!

1 Like

Okay, thanks.
I think that local storage should never be thought of as a permanent storage solution. If this were a production app, perhaps some kind of warning that tells users their contacts will be removed on history clearance would be useful, especially as many people probably clear their browsing data regularly.
Have you considered creating a database version?

“It’s one thing to code for different browsers, but its another thing to code for different users” (Lee Saunders, 2019).

1 Like

I don’t know who said anything about that. This project serves more as a frontend example. A database is superfluous. A feature to export the local storage object so the user can save it themselves is a good idea though. You could alert it, or create a modal window that contains the entire string. User can copy and save to a txt file to import back into the app later.

2 Likes

I realise it is an example.
Assuming you mean the part about local storage not being thought of as permanent; as it is the only storage method, it is probably being relied upon as a permanent method to contain the list of contacts.

The modal idea is nice. When would a txt file become inefficient? I’m not sure, which is why I suggested a database.

1 Like

Yeah, I know local storage is not the best idea for storing sensitive information like contacts but it’s just me trying my hand at vanilla JS projects. I don’t know how to use databases yet, I was thinking about learning a JS framework, should I go go ahead and learn one - most probably react or should I first learn about using databases? Right now HTML, CSS and JS are the only skills I have

This sounds interesting but I really don’t know how to go about this, How do I export local storage objects?

I think you’re doing well. I’m not great at JS at the moment, and you have created more functionality than I can. All I can say is what I think may be things to consider in the development of the app. Of course, it’s up to you what to add or not. I cannot say what you should learn next. If you’re more into front end, get good at that first. Maybe it’s your d3st1ny. :slight_smile:

1 Like

I wouldn’t worry about all that at all. Though I’m not against databases, I felt it would send you down the wrong path. It felt like suggesting anyone who made a meal would have to make one suitable to be served at a restaurant. I might just want to eat bread with a slice of cheese if it gets the job done. :analogy-end:

A database is the de-facto long-term solution when you have a persistent app that uses that data. But consider this, incorporating database storage brings more complexity. You have to handle security and authentication when querying the database, you have to maintain another language to query the database (php?), you have to maintain your server, etc, etc.

You’ve done well enough IMO, using localStorage sooner than I ever did. I quite like local storage, it brings power to such projects as yours, and a few similar one shot tools I have made for myself.

I wouldn’t get distracted thinking a database, or frontend frameworks like react are are substitution for what you’ve done here. They may exist down other paths you want to take, but they are not the ‘right’ path, and you went down the wrong path. I made that mistake. I rewrote an app I was working on in node, incorporated a document based database (mongoose) thinking all of this would make it work better; Though it did afford me a new opportunity to begin thinking about state management a new way. Well I began to realize, I don’t like having to have a server running for my projects to work. So now I’m starting to use Vue that lets me build frontend frameworks and continue to build standalone tools like this.

I’d be more impressed if I saw this thing you made so well designed I a user could easily enough use whatever storage means I wanted to make it work, which would be done by capturing the necessary data OOP style, or in global identifiers.

1 Like

Exporting your data should be easy since you’re going the right path and storing a single stringified json object you just want to print the json string to the user.

  alert(localStorage.getItem("contactsList"))

Example:

1 Like

Lol… Thanks :smile:

Seen. Thanks for the addition