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
Original source
46 responses to “Learn JavaScript By Building A Bookmarker Application”
Thanks a lot, Brad. With this, I got an idea on using the same functionalities to make something else. You really do good work.
Anyone having problem with storing the 2nd bookmark and it showing up in local storage. Why did you use the same variable name in then else condition, this has thrown me off?
Thank you!
Hi Brad. Thanx for all the great videos keep up the good work. Can you please make a series with vue.js 2 and firebase app if you don't mind.
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.
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!
Hi +Traversy Media
How does this escape character work here?
deleteBookmarks(''+url+'')
Hi, can anyone explain to me why we have to use "http://" as opposed to just writing the shorthand form of a website. e.g.
"google.com?" Thanks.
This was brilliant!
This is a criminally underrated youtube channel!
Awersome, I see your meteors course, and now I find you in you tube, great instructor
I've just watched this video and the one about a movie app using an API. You've earned a new sub, my friend.
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
Hi, Thank you for great lessons on your channel very useful, I want to ask to made a video, how to create a chat with JavaScript?
point blank on the point…
Its really awesome video. Thank you so much Brad! But i got an small problem here when i click to visit button it goes to:
file:///C:/Users/dell.000/Desktop/Bookmarker/http://www.google.com this link though i have set http://www.google.com to url. when i print url in console it prints only http://www.google.com but visit button does not work. Please help me Brad. Thank you so much 🙂
Hi. How could I insert a .txt file like you did? There is no .txt option for me.
thanks ;D
nicee work,man…simple & elegant
I have learned to much with this video thanks oh and Excellent tutorial Brad.
Your channel is the best, i found important info about web development.
Thanks for this awesome tutorial. Please make some more project based tutorial using pure JavaScript
wonderful tutorial !!!!!!! the way you teach and clarify the things is awesome ! I learnt a lot…. thanks for making such tutorials.
thanks a lot for the tutorial.. it's awesome job!
Well it didn't work since the it works line of code…
Love the straight forward approach. This is the best web development channel. Other videos makes you sit through the HTML/CSS.
Keep up the great work!!!
These kind of examples are great, particularly for new developers like myself. We are often missing a context in which to put things into practice but you provide that with these kind of examples so thank you.
Hey Brad , your tutorial really great i'm your eduonix student
Im getting a error saying Cannot read property push at line 35 of the main.js file wich is adding the bookmark to array im still trying to find the cause of the error but stil no luck
This is great! Do you have a Bootcamp or online course where you could learn by projects? but the project is what the student needs or wants to accomplish? I would certainly pay and sign up for something like that! (btw, I have done your Udemy course on MEAN Stack, well done great course)
Another awesome tutorial! You cover so much in so little time, yet so clear and concise. Great work.
Hi,I love your tutorial. Why there is always a fault "Uncaught TypeError: Cannot read property 'length' of null in js:81".The bookmarks is already been parse to JSON. Thanks.
Thank you so much. I learned so much from watching this video. I appreciate you taking the time to explain things so thoroughly. One of the best online teachers A+++
oh how I wished there were more people like you that kind of dive into the deep end. thank you. Absolutely loved this tutorial.
Hi, I keep getting this eror: Uncaught SyntaxError: Unexpected token # in JSON at position 49
at JSON.parse (<anonymous>)
at HTMLFormElement.saveBookmark (main.js:34)
if you bookmark more than 3 url and you push the delete button , it will delete 2 url's in the same time ! thank's for the tutt is awesome !
if i copy paste code from zip file it work fine…but if exact same code are typed along with your videos it doesn't respond in some places or in some cases it responds unnecessarily and there is nothing wrong with code …what's wrong with my laptop..?? plz help..
Very good channel Brad! I am from Brazil and you teach so much better than my teachers of the university here.
Humm…lol this video: https://www.youtube.com/watch?v=NYq9J-Eur9U is pretty much a copy of this tutorial but remixed into an 'Issue Tracker' — some of the lines are the same code verbatim
thank you so much for this great tutorial. This is one of the best that I have ever seen on youtube channels. Thank you! Please keep uploading more.
Mmm, although JSON array does not exist as such, it seems to work with JSON.stringify. It does the trick to store the value in localStorage. I would have used another object instead of an Array. Thanks for your video and effort, Brad. I truly think your demos are very good. Very practical and interesting.
Hi there my program wont add the second entry to the array in the else statement. I get a push error of uncaught type error and im really not sure what ive done wrong as ive followed along with the video. line 35 is whats causing the error in my program
Why the title of this video is "Learn javascript …"? This is more like "Create a bookmark …".
this is my delete function:
function deleteItem(index) {
var bookmarks = [];
bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
if (bookmarks[index] !== -1) {
bookmarks.splice(index, 1);
}
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
and the button which passes the array index instead of url
for (var i = 0; i < stored_bookmarks.length; i++) {
tag.innerHTML += '<a class="button" href="' + url + '"> View </a>' +
'<a class="button is-danger" onclick=deleteItem(' + i + ')> Delete </a>';
}
BTW thanks man!
As a beginner, your videos are amazing and it helps me through this kind of preparation for being a Web Developer. After I learn these tutorials. Soon I'll be the one to contribute and help others how to develop a website. Thank you!
Hello. I think you could be a very important tutor in javascript, going forward into 2017-2018. You have the experience, you have the style of teaching that resonates with "IT people" and the sympathy to explain the basics to the uninformed or a veteran who might benefit from your viewpoint on it. Either way, you want to look at it – you are doing good, so I encourage you to continue 🙂
bookmarks.push is not a function, anyone else getting this error?
I'm loving this channel