Build a Notes App with JavaScript & Local Storage (No Frameworks)

hey how's it going guys my name is dom and today i'm going to be showing you how to create a notes app using vanilla javascript and local storage okay so right here we have the application itself so first i want to show you what it can do so right here i've got these two notes if i make a change to this for example and i say actually i'm going to watch some decode right if i then save this we can see that it's going to save it to the left side right up here alongside our last updated timestamp so i can then make a similar change to the one right down here and i can say hey mate for example go back and we can see that the most recently updated note is going to appear on the top now of course we can also add a new notes by pressing this big button top left corner it's going to make a new notes and i can delete by double clicking and then pressing ok and it's all gone so before we get into the code itself i just want to say it's going to be linked down below so you can download it and follow along if you want to and also you know guys this is just one way of creating a notes app in javascript there are many different ways to achieve this but i try to put emphasis on separating the code for the user interface and the business logic so there's actually going to be about three layers of code here and it's going to be super interesting to see how it all ties together i'm going to be showing you some techniques in javascript to achieve this and create something like this and hopefully you can learn something for your future projects all right so with that being said let's go inside this tab right here and begin from scratch to create what we just saw now guys also remember that the source code for this is going to be linked down below if you want to download and follow along so going inside here i want to firstly show you the html before moving on to the javascript all right now i've also got a css style sheet which is currently unlinked so the reason for this is because i already pre-created all of the css for today's video the reason why i've done this is because i thought there is not much point in wasting your time going through css when the main part of today's video is going to be the javascript okay so you can download this right here and copy and paste it in your own project you know to get your css working and use the interface looking nice okay so with that being said let's go inside the index html and begin work on the actual html structure for the notes application now at the end of the day the javascript is going to be the one that is going to render out the html but i'm going to write it here first to actually show you what the structure is going to look like before handing that over to the javascript all right so inside here let's make a new div with a class of notes and an id of app okay so now inside here this will be the main container for the application it's going to have two parts the sidebar on the left side and the right side is going to be of course the preview editing section inside here we can see a new div with a class of notes underscore underscore sidebar and a second one for of course the right side the preview section okay inside the sidebar we can make a new button okay with a type of button and a class of notes underscore underscore ads that is going to be out in our add note button inside here we can just say add notes underneath the add note button we can make a new container called notes underscore underscore list okay this would be all of our existing notes okay so for an individual existing notes we can say div with a class of notes underscore underscore list dash item so this right here is going to represent an existing note it's going to have three elements we're going to have the note title the body then the last updated timestamp so going back inside here let's create those three elements we can say notes underscore underscore small dash title and we can say here something like lecture notes and do the same thing for the body and we can say you know i learnt nothing today and for the updated we can call this one small updated and we can just say thursday 3 30 p.m saving this going back in the browser we get something like this so now let's finish off the html by moving to the preview section so for the preview section we can make a new input field right here with a type of text and a class of notes underscore underscore title this will be for the notes title let's add a placeholder here of enter a title okay and we can make a second element here a text area with a class of notes underscore underscore body this one here of course being the notes body we can just say something like i am the notes body saving this and going back in the browser we get something like this right here so this is going to be our html structure which like i said earlier is going to be eventually rendered by the javascript ui code instead okay but for now we can see what it looks like and what we are going to do with it okay now i'm now going to be commenting in this css file so we can see what it looks like save this go back in the browser and we have of course our nice user interface looking pretty good okay so there is one thing to cover before moving on to the javascript that is going to be the active note so we can see here of course the active note looks different it's bold it's got a background so to achieve that i'm using a class in the css which is called notes list item dash dash selected so i'm going to copy this modifier class right here go back inside my html i'm going to add this to my list item class and save this and go back here and we can see we have that you know different styling for the active node or the selected node so let's now move on to the javascript so when it comes to the javascript like i said earlier we're going to be using local storage to store our notes so with that being said let's go back inside the index.html let's create a new directory called js right here inside the js directory let's make a new file called main.js this main file is going to be basically just starting up the application so we're going to see what this looks like very shortly we're going to also create a new file here called notes api.js this one here is going to be the first main file we're going to be working on it's going to be responsible for interacting with the local storage to of course retrieve save and delete our notes now in the index.html let's go below the body here and say script for source at dot forward slash js and then of course main.js this will be a type of module that way we can make use of the native javascript import export syntax so speaking of that let's import the api file inside the main.js we can say import okay notes api from dot forward slash notes api dot js so what are we going to import here well going inside this file we can say export default class then call this notes api so now basically this notes api refers to the class here which is going to contain a bunch of methods to access our notes the first one here is going to be called static gets all notes okay so all these methods are going to be static by default or they're going to be static that way we can call them whenever we want the next one here is going to be called uh it's going to be called save notes it's going to take through here the notes to save the last one here is going to be called deletes notes this will take in the id of the notes to delete so we have our three basic operations here to get save and delete our notes keep in mind that the save note is going to not only update but also insert a new note okay now let's write the code for this get all notes method but first i want to show you the local storage side so going back inside the browser we can see in the application tab of my devtools i've got an existing local storage key value pair for what i did on this example so your one here is going to be an empty box so there might be nothing here well at the very least there's not going to be this key right here this key value pair so we can see here the current structure of my notes from this example we have two notes in this array with a body an id a title and a last updated timestamp okay so this timestamp here is using the iso format okay now let's retrieve all of these notes using javascript right now inside our get all notes method so down here we can say const notes is equal to json.parse i'm going to pass through here local storage dot gets item then say notes app dash notes then we're going to say or a new empty array so basically if there are no existing notes in the system it's going to say or and give us an empty array so in this case here for you this is going to run and you're going to get that empty array so now if i say return and i pass through notes i can then console.log the result of that method so i can say console.log pass through here notes api dot gets all notes then i save this and go back in the browser we can see that in the console i get my two notes right here for you it's going to be an empty array okay now these notes here like we said earlier they're going to be ordered by the most recently updated timestamp so let's go back in the code and add a sort algorithm to these notes to ensure that they do get sorted by their most recently updated type so i can say here notes dot sort take through a and b and we can just say right here return and we can say new date a dot updated is greater than new date then b dot updated then i can say negative one otherwise one so this is just my sort algorithm i've got a whole video sorry i've got a whole video dedicated to the to the sort method if you want to check that one out but basically this right here is just going to sort our notes by the updated timestamp so if i save this we can see that we guarantee that the notes are going to be in order of the most recently updated is going to be on top okay now we have done or we have finished off our gets or notes method next one here is going to be the save note method so for this one let's begin by allowing it to insert a new note so going inside the main.js let's say right up here notes api dot save note then pass through here a new notes object this here is just going to say something like title and i can say new notes then the body is going to be i am a new note notice that we have no id or updated timestamp because of course it is a new note so the id and timestamp are going to be added through the api layer so with that being said inside this method let's begin by firstly getting a reference to all of the existing notes we can say const notes is equal to notes api dot gets all notes then we're going to simply say right here notes dot push we're going to be adding the note to save to our list of notes okay then we can say local story dot set item we're going to basically just re-save the notes app dash notes json sorry local storage key and we can say json.stringify and just basically override our existing entry and we can say notes inside here so now let's add the id and updated timestamp to our note so we can say right down here note to save dot id let's generate a random id we can say math.floor we can say math.random times 1 million to give us that random id ideally on the server side you would do this right here or just increment it but in our case with local storage it's going to work perfectly fine we can also say note to save dot updated is going to be equal to a new date object of the current time dot to iso string to give us that iso timestamp so now it's going to save this data if i save this and go back in the browser with this code running we can see that in the console we have four notes now why did we get two more i must have accidentally saved midway through there so this is kind of bad data so i might just remove this from the json data so go inside here and just remove this value by copying this and we can go inside the text editor real quick we can convert this to json format this and we can just remove this line and we can copy this or cut it and paste it back inside the value to give us our clean data hopefully let's try again there we go i think that worked maybe there we go so it's working fine now so we have our three notes saved the new note right down here now what about updating an existing note so also keep in mind that we have the new id and the updated timestamp for that one so that worked now when it comes to updating a note we're going to pass through the id so let's update the notes which we just added in let's copy this value go back inside obvious code let's paste the id inside this save note method then we can say for example title let's make this something like the title has changed i'm not going to save this just yet i want to go inside this file and just add a check so inside this save note we need to basically grab onto the existing object for that note which we want to update so right here we can say const existing is equal to notes dot find then pass through here notes then we can say note dot id is equal to note to save dot id so basically whatever id passed through here it's going to compare it against each existing note if it finds a note with that id then it's going to put it inside this existing constant or object so i'm going to say here if there's an existing notes with the same id that you pass through it's going to be an edits or an update okay otherwise it's going to be an insert so now we can just copy this code and put it inside the else for our inserts for the update or the edits it's going to be this it's going to be existing.title we're going to replace this object's title with the one you pass in no to save dot title same goes for the body so we can say body right here and for the updated time stamp we can just simply make a change and make that the current time so now it's going to re-save the notes with the updated title body updated timestamp and it's going to all work perfectly fine so now if i um if i let's let's just let's save this one then i can save this one so we get four because of the initial save so we get a new copy of that note but we can see the one that we actually updated here this newly updated notes from earlier now says the title has changed so our update method works if i go back inside here and make this something like you know water bottle and save it again we can see that we keep 4 and we have now you know updated the body for this one here so we have those two methods done let's work on the delete so for the delete notes it's going to work in a similar way to the update or the save so it's going to firstly get the existing notes then it's going to say const new notes is equal to notes dot filter we're going to filter by the id we're going to say notes then say notes dot id does not equal id so basically with this filter method we're just saying let's get every single note that does not have the id which you pass in so basically it's going to be the current notes length minus 1 so if you've got 8 notes it's now going to be 7 notes because the note id you pass in is going to match at least one of them so it's going to be everything but the id you pass in then we can say right down here once again local storage dot set item then pass through the new notes inside our json stringify let's save this go inside our main.js we're going to delete this note right here so let's copy this id so copy this one here then say notes api dot delete notes pass through here the id if i save this and go back in the browser we get the three notes the existing mistake copied one okay and our and our two existing ones so it's been deleted and i can also copy this one here and delete this one so i can say back inside here paste that in and then delete that and we're good to go and we are back where we started so that is the api layout done for our notes api the next step is going to be the ui layer or the view okay so for the view let's make a new file here called notes view dot js so for the notes view it's going to be a very similar thing to our api so it's going to say here export default class of notes view okay so what's going to happen here is we're going to have a constructor so we're going to say constructor and this constructor for the view is going to take through a root element so we can say root right here basically this root refers to this class or this div right here with the class of notes and the id of app so basically when we initialize the application we're going to pass through this div and it's going to then be passed through to our notes view that way our view code where the html gets rendered knows where to put the data okay the next parameter here in the constructor is going to be an object so this object is going to by default be an empty object if you don't pass anything into it so that is what this equals empty object is doing it's just providing a default this object we're going to be using object destructuring here we're going to say on note select then say on note add okay then say on note edits then on notes delete so let me explain this right now so basically inside our constructor we can directly grab the value of these keys in the object we pass in so it might be easier to actually go inside the main.js and actually import our view okay so let's go inside here import notes notes view from notesview.js okay now inside here we're going to then just say const app is equal to document.getelementbyid pass through here the app to get our root app object then we can say const view is equal to a new notes view okay pass in the application elements then as an object here we can pass through our different properties for our you know these listed here so for example on note select this right here is going to be a function so to summarize this this notes view when the user for example clicks on a note in the sidebar this view is going to then call the function that is passed into the constructor here so for example if i say on node select i can say in the console notes has been selected something like that right so now if i provide this to my notes view i expect that when the view gets a click from the user it's going to send out a signal or it's going to call this function right and we should see this console log in the console so going back inside here we're doing a similar thing for the on notes add edit and delete if this doesn't make sense right now don't worry it should make sense very soon but we can say this dot root is equal to root just to save this data do the same thing for the select right here the add the edits and the on delete so they're all going to work in the same way just keeping a reference to them so we can call them later on then we can say this dot root dot inner html so this is where we're going to be using javascript to render out the view so here we need to just render out the initial html for our application so going back in the html document let's just copy and paste all of this stuff inside here and also comment this out okay actually let's comment everything but the main route because we need this one this is required but inside here we can just get rid of those comment them out so now going back inside the javascript file inside here let's set the html inside our root to then be all of this stuff right here aside from the existing notes because this needs to come from the javascript local storage instead of you know this dummy data so let's get rid of this and in a similar fashion let's just remove this notes body to then say something like you know i think i did let's go back here what do i do for this i just did take notes so let's make this take notes just like this and the top one was what was that that was new note so let's make this new note so it's not necessary to do this if you don't want to but just so we can see what what's going on we can just do this and we can just make this a bit you know more to the to the right side i might just actually go back inside here and just delete this new one so we're good to go again so basically guys look we've got this inner html set against the root element so we can see here actually that since the main.js is running the view is created we can see that we have our content inside here already so the javascript has rendered out the html okay now the next step for the view here is going to be to add event listeners for our various different actions so let's add a click listener for the button to add a new note we can say const btn add note is equal to this.root.queryselector pass through here notes underscore underscore ads okay so we're simply just selecting the add note button let's do the same thing here for the input field for the title so notes underscore underscore title what's the name of that we can see that right down here okay then we can say notes underscore underscore body this time for the inp or input for the body then we can say right down here btn adds notes dot add event listener i'm going to listen for the click event so now when the when the button for the add note gets clicked on we need to then call our function right up here to communicate this event to our main.js so right here we can just say this dot on note add and just call that function so now if i save this then go back inside here let's specify the on note add here then just say let's add a new note okay so now this function is going to be run when i click on the button to add a new note let's save this and go back in the browser check the console and click on this and we get here let's add a new note that's working perfectly fine and we can sort of see how this is basically how the view is going to interact with the you know the main controller so we're going to we're going to get to that shortly but this is just our our main controller or sorry sorry let me just rephrase this this is just a way of communicating back to the lot to the business logic okay so hopefully it's going to make sense very shortly guys if it doesn't already but just bear with me that is that the next step now is going to be to add the same listeners this time for the input field and the text area okay so basically whenever the user exits out of the input field or the text area we need to then fire off a on note edits event so let's go down here and we can grab both the inp title and the inp body then we can say dot for each right down here we can say input field so grab each input field right here and we can just say input field dot add event listener listen for the blur event okay so basically that just means whenever the user exits out of the input fields we can say const updated title is equal to inp title dot value dot trim so basically just grabbing onto the new title then trim off the edges the same thing for the body updated body we can say inp body dot value dot trim then we're going to fire off the this dot on note edit then pass through here the updated title and the updated body so now we're actually as opposed to the previous one with the on notes ad we are now passing through arguments to the on notes edits function which means if i go back inside here and i specify the on note edits to hook into it right i can now grab the title or should i say the new title and the new body so now if i go inside here i'm going to console.log the new title and the new body save this go back in the browser i'm then going to make a change i can say for example uh you know measuring tape exit out of this we've got measuring tape and the take note go inside here make this microphone just random things in my room obviously we get motion tape and then we get microphone so that is our event back up for the edit note all right so i hope that makes more sense now but there you go so the next step now is going to be adding a method here to create a new item in the sidebar okay so for this let's go back inside here i'm going to minimize this constructor but i just want to add a new to do i'm going to say to do here i'm going to say hide the notes preview by default so we're going to get back to this line later on but for now let's remind ourselves by adding that right there i'm going to minimize this and get back to adding an item to the sidebar so when it comes to the sidebar let's make a new method called create list item html i'm using underscore here to denote it is going to be a private method or it should be used as a private method this is going to take through an id a title a body and an updated timestamp so essentially guys this is going to create the html string for one of our sidebar items make a new constant called max body length is equal to 60. so basically it's going to be 60 here this is going to this is going to be the maximum length before we get the ellipsis three dots to shorten our body length okay inside here we can just say return we can return some html now also keep in mind that for both this right here and what i showed up here i'm using the backticks to give us multi-line strings and of course the ability to string template and pass through variables which we're going to see right now so let's return the html it can be div with a class of notes underscore underscore list item with a data dash note dash id of then pass through the id so let me explain this i'm going to pass through here using dollar sign and curly braces the id which was passed in so basically we're just keeping track of the note id for this notes list item in the sidebar using the html5 note sorry html5 data set attribute okay down here we can make a new div called you know notes underscore underscore small dash title and here we can just say using once again template strings gonna pass through here the title which was passed in up here and do the same thing for the body and when it comes to the body we need to basically just adhere to this max body length so we're going to say body dot substring and we're going to say right inside here 0 and then max body length so basically it's going to select whatever body you pass in which might be very long so you might get passed in something like this huge string right so when you get passed in that we're going to only select between 0 so the first character then up to the 60th character okay then if i just uh if i put this a bit down so we can see what's actually going on okay after we get the first 60 characters well then we're now going to say if the body dot length is more than the max body length okay so if it's more than 60 then we're going to add the ellipsis otherwise don't add the ellipses okay so that's that so we're going to add those three dots if the length is more than 60. cool so the next one here is going to be the updated timestamp now we're going to be using the browser's built-in you know formatting method so go down here we can just say basically just the provided updated you know dates object right here and we can say dot 2 locale string going to pass through undefined here that way we can have access to the second argument i'm going to pass through here date style as full then time style as short so basically if you haven't seen this before to local string just simply formats the date time in your own you know local timestamp or sorry local date formatting you know format okay we're saying the date style is going to be full and the time styles are going to be the shortened version which gives us you know what i showed you in the example right here with the date and then time so let's stop here and take a break and just take a look at what this is going to give us so in the constructor actually yeah sorry in the constructor just to demonstrate this method let's say console.log okay gonna pass through here uh this dot creates a list item html i'm gonna say an id of 300 a title of hey a body of yeah mate and an updated time of now okay so let's see what this produces us let's save this and go back in the browser we can see that we get this html right here yeah mate um we get no ellipsis it's you know only like eight characters long or nine characters long got the title the note id right up here and the updated timestamp of the current time in my local format so that is our create list html method okay the important stuff is now upcoming okay and that is going to be updating the list of existing notes so we need to have a method right down here which is going to update the list of notes in the sidebar this will be called update notes list it's going to take through the notes let's just rename this to be what it should be update note list this one here is going to firstly grab onto our our list of notes container so this div right here so let's copy this class go down here and we're going to say const notes list container equal to this.root.queryselector pass through here the notes list okay the first step is going to be to empty out the list of notes we can say empty list pass through here note list container dot inner html equal to empty string to clear the html let's save this and we might just actually let's not save it or let's let's just continue okay let's just continue guys i might just do the next step and then show you an example so down here the next step is going to be to insert our html for each note so down here we're going to say 4 of so for every single note of our notes which get passed in up here i'm going to say const html equal to this dot creates list item html using that method going to pass through notes dot id notes dot title notes dot body then notes dot updated now because this right here is going to be an iso timestamp we need to say new dates then pass in the timestamp right here sorry for the very long code line here i might just zoom out if i can so i'm going to pass through all of these values from the note object of the array so this notes here is basically just going to be what's in the local storage so all of this stuff right here so i'm going to pass through this array into this method it's going to create the html for each note then it's going to say notes list container dot insert adjacent html and this will just insert the html before the end of our container so one after another basically i'm going to say html so now upon saving this and going back in the main.js let's call that method on the view we're going to say view dot update notes list let's insert those notes the notes are going to come from our api so we're going to say notes api if i can access it right here dot get all notes let's just actually import this class again so let's import notes api from the notes api dot js save this right here and we should see our updated notes list and we get them right here so those are my existing notes for you they might be empty unless you inserted the notes earlier when we worked on the api okay so we've got this part done in terms of the html but the next step now is going to be to add your event listeners for when the user you know clicks on a note we need the notification back in the console like we showed earlier and when double clicking on the notes we need to add that event listener to of course delete the note so let's go back inside here we're going to go under this for loop and we're going to say right here add the select delete events for each you know list item each note i'm going to say here notes list container dot query selector all going to pass through here the notes underscore underscore list dash item so basically just selecting each you know html notes here i'm going to say dot for each one of these i'm going to grab the notes list item and we're going to say right inside here our notes list item dot add event listener when it gets clicked on we're going to fire off the on on note select function okay so we can say new function here just simply say this dot on note select okay then pass through the id that way the other code knows what id the user has selected so we can say note list item dot data set dot note id so basically this note id comes from the html up here where it says note id this note dash id gets converted to camelcase to give us this you know property okay so now let's save this go back in the main.js let's add that on node select you know function and say here grab the id and say note selected then just add the id so plus id save this go back in the console click on the note and we get note selected 7038 that is the id of the note down here is also going to work in the exact same way there we go so let's now add the code for the on note delete all right so down here you can say notes list item dot add event listener for the double click event so when it gets double clicked on we're going to run a function and this function here is going to first do our confirm dialog window so we're going to say const do delete if so we're going to say confirm say are you sure you want to delete this note okay so if they are sure so basically if do delete gives us true so if the user says ok to this confirm dialog menu this will be true otherwise false so if it's true then i'm going to say this dot on note delete then pass through here once again the notes list item.dataset.notes id so now let's save this go back in the main.js let's just add the function for the on note delete with the id we can say note deleted and pass through the id to the console let's save this go back in the browser double click press ok and we get notes deleted right there so that is the majority of the view so we can see how we can communicate with the other parts of the code which use the view to pass that data in and out using these event style functions okay so i hope that so i hope that made a lot of sense um i've been recording for quite a while now guys so my voice is a little bit raspy so i apologize but let's just move on to the next method which is going to be the update active note so as we saw earlier this note here is active so we need to update the view okay to of course present this note here right when i click on it into this section here as well as add our highlight css class to make it look visibly selected so back inside here add a method called update active notes okay this here is just going to say notes it's going to take through a new or take through a note okay this will then say this this.roots.queryselector we're going to grab the notes underscore underscore title input field we can say dot value is equal to note dot title just simply updating our input field same goes for the body we can just say you know notes dot body very straightforward so now go back inside the main.js let's say view dot update active notes then pass through here if i describe a reference to the note so notes api dot get all notes then i can just get a reference to the second or the first note so i'll just pass through notes here then say set the active note to be the first one so notes at index 0. saving this and going back in the browser we can see that we have the content for the zero note inside here all right now keep in mind that ideally when i select a notes so when this function comes back and i click on a note i then want this function to call this stuff here by the id but we're going to see how this works shortly for now we're just testing out this method so we don't need to do that inside here but we're going to do it very shortly anyway this update active note not only needs to set these title and body but also it needs to it needs to you know update this section here to be visibly selected so for that let's go back inside here and we're going to say this dot root dot query selector all let's get each one of our notes underscore underscore list item so basically each list item i'm going to say dot for each one of those note list item once again i'm going to say let's go down here i'm going to say notes list item dot class list dot remove so we're going to remove the class of notes underscore underscore list dash item selected so if any of the existing notes were selected and have our special background color and bold class then it's going to be removed then we can simply just say this.root.query this time passing through um the id also the class of notes underscore underscore list dash item pass through here the data dash note dash id equal to the one we pass in note dot id so now we are specifically choosing using the attribute selector here in the square brackets we're choosing the list item in the sidebar with the note id of what we pass in as our active notes that way we can just say dot class list dot add and add our modifier class to give us that background and the bold text let's save this and go back in the browser we can see we have the boldness on that first note right there okay so we are almost done with the view code the next step is just going to be to essentially have the ability to hide this section once the page first loads up so if you have sorry if you have no notes currently in your list then we don't want a note to appear here or at least the input field and a text area so let's go inside here add a method for updates notes preview visibility okay take through the visible flag so true or false we can just say this.roots.queryselector once again just choosing the notes underscore underscore preview we're going to set the visibility of the right side so style.visibility to if you passed invisible then i'm going to make it visible right here otherwise we're going to make it hidden okay so guys basically if i go back inside the constructor here by default okay we're going to hide the notes preview so we're going to say this dot update note visibility i'm going to pass through here false so now if i save this we can see that by default the right side is hidden and the other code which we're going to write right now the other code is going to make this right side visible okay as long as we actually have some notes to preview so it's not working right now but it's going to work very shortly so that being said let's move on to the final piece of the puzzle that is going to be a new class inside the javascript so let's go inside here inside our js folder make a new file called app.js so basically this one right here is going to tie everything together it's basically going to be similar to this one but in a bit more detail and a bit more structured so with that being said let's go inside here we're going to export a default class of app okay so um this one is going to take through a constructor just like our last one also taking through the roots like we did for the notes view okay this main app is going to hold the list of active notes or the list of notes so we're going to say this dot notes is equal to a new empty array then we're going to say this dot active notes is equal to null ok so this will store reference to the currently active notes then we can say this dot view is equal to a new notes view all right okay so you know this is now going to include our notes view since this file here is going to be our main one where everything gets tied together it's going to include our class right so it's going to make a new instance of our notes view taking through the roots just like this and we're going to pass through our different you know callbacks here but for now let's make this empty just so we can actually make some progress i'm going to leave it like this just for now okay then go back in the main.js and just remove all of this stuff to clean it up okay i'm only going to import right up here actually let's remove all of this stuff aside from our app line and instead import here the app from dot forward slash app.js so now we've got this constant called app okay really this should be called root okay this one though gonna say const app is equal to a new app class okay passing through the root right here and this is basically all we need for our main.js it is simply just initializing our app which then ties everything together okay so let's now save this go back in the browser as we can see we get nothing okay so no loads sorry no notes loaded up and of course this is by default going to be invisible on the right side which is why we need this you know call if i didn't do this you know visibility run back inside here it shows this so that's not good so let's go back inside here and put this back and continue on with our app.js so for this one right we're going to be making a new function or a new method here called handlers so this handlers one is going to be once again private or used as privately i'm going to return here the object now this object is going to be all of our on node select edits add and delete which means we're going to call that method inside here we're going to say this.handlers call this to give us this returned object here we can say on note select okay grab the notes id like we did earlier and we can just say you know let's just do console.log for now note selected like previously plus note id do the same thing for the rest of them so do that it is on notes add okay and the on note add of course has no arguments so we can just say console.log notes add okay the on note edits is going to have the it's going to have the title and the body passed in from the ui we can just say title and then body and lastly we have the on notes delete like we did earlier the note id notes deleted so we have all of our handlers specified right here being passed through so if i save this and go back in the browser click add notes we get in the console the notes at there we go okay let's move on now to the next part of the constructor this will be to basically just update the list of notes when they first start up the application so i'm going to say this dot refresh notes so this method right here we can now define we can say underscore refresh notes so this one here is going to make a new constant chord notes equal to notes api dot gets all notes okay so we're going to be calling the notes api so let's import that right now so notes api just like this we're going to get all of the notes from the api okay then we're going to say right here this dot set notes okay it's going to take through our notes so for this set notes method let's go down here and just define this just so we can see what's going on keep it blank for now but basically this will then call the ui to update you know what's visible there and show our notes but if we have at least one notes in the ui sorry one note saved okay so if notes.length is more than zero then we're going to set the active notes so we're going to say this dot set active notes pass through here notes at index 0. so basically the first note the most recently updated note is going to be in the first position right here or active so this dot set active note is going to be defined right down here and this one now is is basically just going to set this variable so let's get this one done we're going to say this dot active note is equal to the one you pass in so let's take in a variable right here or argument i'm going to say active note equal to the the notes you pass in okay then we can say this dot view dot update active notes okay so calling the view now and telling the view to update the active visible note gonna pass through uh you know the note here again so we're going to obviously call this method down here to of course do all these things and make it visibly selected okay now i've sort of you know jumped the gun here with this set active note so let's just take a minute here and take a look at this set notes now so what this set notes is going to do is it's going to keep a reference to the current list of notes so we can just say right down here this.notes is equal to and then take in the notes which is passed in through here then we can say uh this dot view dot set notes list so once so update note list sorry guys it's to take through the notes which are currently selected or which are currently you know in the application it's going to update those on the view and of course populate them like we did right up here and do the exact same thing this time saying update note oh sorry guys updates note preview visibility if we have at least one note then we want this view to be we want the right side to be visible so we can just say right here notes.length is more than zero it's going to give us true so it's going to make our editing or preview area visible so i might just stop here just so we can see what's actually going on i'm going to save this and go back in the browser as we can see we get obviously an error so let's figure out why app.js line 24 so okay so let's take in our notes inside the argument or parameter list right there so now save this go back in the browser we can see that a lot has happened we've got our notes in the sidebar here it has then populated or it is then told the ui okay it's told the ui which is the active notes it is then highlighted it and then showed it in the right side here for editing purposes now the very last step is just going to be to add the logic for these handlers so we're almost done if i go back inside here if i click on this notes we get this callback if i double click press ok we get this callback if i edit okay we get the editing contents you know the new data for it so we need to now just implement these handlers and get the actual save actions done so basically we need to then call the api inside here and you know do the things that we need to do so for the online select when you when you select a new note okay we need to grab which notes to you know actually set as the active note so we can say const selected note is equal to these dot notes dot find then say notes notes dot id equal to the note id passing so basically just find the notes in our list which has the same id as we pass in from the user interface once we've got that we can just say this dot set active notes and call that active note method to simply pass in the selected note so now if i save this go back in the browser i'll click on this one it is going to be the active note it's going to call that method and handle all that business for us very simple okay the next one is called the on note ad so for this one once again very straightforward right let's make the new notes we can say const new notes equal to and this will be where the default title and body is going to be so i can say title here make the default title new notes okay make the body take notes for example so that's our default title and body when a new note is created then we can just say down here notes api dot save note pass through here the new notes okay then just say this dot refresh notes and simply just refresh our notes list which should now include our new notes save this go back in the browser press add notes and we get this right here okay so that's working perfectly fine all right once again very simple once we've got these you know handlers hooked up the next step is going to be the on note edit so for this one we can just say right here notes api dot save notes so with this save notes this time we're going to pass through remember this needs the id so this method here needs the id of what you want to save in order to actually save it so this is going to come from the active node because remember we only get the title and the body from the ui the ui doesn't really know what note is currently selected it can figure it out by looking at the class here but technically all it knows is what the new title and body is so inside here we're just going to say id equal to this.activenote.id so basically just using the data from our you know active notes variable or instance property here it's grabbing the active note id then we can just say title make that the new title that we're going to pass in and the same goes for the body alternatively you can shorten this by just saying title and then body that's also going to work so now we can just say after this this dot refresh notes once again to refresh that list of notes let's save this go back in the browser we're going to fire off the edits event by just saying something like hey how's it going get out of this that's going to trigger the edits event and we get the saved notes right there with the new updated timestamp there we go the very last piece of the puzzle here is going to be the on note delete so for this one very straightforward once again we can just say notes api dot delete note pass through the note id to delete okay then we can just say once again this start refresh notes and then we are done let's save this go back in the browser double click this and press ok and the notes is gone so that is the notes application using vanilla javascript and local storage once again guys i apologize my voice has been a bit bad recently this video took me about two three four hours to create so actually record so i hope that made sense i'm willing to answer like usual comments below if you have any um the code for this is going to be linked below in the description if you want to download it and yes so there we go guys if this video helped you out drop a like and subscribe to decode for more videos like this one thanks for watching and i'll see you in the next one

Channel: dcode

Views: 19,462

Keywords: html css javascript tutorial, html css javascript project, javascript project, intermediate javascript project, vanilla js project, vanilla js tutorial, local storage javascript tutorial, javascript mvp tutorial, javascript classes tutorial, javascript es6 import export, beginner js projects, javascript projects, web development projects, web projects

Id: 01YKQmia2Jw

Length: 63min 8sec (3788 seconds)

Published: Thu Jul 08 2021