JavaScript

Bookmarker Application in javascript

Rohan750
Rohan750
19 Min Read

Hello, guys in this project we’re going to be building a website bookmarking application using pure JavaScript. No angular, react no frameworks, not even jQuery. We’re going to be using html5 local storage to store your bookmarks. so that way even if we close out the browser or we come back they’re still going to be there.  It’s very simple we’re also using bootstrap using one of the default templates and basically.

so you can see a demo here Bookmarker Application in javascript

Bookmarker Application in javascript

The first thing we’re going to do is create the UI. This is very simple we’re going to go to get bootstrap and let’s go ahead and just download it. let’s create our folder. so I’m just going to create a folder on my desktop and we’re going to call this bookmarked. Now let’s create an index.html file. that’ll be the only HTML file this is a single page application. Now let’s open up index.html. So if we go to get bootstrap and let’s go to getting started and then examples and we’re going to use narrowJumbotron template. I’m just going to come kind of going through the markup really quick because the main focus of this is JavaScript you guys probably know this if you don’t know HTML or bootstrap I would suggest watching some videos on both.

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Site Bookmarker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body onload="fetchBookmarks()">

    <div class="container">
      <div class="header clearfix">
        <nav>

        </nav>
        <h3 class="text-muted">Bookmarker</h3>
      </div>

      <div class="jumbotron">
        <h2>Bookmark Your Favorite Sites</h2>
        <form id="myForm">
          <div class="form-group">
            <label>Site Name</label>
            <input type="text" class="form-control" id="siteName" placeholder="Website Name">
          </div>

          <div class="form-group">
            <label>Site URL</label>
            <input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

      <div class="row marketing">
        <div class="col-lg-12">
          <div id="bookmarksResults"></div>
        </div>
      </div>

      <footer class="footer">
        <p>&copy; 2016 Bookmarker, Inc.</p>
      </footer>
      
    </div> <!-- /container -->

    <script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Now we’re going to move on to javascript which is the important part. So the first thing I want to do is I want to be able to submit our site to local storage. So we need to have an event on the form on submit. so we want to target the form. so if we look at it it has an ID of my form camelcase so what we can do here is we can say document dot get element by ID and then we can pass in my form. Because we gave it an ID of my form and then what we want to do is we want to add an event listener so we can say dot add an event listener and then that’s going to take in some parameters. That is going to take in the actual event you want to listen for which is going to be a submit. It’s a form so it has a submit and then we want to put in the function that we want to call when that happens which is going to be called save the bookmark. So let’s go ahead and create that so we’ll say function save the bookmark. When we Click it does say it works but it flashes really quick and it goes away the reason. What’s happening is that the form is actually submitting to the page and we don’t want that we want to kind of stop it. So that we can work with it now the way that we do that is when we call this function. We can actually pass in an event parameter and one of the methods that we can use prevents default. Which prevents the default behavior of the form so we can say e dot prevent default. 



// Listen for form submit
document.getElementById('myForm').addEventListener('submit', saveBookmark);

// Save Bookmark
function saveBookmark(e){
  // Prevent form from submitting
  e.preventDefault();
}

Now the next thing we want to do is want to get the values that we pass in. When we put something in here we want to be able to grab these. So let’s just say get form values and we’re gonna say var now I’m just going to use ES 5 here. I’m not going to use let or Const. We’ll declare a var is site name and we’re going to set that to document dot get element by ID. We want to get Sitename because remember that input we created has an ID of Sitename. So we can do is just add and say dot value. So we want to do that for the site name and the site URL so let’s go ahead and put that in their site URL. All right now when we submit to local storage. When we save this we’re going to save it as an array of objects all right. So we want to create an object that we want to get an object ready to submit to local storage. So we’re going to create another variable here called bookmark and we’ll set it to it an object which is formatted in curly braces all right. And then it’s going to have a name which we’ll set to the site name and then a URL which will set to site URL. 



function saveBookmark(e){
  // Get form values
  var siteName =document.getElementById('siteName').value;
  var siteUrl =document.getElementById('siteUrl').value;

 
  var bookmark = {
    name: siteName,
    url: siteUrl
  }
}

So moving on we what we want to do is want to save this bookmark. That we created in local storage but before we do that we have to actually see if there’s a bookmark value there. Because I fit is there then we have to fetch it adds to it and then save it again. So we’re going to put an if statement and we’re going to say if local storage dot gets an item. And we want to check for an item called bookmarks and we want to check to see if that’s null. We want to do a triple equals. so if it’s no then that means that we need to initialize an array so we’ll create an array called bookmarks right. So what we want to do is take this variable and we want to call dot push that’s going to add to the array our bookmark. That’s come that we created with the form values. So we’ll go like that and then finally we want to set to local storage because right now it’s just a local array. So to do that we’ll say local storage dot set item we want to set it as bookmarks. And we have our bookmark that we want to add now our bookmarks now. If we do this is actually an adjacent array we need to save it as a string.

So we’re just going to wrap it in a function called Jason dot stringify. And that’ll actually take our JSON array and turn it into a string before we save it in local storage. Now if we want to add something else we have to do we have to tweak this a little bit. So we’re going to put an else. so this is if there are some bookmarks. Then what do we do first thing we want to fetch it from local storage. So let’s say get bookmarks from local storage we can do that with local storage dot get an item. Let’s see get item bookmarks and we want to put them into a variable. Now, remember it stores strings so this is going to be a string and we don’t want that we want to parse it as Jason. So we want to run it through a function called Jason dot parse. So just remember that JSON dot parser will turn a string into Jason or back into Jason JSON stringify will turn it into a string. So now we have whatever is in that local storage inside this variable so what we want to do is we want to add the bookmark. That we’re submitting to that array alright so say add a bookmark to an array and we do that with bookmarks dot push and bookmark. So we add it to the array and then what we want to do is set it back to local storage alright so we’re going to kind of reset it back to local storage.  



function saveBookmark(e){
  // Get form values
  var siteName =document.getElementById('siteName').value;
  var siteUrl =document.getElementById('siteUrl').value;

 

  var bookmark = {
    name: siteName,
    url: siteUrl
  }

 

  // Test if bookmarks is null
  if(localStorage.getItem('bookmarks') === null){
    // Init array
    var bookmarks = [];
    // Add to array
    bookmarks.push(bookmark);
    // Set to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  } else {
    // Get bookmarks from localStorage
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    // Add bookmark to array
    bookmarks.push(bookmark);
    // Re-set back to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }



  // Prevent form from submitting
  e.preventDefault();
}

The next thing we want to do is we want to be we want to show those bookmarks. Everything that’s in local storage we want to display. So to do that we’re going to create another function so let’s go saves the bookmark. We’ll call this fetch bookmarks. that actually has to have a function keyword all right so to do this let’s see what we want to do is create a variable called bookmarks actually. We want to do the same thing. we’re just fetching it from local storage now remember we have div called bookmarks results. That’s where we want to put them after we fetch them so let’s go back to our fetch bookmarks function. We’ll get rid of that and let’s say ID so we’ll create a variable called bookmarks results set it’s a document dot get element by Bookmarks results. And then what we want to do is build our output so we’ll take that bookmarks to result variable. And we’ll say dot inner HTML equals nothing now and then what we want to do is loop through the bookmarks. Those are in local storage and then output them one by one inside of a div. So we’re going to use it for loop. we’re going to save var I Equals 0. And I’m going to say as long as I as less than bookmarks dot length okay so the number of bookmarks. which in our case right now is two and then we want to I plus we want to increment it after each time. And then in here let’s create a variable called name and we can get that with bookmarks we want the current iteration.

So we’re going to put I and then dot name. Then we want the URL bookmarks I dot URL. So now we have the name and URL for each bookmark. Now we’re going to build the output so we’re going to say bookmark results dot inner HTML. Now this time we’re appending to it alright if you wanted to put a div or something here you could and you could append to it by doing plus equals. So we want to append to it and so we basically want to create a div block. So let’s do div and we’re going to give it a class of well which is a bootstrap class that’ll give us a gray background. And border and some padding and then I want to format nicely. So what we’ll do is go on to it we’ll put a plus sign to concatenate and then we’ll go on to a new line and then. We’re going to have an h3  and then we’re going to concatenate the name plus sign will go on to a new line. We’re going to be put in the buttons or the links inside of the h3 as well all right and then we want to end that well div. So we’ll go on to the next line and put it all alright so let’s try that and there we go good so for the buttons. We’re going to use links and then just format them as buttons with bootstrap. So we want to go under want to go right and put a space and then we’ll say give it a class BTN default. I want it to open in a new window so we’re going to say target equals underscore blank and then. We want our href alright now the href is going to be the URL that’s coming from local storage. So we’re going to put single quotes inside the double quotes and then concatenate the URL. we’ll just say visit okay let’s input a space right there so let’s save it and reload and now we have a visit button if I click that it brings us to the website.  


// Listen for form submit
document.getElementById('myForm').addEventListener('submit', saveBookmark);

// Save Bookmark
function saveBookmark(e){
  // Get form values
  var siteName =document.getElementById('siteName').value;
  var siteUrl =document.getElementById('siteUrl').value;

 
  var bookmark = {
    name: siteName,
    url: siteUrl
  }

 

  // Test if bookmarks is null
  if(localStorage.getItem('bookmarks') === null){
    // Init array
    var bookmarks = [];
    // Add to array
    bookmarks.push(bookmark);
    // Set to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  } else {
    // Get bookmarks from localStorage
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    // Add bookmark to array
    bookmarks.push(bookmark);
    // Re-set back to localStorage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }

  // Clear form
  document.getElementById('myForm').reset();

  // Re-fetch bookmarks
  fetchBookmarks();

  // Prevent form from submitting
  e.preventDefault();
}





// Fetch bookmarks
function fetchBookmarks(){
  // Get bookmarks from localStorage
  var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
  // Get output id
  var bookmarksResults = document.getElementById('bookmarksResults');

  // Build output
  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+
                                  ' <a class="btn btn-default" target="_blank" href="'+addhttp(url)+'">Visit</a> ' +
                                  ' <a onclick="deleteBookmark(''+url+'')" class="btn btn-danger" href="#">Delete</a> ' +
                                  '</h3>'+
                                  '</div>';
  }
}

full source code Bookmarker Application in javascript:

https://github.com/patelrohan750/Bookmarker-Application

watch JavaScript By Building A Bookmarker Application

Share this Article
Previous Article picture matching game using python
Next Article image to streacth Convert Images Into Pencil Sketch Using Python
6 Comments
- Advertisement -
Lost your password?