Learn JavaScript By Building A Bookmarker Application

hey guys in this tutorial we're going to be building a website bookmarking application using pure JavaScript okay no angular react no frame works not even jQuery you guys have been asking for something like this using purely JavaScript so I figured this would be a good example alright so we're going to be using html5 local storage to store our bookmarks okay so that way even if we close out the browser or we come back they're still going to be there all right so very simple we're also using bootstrap using one of the default templates and basically all we have to do is put in a name and actually let me just show you for us we have a little bit of validation if we try to submit this it's going to say please fill in the form all right now if we put in a name and then we put something that's not a URL and submit please use a valid URL all right so let's do HTTP twitter.com and submit and you'll see that gets added alright and if I reload it's still there even if I were to exit out of the browser and come back it's still going to be there all right we can actually see if we go to our google chrome tools and go to application local storage file you can see we have a bookmarks key and we're storing a string app our string of adjacent object array that has all the bookmarks all right so it's going to be pretty simple if you are very fluent in JavaScript then you this will be very easy for you if not I'm going to try to explain it as best as I can I'm going to really put I'm going to put a lot of comments in the code for you guys we're going to be working with different parts of JavaScript as far as functions and events listening for events things like that local storage of course and then we can choose to visit one of these links okay that will bring us to the site and a new tab and we can also delete okay we can delete them and if I reload they're gone all right so that's what we'll be building first thing we're going to do is create the UI here which is very simple well we're going to go to get bootstrap and let's go ahead and just download it which I've already done quite a few times and let's create our folder okay so I'm just going to create a folder on my desktop and we're going to call this book marker okay let's create let's create an index.html file okay that'll be the only HTML file this is a single page application and then let's open up the bootstrap zip file okay we're going to bring over all of these folders and let's clean it up a little bit in the CSS all we want is bootstrap let's use bootstrap mndot CSS so that's the only one we want we can delete the rest all right and then in j/s we just want bootstrap minjae s okay so that's that now let's open up index.html I'm going to use Adam for my text editor but you of course you can use whatever you'd like I'm going to open that folder as a project let's see it's on my desktop bookmarker alright so if we go to get bootstrap and let's go to getting started and then examples and we're going to use this right here this narrow Jumbotron template so if we click on that it'll open it up and what we want to do is just do a control you we're going to grab all the source for that copy it and paste it in our index file alright so let's go up to the top here and just kind of work our way down all right so we want this stuff we can delete this comment down to here if we don't need that and let's change the title will say site bookmarker now for the link to the bootstrap min CSS we just want to get rid of this disc right here okay it should just be CSS slash bootstrap dot min and then we can delete the rest of the stuff that's in the head okay just make this really simple and let's see as far as the markup this is a single page application so we don't need the nav so let's get rid of the UL right here get rid of that project name we'll change that to bookmarker okay um let's see Jumbotron heading let's actually let's actually make this an h2 and we'll say bookmark your favorite sites okay I'm just going to come kind of going through the markup really quick because the the main focus of this is the JavaScript you guys probably know this if you don't know HTML or bootstrap I would suggest watching some of my recent videos on both I have an HTML 5 web site video and also a couple new bootstrap videos alright so in here let's get rid of those paragraphs and we're going to put a form okay so we'll say form and we're going to give it an ID let's just call it my form and inside here let's put a div with a class of form group okay and inside here we'll put a label this will be the site name and then we'll put an input give it a type of text and let's give it a class of form control so that it goes across the whole element we also want to give it an ID I'm going to give it an ID of site name and we'll give it a placeholder and we'll just say enter let's go just say website name okay so that's our first input let's copy that form group div paste it underneath and this one is going to be the site URL we'll change the ID to site URL and change this to website URL okay then we just need our button so let's do button and we're going to give it a type of submit okay and let's see what else let's give it a class bootstrap class BTN and BTN - primary that'll make it a blue color just say submit alright so there's our form now for the the row down here you'll see that it's using the grid system it's using two six column divs what we want is just one twelve column okay one that goes across the whole thing so let's change this to twelve and we can get rid of this six column one all right and then down in the footer let's just change this will just say bookmarker and down at the bottom we need to link our JavaScript so we can get rid of this ie10 thing all right so we need to link our bootstrap javascript file so script source and that's in the j/s folder slash bootstrap dot Minjae s now we also need jQuery if we're going to use the bootstrap j/s so let's just grab the jQuery CDN okay jQuery code jQuery comm we'll just click on the version three uncompressed and let's grab this script tag okay we'll put that make sure you have it above the bootstrap okay and then we're also going to have a JavaScript file that we work in which will be called main j/s so let's link that okay and that should do it now in this row here this is where our results are going to be or you know the bookmarks that are stored in local storage so all we need here is a div with an ID that we can latch on to later and output okay so we're going to call this bookmarks results alright and that should do it for the mock-up all we need to include our style sheet that we're going to create so under the bootstrap style sheet let's put in style dot CSS alright so we'll save that now if we were to open this up in chrome it should look like this now notice that it's not formatted exactly like this is that's because this actually uses an extra stylesheet so again let's do a control you and you'll see there's a file called jumbotron narrow dot CSS we're going to click on that and then we're going to just grab this CSS here okay copy it and then in our CSS folder we're going to create our style dot CSS file okay and any extra styles that you have you can put in this file let's open that in Adam okay style.css I'm going to paste that in alright so now let's go back to our site and reload and now it looks more like the demo so the interface is complete okay now we're going to move on to the java script 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 all right so we need to have an event on this on this form on this submit so what we'll do is let's go into our main j/s actually we need to create it first so main dot j/s and just to make sure that this is working let's just say alert one and if we reload we get one all right so we want to create a listener here so let's say listen for form submit and what we want to do is we want to target the form okay 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 here my form okay 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 event listener okay and then that's going to take in some parameters that's going to take in the actual event you want to listen for which is going to be a submit okay 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 bookmark alright so let's go ahead and create that so we'll say function save bookmark and let's test it out by just doing a console dot log and we'll just say it works okay so let's save that and now you're going to hit f12 to open up chrome tools or Firefox tools whenever you're using and let's go ahead and click Submit now notice that if you look here when I click it it does say it works but it flashes really quick and it goes away the reason that's happening is because 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 here and one of the methods that we can use on that is prevent default which prevents the default behavior of the form so we can say e dot prevent default like that all right so now let's go back and reload and submit and now you can see it says it works and it doesn't flash it just stays there if I keep clicking it it just keeps happening okay it just adds one to that so that's what we want now the next thing we want to do is we want to get the values that we pass in here okay when we put something in here we want to be able to grab these all right so let's get rid of the console.log and make sure you keep this prevent default let's actually put a comment so they prevent prevent form from submitting okay let's put a comment here to say save bookmark okay so we want to create two variables for our form values 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 wet or Const because I don't want to have to set up any you know I don't have to set up babble or anything like that so and you should know es 5 syntax if you're just learning JavaScript anyway all right so we're going to save our and we'll call this site name and we're going to set that to document dot get element by ID okay we want to get site name because remember that input we created right here has an ID of site name all right now let's see what that gives us if we were to console dot log it okay so we'll reload we'll just put something in here and submit and you can see it actually logs the entire element ok the input tag and everything now we want to get the value that's typed in not the actual elements so what we can do is just add on to this and say dot value all right so let's go ahead and reload that and type something in and submit and now you can see we're getting the actual value all right so we want to do that for the site name and the site URL so let's go ahead and put that in there 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 site name and then a URL which will set to site URL okay so let's go ahead and console.log that okay so if we said Google and we put HTTP Google com submit you'll see that now we're see we're getting an object with a name and a URL okay so that's what we want to submit to local storage so local storage what I'm going to do is just give you a quick example here local storage test and the way that this works is it stores strings okay local storage only store strings but I'm going to show you how we can actually parse the JSON into a string save it and then when we need to get it back we can parse it back to Jason okay it's only a matter of running it through a single function alright so to set something in local storage we just want to say local storage there's no external libraries or anything it's part of the html5 standard so we're going to say local storage dot set item okay and then you can choose a key to save as I'm just going to say test that's the key and then the value let's just say hello world all right so that'll actually save the text hello world as test in local storage so let's go ahead and save that and let's reload and we're just going to does n't matter what we put in here because we're saving it as test anyway so submit now nothing happens because we're not outputting local storage anywhere but we can check it if we go to our tools here and go to application and then local storage click on this file you'll see we now have test and hello world okay and we can delete from here as well just delete both of those and now if I reload that local storage value is gone now if we want to get an item what I do if we want to get an item we can say local storage dot get item and we want to get test okay let's actually console.log that all right so now if we reload and obviously to run this we have to submit and we get hello world okay it's fetching it from local storage now if we want to delete from local storage you can say local storage dot remove item test so now when we submit this form it's going to set the item it's going to console.log it and then delete it and then let's console.log it again just to show you that it's gone okay we'll save that reload submit okay so it logs it and then it removes it and then it's null alright so that's how local storage works we're just gonna I'm going to keep this here for you guys but I'm going to comment out alright so moving on we what we want to do is we want to save this bookmark that we created in local storage but before we do that we have to actually see if there's if there's a bookmark value there alright because if it is there then we have to fetch it add to it and then save it again so we're going to put an if statement here and we're going to say if local storage dot you get item and we want to check for an item called bookmarks all right and we want to check to see if that's null so we want to do a triple equals no all right so if it's no then that means that we need to initialize an array so we'll create an array called bookmarks right and let's just put a comment here let's put a comment here test alright 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 up here with the form values all right 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 sorry now we if we do this this is actually a 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 all right and that'll actually take our jason array and turn it into a string before we save it in local storage so let's go ahead and save this now this should run because we don't have anything in bookmarks yet it is null so it should run and it should store it so let's say google and we'll save our link here and click Submit and now let's go to application local storage file and you'll see that it's stored here okay it's a string formatted JSON array so that's what we want 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 here okay so this this is if there is something in bookmarks then what do we do first thing we want to fetch it from local storage all right so let's say get bookmarks from local storage we can do that with local storage dot get item let's see get item bookmarks and we want to put this into a variable alright 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 alright so just remember that json dot parse will turn a string into jason or back into jason jason stringify will turn it into a string alright you just want to kind of you know alternate those whether you're setting are getting from local storage unless of course you're actually storing strings all right 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 bookmark to array and we do that with bookmarks dot push and bookmark ok and we're just talking about this up here 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 and we can do that with the same command right here just like that alright so let's go ahead and save that and reload and now let's say we want to add facebook ok submit and then let's take a look down here and we have another another value in our array with the name of Facebook in the URL facebook.com okay so that's working fine our values are being stored how we want alright so the next thing we want to do is we want to be we want to show those bookmarks down here okay 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 underneath save bookmark okay we'll call this fetch bookmarks okay 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 right here we're just fetching it from local storage okay and then let's just console dot log for now like that now we need a way for this to run because right now we're just defining it so what I'm going to do is go to index dot HTML and on the body tag I'm just going to put an onload and set that to fetch bookmarks all right so now when we reload that should run automatically so let's open up the console and reload and you can see it's getting the the local storage bookmarks all right so that's what we want now remember we have this 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 kids Oh put ID so we'll create a variable called bookmarks results set it's a document dot get element by D bookmarks results okay and then what we want to do is build our output so we'll take that bookmarks results variable and we'll say dot inner HTML equals nothing alright now I can put anything here let's just say hello and then save that and if we go back and reload you'll see that hello is being put there okay so we're getting the ID with document.getelementbyid d and then this inner HTML is just going to do just that it's going to put whatever HTML that we give it into that spot okay through JavaScript so we actually want to set this to just nothing for now alright and then what we want to do is loop through the bookmarks that are in local storage and then output them one by one inside of a div okay so we're going to use a for loop and I should have mentioned this at the beginning of the video but if you're not comfortable with loops and stuff like that I would definitely suggest my JavaScript fundamentals for beginners video where I go through the very very basics of JavaScript loops and functions and all that I should have mentioned that at the beginning all right so we're going to save our I equals 0 all right and I'm going to say as long as I is less than bookmarks dot length okay so the amount of bookmarks which in our case right now is two and then we want to I plus plus we want to increment it after each time all right 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 hear and then dot name all right then we want the URL bookmarks I dot URL okay 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 all right if you wanted to put a div or something here you could and you could append to it by doing plus equals okay so we want to append to it and let's say div actually know what let's just test it out first and we'll just put name okay which is this right here so let's save it and now you can see that it's looping through when it's outputting each bookmark name which we have Google and Facebook all right so that's good we know that's working so we basically want to create a div block here 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 a border and some padding and then I want to format this 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 all right and then we're going to have an h3 okay and then we're going to concatenate the name plus sign will go on to a new line okay and then let's put let's see let's end the H actually you know what yeah well end the h3 because 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 if all right 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 here and put a space and then we'll say a give it a class BTN 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 H ref all right now the H ref 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 all right and then we just want to end that opening a tag and then close it and then here 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 all right we also want a delete button so what I'll do is this needs to have a put a plus sign here copy this whole line and we're going to give this one a class of button danger to make it read and let's see this text we're going to change that to delete and then the H ref is just going to be a number sign because it's not actually going to go anywhere we're actually going to call a function okay so we want to put in an on click okay we want to say on click and we're going to call a function called delete bookmark okay now we want to pass in the URL here and this is this is a little weird we have to escape the quotes and we escaped with the backslash all right and then we also want to concatenate the URL so we need another quote and then a plus sign put the URL in plus sign and then we need another escape like that all right so that should work that's going to pass in the URL to this delete bookmark all right so let's go ahead and save that make sure it shows up okay if I click delete it's it's not going to do anything it just reloads the page we need to create the delete bookmark function all right so let's put that right here so say function delete bookmark ok remember that's going to take in a URL and let's just do console.log URL alright look so let's go ahead and click delete - UPS what's going on here oh I have it set to target blank we don't want that so the delete shouldn't have the target attribute all right so now I click delete and you'll see that it shows the the URL so that's what we want now to delete what we need to do is first fetch the bookmarks from local storage then we want to loop through them and then check to see if the current one we're looping through matches this URL if it does we're going to splice it out and then we're going to reset local storage all right so let's say yes okay so bar bookmarks actually I can just copy this right here all right so basically all of this consists of just grabbing it from local storage changing it the way we want and then resetting it all right so now let's loop through bookmarks so for bar I equals 0 as long as I is less than bookmarks dot length and then I plus plus okay and then what we want to do is do an if statement and we want to say if the current iteration so bookmarks high URL is equal to the URL that's passed in up here then we know that's the one we want to delete so we'll say remove from array and we do that with bookmarks dot splice okay we want to splice at the the current iteration and we want to splice out one from that all right and then all we have to do after that is reset the local storage and we want to do that under the loop okay so right here and we can just grab this alright so that will reset the local storage after we delete it so let's save that alright so if we go down here we click delete now it's still there but if I reload it goes away the reason that's happening is it's deleting it after it fetches the bookmarks so what we want to do is just call fetch bookmarks again alright so we'll just say re fetch bookmarks and we just have to say fetch bookmarks just like that and we should also do this after we add a bookmark so let's copy that and go to our add bookmarks our save bookmark and we'll put that right here alright so now let's try to add let's say Twitter and HTTP Twitter submit okay there it is reload it's still there and then I click delete and it goes away reload and it's still gone all right so that's that now the next thing I want to do is just take care of the validation all right then I think that's pretty much the last thing we have all right because right now if I submit you'll see it's gonna save an empty bookmark and we don't want that that's stupid so let's um go up to our save bookmark all right and we're going to go let's see right after here and we'll say if not site name or not site URL okay so if neither one if either one of these are not here then we want to alert will say please fill in the form all right now in order for it to stop we're going to just return false okay because we don't want it to keep going so let's try that we'll reload and if we submit we get please fill in the form and it doesn't submit all right so that's good now we also want to add an another rule here that this has to be a URL has to be formatted with HTTP all right so to do that we can use a regular expression all right now regular expressions I'm not going to go over them but basically it's some kind of pattern matching you want to match some kind of pattern and there's there's predefined regular expressions for email addresses and URLs we just need to find one so let's say regex URL and right here what is a good regular expression to match a URL this is actually the one I used so go down to this answer here and right right here we have a good code block of just that so what I'm going to do is grab these two lines and copy them okay I'm going to paste that in so right here we're setting the expression this is a regular expression to format a URL okay which is very long and very just a very annoying looking and then what we want to do is create a variable called regex or whatever you want and set it to new reg XP and pass in that expression okay so that'll actually create the the regular expression and then what we want to do as you can see here they said if whatever they want to match dot match pass in regex if that's successful they're alerting success if not they're learning not so we want to call this match all right so let's go back and go if I will say if site URL dot match and then pass in regex all right we actually want to test to see if it doesn't match so we're going to say we're going to put an exclamation there so that's saying if it doesn't match then we want to alert please use a valid URL okay and then we just want to return false so let's give it a shot so if we say Twitter and we just try to add Twitter and submit please use a valid URL good all right but if we say Twitter and then HTTP twitter.com submit it works okay so that's good now what I would do in this situation is create a separate function for the validation so let's copy that from this if statement down to here and we're going to cut that out and then let's go down to the bottom and create a new function called validate form and then we're going to paste that in okay and let's say we want to return false if you know if that happens return false if this happens if we get to the end and it passes we just want to return true all right and then that way we can go back up to where we had it and we can basically say if so if not validate form and we need to pass in the site name its site URL which I need to add down there in a minute then we want to return false okay and we need to add that down here okay so validate form constant a site name and a site URL all right so let's save it submit please fill in the form good just put something and put something that's not a URL and we get please use a valid URL all right so we're just about done on the last thing I want to do is I want to clear the form after we submit it so that's really simple we're just going to go down or up - we'll go right here and we'll say clear form and we'll grab the document dot get element by D we want to grab the form which has an idea of my form and then we can call dot reset that will reset the form all right so one last try here let's say Facebook HTTP Facebook submit and the form clears it gets added all right so that's our application hopefully you guys learned a bit from this we hit quite a few aspects of JavaScript and like you guys asked no angular or framework or not even jQuery or any any external library alright just straight JavaScript and html5 so I will give you guys a link to the code also if you like this then check out my 10 projects in JavaScript and jQuery course where we create simple applications with just JavaScript as well as jQuery also if you like this video please subscribe if you're not already subscribed leave a like leave a comment if you have any questions leave a comment and if I don't get back to you I'm sure someone else will be able to help alright so thanks for watching guys and I will see you next time

Channel: Traversy Media

Views: 330,060

Keywords: javascript, learn javascript, javascript app, javascript tutorial

Id: DIVfDZZeGxM

Length: 45min 30sec (2730 seconds)

Published: Wed Jan 11 2017