In this post we will build Bookmark Manager application in JavaScript, we will not use jQuery or any kind of fancy framework.

Key features in our Bookmark Manager

  • Add URL and Site Name.
  • We can visit site or delete existing Bookmark.
  • We will store our data in locally so It will not lost when we will close our browser.

Let’s start,

First we will make layout in HTML :  

onload Event in body has fetchBookmark() function. which we will look later.

We will made a form where we have two input text boxes for Site Name and Site URL respectively and one submit button. Below to form we will put div tag where we will put bookmarks dynamically with the help of javaScript.

We will add Style with the help of CSS:

Right Now,

Our Application looks like this:

See the Pen Dummy Bookmark Manager by Suraj Sharma (@codeparadox) on CodePen.


We will add Vanilla JavaScript Step by Step,

We will grab form by its Id then we will add EventListener in which we will call SaveBukmark function.

In function ,

Now we  will grab our input text boxes ID and will get their values and store them in two variables. now we will make bookmark object where we will assign our site_name and site_url. We are also passing our site_name and site_url to validateForm which we will discuss later.

Next, we are checking if bookmark is already exist or not where we are using localStorage.getItem to get data from session local storage. you can visit documentation for more about localStorage.

if not exist then we are going to create local storage and push our bookmark object to the bookmarks=[ ].

we used JSON stringfy method which converts a JavaScript value to JSON String  and parse method parses a JSON string which constructing the JSON string value. you can visit documentation for more about JSON methods.

We will make fetchBookmark function in which we will grab data from our bookmark storage and will add content in our previous div tag which we left below the form in html file.

That’s not all, We will also make delete function to delete our existing bookmark.

now we will make our form validation function in which we will pass site name and url, In our condition if our input boxes were left empty after submitting it will return false. if not then we will use regex for URL validation. you can get regex expression for URL from google or stack overflow. After that it will check if our URL is valid or not.

Result :

 

See the Pen Bookmark Manager by Suraj Sharma (@codeparadox) on CodePen.

You can visit MY github account for code.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: