Ep57 - Bookmark app with local storage tutorial with source code

all right in this video we are going to see how to create this bookmark app as you see these are the list of links if i click on instagram it will go to the instagram page if i click on youtube it is going it will go to the youtube now the feature of this page is if you refresh this the bookmars are going to same let me add this and show you let's add myspace and click on submit you see it is added below let me close this and even if i refresh even if i close this tab and start again the links are going to be there it is because of this local storage the feature from chrome we are going to see how to add this now as you see i have added just the myspace and the logo came by itself the same let me remove this flipkart instagram facebook let me add the new link meta and you will see the logo will also be added you see logo is also added now the validation is also added sorry for that in case if you add which is not url it is going to say enter a valid url so these are the features uh we are going to see or how to create this with javascript now we are going to create this with the help of html css and javascript with no library or no framework like bootstrap from scratch in case if you are only interested in learning javascript i leave the timestamp in the description just start start from there and in case if you want to learn html css and want to see how to create these models and all uh start along with me i'll leave the source code of this project as well as the project which i am going to demonstrate right now by creating it in front of you will also be there in the description fine let's get started to start we need three files let's start with html we'll save this as demo.html and then we have demo.css then we need to create a script file demo.js let's start by creating the template exclamatory tab let's link the css demo.css let's string the style sheet script demo dot js now uh i need to add font awesome icon as well let me just copy paste the cdn which i have used on the demo just copy paste it cool now we need a button as you see we have a button over here let's create a button add bookmark and let's give the id and then let's create a container we can also give id as item holder now these are these are items so let's create the first item and let's create this uh with close class we need a font awesome icon we'll add one awesome icon in a minute and then we have let's we have a name and with image then the name which is surrounded inside anchor type and that's it for the html just copy paste it several time before copy pasting let me add the font awesome icons you see this is the add bookmark icon let me just add this and let's add the close which is trash okay so it is going to come from the javascript let me pick that for you from the javascript here it's the trash let's open this paste it the file name is demo demo.html and it will open now this is how it looks for now let's just name this as ui monk this is how it looks and if we let me show you how to add the fevicon as well so this is going to come from the url this url now if you see s3 google user content dot com s2 slash favicon and you have to pass the name of the link let me share the face book you will get the facebook icon let's add youtube.com and you will get the youtube icon it's the favicon so let me just place this in as an image now if i refresh this is how it looks great now let's start designing it let's import a font called household it's a google font let me pick this so this is font font awesome icon sorry google font oswald and for all the element i have added on as well font fine now we have a button let's get the button it's an id we have to make this at the center so to have this at the center you have to choose a container let's choose a container body is a container here display flex align items center justify content center flex direction column so that it becomes one below the other let's give the background color as well cool now let's start designing the font size of 30 pixels so that it looks little bigger padding 10 pixels on all sides background color let's make this red cool now let's start designing the item width of we can make width of 300 pixel height of 150 pixel background color as white refresh it this is how it looks it looks too big we can make this shorter by making this 100 pixel let me copy this some more time the item let's make this four times or five two three four five refresh it this is how it looks now we have to choose a container or item holder let's make this display flex now you see it will be side by side let's make this flex wrap wrap so that it adjusts itself with the width of the container let's add margin top of 50 pixel margin left or margin right let's make this margin left of 30 pixel cool now we have to get into the item inside the item we have two derrick child the first one is the close button and the second one is the name div so display flex now you see side by side we want flex direction as column one below the other now at the center align item center justify content center cool let's pick the close class which is inside item actually it is remove not close let it be position absolute top 10 percentage left right of 10 percentage now let's see how does this looks it's over here we have to get the container and give position relative so that now now you got the idea so you in order to use position absolute you have to give its parent position relative now let's make this close font size 15 pixel 20 pixel cool we can make this color as red and cursor you got it now let's design the name inside the name we have anchor tag font size 30 pixel text decoration none let's choose an image inside name class width of 50 pixel height of 50 pixel seems too big we can make this 30 and 30 and margin right 10 pixel vertical align sub cool almost we have completed it if you want you can change the color as well for the anchor tag black cool all right now let's work on the model as you see if i click on add bookmark it is going to open a model so let's start creating it so first we need the overlay you see even after i click on click outside the model it is going to close it is also an feature which we are going to cover in this video fine now let's create a model model container the model container we are going to have this x icon let's get this place it over here and it's close close model and then the other and then the model div with class show model so this show model will act as hide and show with the help of javascript by default we are not going to add the show model so when i click on the button this show model will be added to the we have to make this available here cool now we need to add form before form let me add a heading to it and then form with id model form we don't need action we'll work on javascript the first one we need form group we are going to create a class this will surround label and input field input type text id website name just copy paste it one more time this time it's going to be website url one more time it's going to be submit button input type submit value we can make the value as create or add bookmark now let me see so this is how it looks we have to style this so that it covers the entire screen i hope we have completed it this is the minimum lines that we need to add let's start working on the css so the id of the container display fixed or we can make display flex align items center justify content center so that it will come at the center now we can make this position fixed top of zero left of zero height sorry width of 100 vertical viewport width and height 100 what viewport height refresh it cool you got it now let's keep the background color with opacity rgba 0 is the absence of color with 0.5 let's add a 9 0.9 now you got it now inside this we have a model we need to give width of 500 pixel height of 300 pixel and background color white cool i can make this black as well now whatever is there inside the model container let's make this display flex so that it comes extremely at the center and i want the color to be white and don't forget flex direction need to be column now let's get the form group the same way display flex justify content item flex selection column so refresh it it's not working i think it's the spelling mistake cool now we just need to give width to it width of 90 percentage get the input field inside it give the width to both of them refresh it so i'll get into the inspector and let's check but it's not taking the full width it's the form which is stopping it give the width of 100 percentage now you got it we can add padding to the input field as 10 pixel on all sides and we can give font size of 20 pixel just to make we don't want that let's add margin to the form group 10 pixel cool we can make this h3 h3 comes under this container model container font size 40 pixel well that's fine let's make the margin top for the form group little more to adjust it we have to give the height as well cool now let's check let's change the color of the model container as let's give this triple three and let's check yes we got it there seems to be two space let me check what is giving that space the help of inspect form group okay we don't need to give this width it will take full width cool it has come to the center i think we'll leave it as it is yes three seems to be too big let me make this 25 all right now again we have close model color as red let's keep position absolute top of ten percentage right of ten percentage font size of 30 pixel cool i can make this as property as well depending upon you your wish now let's give the cursor as pointer cool so i believe that's it now get this class and give display flex and here display none refresh it get into the container here you should see display none is it and show display class has display flex let's try to give important to it cool now it's working let me remove this show this show model it's gone and it's there remove it's gone cool now we have to work on the javascript to start with now let's work on showing the model now if i click on this the model should show up so for that we have to get all the elements document on the javascript with the help of document dot query selector it could be the id or it could be class name now let's start from the top let's get the id of the button first copy paste then let's get the container holder we don't need this item and all let's pick the model container then we have close model class once i click on the close model it should go away it's a class so we need to add period then the form get the form and then we have input field to input field name and url and almost that's it now when i click on the button dot add event listener click when i click on this i want a function to get executed and that function will show model so what it should do it should get the model container and class list dot add it should add the class which i have shown you the show model now when i click on this i want this function to get called let's see refresh click on add bookmark and it is called great it is working now the same thing when i close when i click on close model i want to remove the class added class simply remove it again let's try show bookmark close it show close it so again now if i click outside of the model it should again close it so how we are going to do it window dot add event listener this click we need to get the target console.log e dot target will show where we have click let me get into the conspect sorry inspect click on console now if i click outside you should see this is coming up so we need to pick this ac if e dot target dot id now if i refresh it click outside now we are getting only the id so with the help of if condition if e dot target dot id is equal to this one then just remove the added class simple as it open click on x it will be closed create open click on model it is not going to get closed click outside of model it will be closed great and now we are going to see how to add the validation so for the validation part we have to get into the form here we have form we are going to add a submit listener dot add event listener and as you know the form has the event called submit so when i when i click on submit what should happen i should get the form values so this is website name dot value let's store it into uh input field comma of underscore the same way the url as you know these are coming from the input field so if i show you this is the id which i got it and then i'm taking it from the javascript we're taking it as a variable now again i'm storing it as a variable now as you know when i click on submit the page will refresh to start to stop the refresh we need to add e dot prevent default so this is the episode number of t7 we i don't want to explain this i can again on every video cool now we want to validate this so what i need is i need to enter this and enter this test.com so when i click on add bookmark what should happen is there need it need to prepend itself like http colon slash slash it need to be prepend this text to the url this can be either the user adds it or the javascript asset let's make this javascript if it does not if this if this variable does not includes does not includes the http colon slash and the same this time it's https if this does not have http then we need to make this need to get this and add http colon inside the backtick then template little just pass this variable inside this and we'll make this new hyphen new variable let's try this console console.log so what should happen when i type this without let's get into the console when i type this without https it should add a http colon then this text and show it in the console here click here and yes you got it for me that means it is working cool so let's try to add this copy it refresh again this time let's try this with http yes if it already has http then this won't be added any name if it already has http then we then it won't it would be simply http not https there's an error it's not defined it says it is not defined so let's define this let the same place anything cool refresh it type anything and uh facebook.com and http is adding it adding as a prepend value now what we need to do is we need to validate this validate form field we need to pass the name and the url cool and here this need to be executed only if this is true if this is not true then return false so why returning false because if this return false then whatever i type here the code javascript code should not get executed that's the reason now this form field is either going to return true or false fine now let's define this we make this simple url and name now if name is blank or url is blank then alert fill both fields let's try it click on submit fill both phase cool that's working first validation is done now let's validate with the url validate url right x javascript so you will get the stack overflow get into the stack overflow we need to just find the regular expression which is responsible for the url so this seems to be all right simple and straightforward so previously i picked this from pick this from here just copy this paste it here define the right x object then try to match it this time it's url if url matches with the regular expression if you are does not match the regular expression then say enter valid url let's try it and return false don't forget to return falls on this line as well once these are successful then return true so if we return trues then whatever we write after the line which will be executed now let's try by inserting non valid url enter a valid url so let's try it dot com and now i'm not getting that error so if i make a space click on add bookmark space dot something fill both field okay filling both field enter a valid url fine that seems to be working we have added this url validation as well once the validation path is done we need to store this into the local storage to store this into a local storage we have to create an array let book mark id let's define a bookmark array and we need to create an object bookmark object its name and then url the name is simply the input field value and the url is a new value cool need to push this object to the array pushing this object to the array now on each submit we will be creating an object and that object will be added to the array so just to give you an example console.log let me see do i have any other console we don't have refresh it add vishal vishal.com add bookmark then ui monk now you can see this will have three let's try to make this one more time fp fp.com click on add now you see we have four now we need to add this up array to the local storage so local storage dot set item which will accept a key so the key is going to be bookmark and the value we need to sub we need to send this as a string so json.stringify will convert the array to string so once this is done now let me show you get into the application local storage then click on file already there is a let me delete this because it is this one refresh it again now you see there is no local storage click on add let's type vishal vishal.com click on add now you see vishal and vishal.com is added if i click here you will see vishal has come up delete click once so actually yeah you got it cool if you try to make this again uimonk.com click on again uimonk.com is added the same way we want to populate this when the page is loaded so for that fetch fetch from local storage so call this each time on submit and on page load also it need to be called so on page load also it is calling because we need to create this so let's create this function so what i'm going to do is on page load i want to get all the values from the local storage and append it into the html so for that first we need to get all the values from the local storage so i'm checking if local storage dot get item so we have passed the key as a bookmark if you see the application you see this is a key so if the bookmark exists then get the bookmark and convert it from string to array again and store it into the empty array on page load so if there is no value on the array then define it uh duplicate value name and we have url so let me give my channel name ui monk vermont.com instead of uamong.com let me make this youtube.com cool once this is done after getting the value on page load then again we have to send this to the local storage refresh it let's try something click on add it is added but this is not getting removed so get the form and reset it now any value add and you see it is gone and gmail is added and on page refresh also it is going to remain same now what we need to do is we need to build the dom from the local storage so build a dom function let's define the build down function now while building dom we need to get the value from the array so this is the array which already has if you remember if there is no value then the duplicate value will be filled so fetch using for each individual value can be received restructure it name comma url equal to now you have t structured this get the container not the model container but item holder item holder dot inner html plus equal to backticks paste the html get into the demo.html just get only the item copy the hole and paste it in place of name we need to make this name show up the same way in place of url show the url again over here as well just to get the values once this is done let me check whether everything is calling perfectly if this works then we should get the value populated yes we got the value populated now we just have to remove the static values save this and refresh again now you see the value gmail let me try to add facebook facebook.com click on add facebook is added but you see it is getting repeated so to avoid the reputation you know.html on calling while calling this function we have to make this we have we need to clear the items facebook is added now insta instagram.com click on add bookmark instagram is added cool now the next thing what we need to do is when i click on this delete button this delete button should delete the value from the local storage as well so for that we need to add a click function on click so here delete bookmark and pass the url as a string now let's define this we are getting url now again we need to run for each on the local storage or the array now from the array we need to match the value it's very similar with this we have to run for each again now we need index as well bookmark and index if bookmark with url matches with our url then we need to call the array then splice call the splice function we need to remove on this index only one value and then why is this showing this let me check code there was some round bracket extra on bracket now we just have to see okay it's you are landing now we need to update the local storage after removing this and then we need to update the dom as well refresh it let's remove this remove this there we now you can see it is also removing from here as well let's try to add myspace myspace.com click on add myspace is added with the icon cool i think we have completed our work let me add one more thing twitter twitter.com click on add what else meta meta.com add youtube youtube.com cool now we are able to add this now on each refresh it is going to stay there you see i'm closing this and opening it on new tab it is going to stay as it is if i remove meta and close this open again meta is gone cool thank you so much for listening

Channel: UI MONK

Views: 54

Keywords:

Id: gh38yq0GW9s

Length: 51min 24sec (3084 seconds)

Published: Sun Oct 31 2021