Previous Article Next Article Learn JavaScript By Building A Bookmarker Application
Posted in JavaScript

Learn JavaScript By Building A Bookmarker Application

Learn JavaScript By Building A Bookmarker Application Posted on June 23, 201750 Comments



In this video we will build an application for storing website urls using nothing but pure JavaScript. No jQuery or frameworks, just plain old JavaScript. We will use Local Storage to store the bookmarks

CODE – https://github.com/bradtraversy/bookmarker

JAVASCRIPT/JQUERY COURSE – http://www.traversymedia.com/course/learn-projects-in-javascript-and-jquery/

SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

50 comments

  1. I just read on localStorage, it seems that there's storage limit that depends on each browser. Nonetheless, this is a good refresher. Thanks a lot!

  2. The description literally states that you are using "nothing but pure Javascript" yet literally in the first 5 minutes of the video you begin with Bootstrap. What a joke.

  3. As a beginner JS programmer, I found your tutorial video to be extremely helpful!!.. But one thing I don't understand.. why did you use the same variable name again & again??.. Like using the var name "bookmark/bookmarks" & "url" so many times..?!? Was it necessary on the codes??.. Excuse my ignorance!!..

  4. thanks for the video, moreover i am ettin this error when doin the test min 12 :Uncaught TypeError: Cannot read property 'addEventListener' of null can anyone help please

  5. Great tutorial! I'm a big fan of your courses on udemy and have purchased/completed a few of them. Another option to using regular expressions is the built in startsWith() function in javascript. I'm not sure if it was in es5 though, as you mentioned at the outset you were using standard es5. You can rewrite the function as:

    if(!siteUrl.startsWith("http://")){
    return false;
    }

    or, if you want to insert it, you could add it as part of the function:

    siteUrl = "http://" + siteUrl;

    and save the user the hassle of re-writing the url. I hope this makes sense from a development point of view.

  6. Can ANYONE please help. I'm getting the error "Uncaught SyntaxError: Unexpected end of JSON input". It's saying the issue is in the function fetchBookmarks, so that function is bad in main.js and when I try to use it in index.html. Can someone please give me some advice, I am really interested in finishing this project.

  7. i am getting an error in the console: fetchBookmarks is not defined
    my js file is:
    //listener for form submit
    document.getElementById('myform').addEventListener('submit',savebookmark);
    //function savebookmark
    function savebookmark(e)
    { //var for holding sitename and siteurl
    var siteName=document.getElementById('sitename').value;
    var siteUrl=document.getElementById('siteurl').value;
    var bookmark={
    name:siteName,
    url:siteUrl
    }
    /*
    localStorage.setItem('test', 'hello world!!');
    console.log(localStorage.getItem('test'));
    localStorage.removeItem('test');
    console.log(localStorage.getItem('test'));
    */
    //test if bookmark 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 array
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    //add bookmarks to array
    bookmarks.push(bookmark);
    //back to local storage
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));

    }

    function fetchBookmarks(){
    // Get bookmarks from localStorage
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
    console.log(bookmarks);
    }

    //prevent from from submitting
    e.preventDefault();
    }

  8. @24:00, you should avoid putting repetitive code inside blocks, it would be better written like this:

    let bookmarks = localStorage.getItem('bookmarks');
    bookmarks = bookmarks ? JSON.parse(bookmarks) : [];

    bookmarks.push(bookmark);
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));

  9. I got really hung up on the min.css since there is a literal file named min.css. If anyones copy isn't showing like his, that is possibly why! Everyone use the min file that has a .css extension.

  10. pls don't make videos anymore. because your videos so good and simple so in a few years we as a developers will can't find job. any monkey can write in a JS after your videos.
    P.S. wow!

  11. You're tutorials are very clear and to the point. Very basic so I can easily understand. Just a quick thing that I wanted to ask. If you were to write that script in an object oriented way, how can we do it? Please can you show a sample of that code written in object oriented style

Leave a Reply

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