Bookmark Application with JavaScript

admin Javascript, Jquery, miscellaneous 41 Comments

How to create bookmark web application with pure JavaScript.

document.getElementById('myForm').addEventListener('submit',addBookmark);

function addBookmark(e){
    var siteName = document.getElementById('siteName').value;
    var siteUrl = document.getElementById('siteUrl').value;

    var bookmark = {
        name:siteName,
        url:siteUrl
    }
    if(localStorage.getItem('bookmarks') === null){
        var bookmarks = [];
        bookmarks.push(bookmark);
        localStorage.setItem('bookmarks',JSON.stringify(bookmarks))
    }
    else{
        bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
        bookmarks.push(bookmark);
        localStorage.setItem('bookmarks',JSON.stringify(bookmarks))
    }
    fetchBookmarks()
//console.log(bookmark)
    e.preventDefault();
}
function deleteUrl(url){
    console.log(url)
   bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    for(var i =0; i < bookmarks.length; i++){
        if(bookmarks[i].url == url){
            bookmarks.splice(i,1)
        }

    }
    //fetchBookmarks();
    localStorage.setItem('bookmarks',JSON.stringify(bookmarks))
    fetchBookmarks()
}
function fetchBookmarks(){
     bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
     var bookmarksResults = document.getElementById('bookmarksResults');
    bookmarksResults.innerHTML = '';
      for(var i =0; i < bookmarks.length; i++){
         var name = bookmarks[i].name;
         var url = bookmarks[i].url;
         bookmarksResults.innerHTML += '<div class="well">'+
                                '<h3>' + name +'</h3>'+
                                'Visit'+
                                 'Delete'
                           '</div>' 
         ;
         console.log(name)
     }
     //document.getElementById('bookmarksResults').innerHTML = result;
     //console.log(bookmarks)
}

Demo

41 thoughts on “Bookmark Application with JavaScript”

Leave a Reply

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