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 time stamp 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 note by

pressing this big button top left corner it's going to make a new note and I can delete by double clicking and then pressing okay and it's all gone so um before we get into the code itself I

just want to say uh it's going to be linked down below so you can download it and follow along if you want to and also um you know guys uh 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 stylesheet which is currently UNL 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 um 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 um you know to get your CSS working and

your user interface looking nice okay so um 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 um 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 um 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 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 SL editing section inside here we can see a

new div with a class of notes uncore 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 of

notes ad that is going to be our our our add note button inside here we can just say add note underneath the add note button we can make a new container

called notes list okay this will be all of our existing notes okay so for an individual

existing note we can say div with a class of notes uncore list- item so this right here is going to represent an existing note it's going to have three

elements um 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 note uncore small- title and we can say here something like lecture notes and do the same thing for the body and

we can say um you know I learned nothing today and for the updated we can call this one small updated and we can just

say uh 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 uncore title this will be for the notes

title let's add a placeholder here of ENT a title okay and we can make a second element here a text area with a

class of notes 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 um 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-- 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 note or the selected note 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 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 um we're

going to also create a new file here called api.js this one here is going to be the first main file we're going to be working on um it's going to be responsible for interacting with the

local storage um 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 sourcejs 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 notes api.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 um

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 get all notes okay so um 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 uh 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 delete 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 Dev tools 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 or 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 uh 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 pass going to pass through here local

storage get item then say notes app- notes then we're going to say or a new empty array so basically um 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 um I can then console.log the result of that method so I can say console.log

pass through here notes api getet 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 um they're going to be ordered by the most recently updated timestamp

so let's go back in the code and add a sort uh algorithm to these notes to ensure that they do get sorted by their

most recently updated time so I can say here notes sort take through A and B and we can just say right here return and we

can say new date a do updated is greater than new date than b do updated then I can say1 otherwise one so this is just

my sort algorithm um I've got a whole video sorry I've got a whole video dedicated to the uh 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 um we guarantee that the notes are going to be in order of the most

recently updated it's going to be on top okay now we have done or we have finished off our get all notes method the next one here is going to be the

save note method so for this one um let's begin by uh allowing it to insert a new note so going inside the main.js

let's say right up here notes API Dove note then pass through here a new note 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 Tim stamp 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 doget all notes then we're going to Simply say right here

notes push we're going to be adding the note to save to our list of notes okay then we can say local storage set item

we're going to basically just resave the notes app- notes uh 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 uh note to save id let's generate a random ID we can say

math flo we can say math.random Time 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 toave do updated is going to be equal to a new date object of the

current time do to ISO string to give us that ISO timestamp so now it's going to save this data if I save this and go uh 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 um I must have accidentally

saved Midway through there so this is kind of bad data so um I might just remove this from the Jon data so go inside here and just um remove this

value by copying this and we can go inside the text editor real quick uh 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 um 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 um

the new notes 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 um 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 our vs code let's paste the ID inside this save note method um then we can say for example title let's make this something like uh

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 up upd dat so right here we can say con existing is equal to notes find then pass through here note

then we can say note id is equal to note toave do ID so basically whatever ID you pass 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 uh constant or object so going to say here if there's an existing notes with the

same ID that you pass through it's going to be an edit or an update okay otherwise it's going to be an insert so

now we can just copy uh this code and put it inside the else for our insert for the update though or the edits it's going to be this it's going to be

existing tile we're going to replace this object's title with the one you pass in no to save tile same goes for

the body so we can say body right here and for the updated timestamp we can just simply make a change and make that the current time so now it's going to

resave the notes with the updated title body updated uh timestamp and it's going to all work perfectly fine so now if I um if I's let's just let's save this one

then I can save this one so um we get four because of the initial save so we get um a new copy of that note but we can see the one that we

actually updated here this newly updated note um 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 four 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 note um 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 uh notes filter we're going to filter by

the ID we're going to say note then say note 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 are length minus one so if you go eight notes it's now going to be

seven notes because the note ID you pass in is going to match at least one of them so um it's going to be everything but the ID you pass in then we can say

write down here once again local storage 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 delete

note pass through here the ID if I save this and go back in the browser we get the three notes um the existing mistake copied one okay and our and our two

existing one so um 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 delete that and we're good to go and we are

back where we started so that is the API layer 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 js so for the notes view um it's going to be a

very similar thing to our API so it's going to say here uh 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 um 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 with a 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 um 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 edit then on Note 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

easy easier to actually go inside the main.js and actually import our view okay so let's go inside here import

notes uh notes view from notes view js okay now inside here we're going to then just say con app is equal to document

getet element by ID 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 element then as an object here we can pass through our different um 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 Note select I can say in the console um 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 um and we should see this console log in the console so going back inside here we're doing a similar thing

for the on Note ad 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 root is equal to root just to save this data do the same thing for the

select uh 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 roots.in HTML so this is where we're going to be uh 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 uh actually let's comment everything but the main root cuz we need

this one this is required but inside here we can just get rid of those comment them out um 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 um aside from the existing note cuz 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 uh remove

this notes body to then say something like um you know I think I did let's go back here what do I do for this I just

did uh take note so let's make this take note 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 um and we can just make this a bit you

know more to the uh to the right side I might just actually go back inside here and just delete this uh new one so we're good to go again um 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 um 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 query selector pass through here uh

notes _ ads okay so we're simply just selecting the ads note button let's do the same thing here for the input field for the title so

notes title was the name of that we can see that right down here okay then we can say notes body this time for the in

or input for the body then we can say write down here BTN ad note addevent listener going to listen for the click

event so now when the uh when the button for the ad 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 do onot ad and just call that

function so now if I save this then go back inside here let's specify the on Note ad here then just say um 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 now 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 um this is basically how the view is

going to interact with the um you know uh the main controller so we're going to we're going to get to that shortly um but this is just our um our main

controller or sorry um sorry let me just rephrase this um this is just a way of communicating back to the Lo to the business logic okay so um hopefully it's

going to make sense very shortly guys if it doesn't already um but just bear with me um that is that the next step now is going to be to add the same listeners um

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 onot 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 addevent 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 tile value

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 value trim then we're going to fire off the this 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 Note ad we are now passing

through uh arguments to the on Note edit uh function which means if I go back inside here and I specify the onot 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 then new body save this go back in the browser and then going to make a change here I can say for example

uh you know measuring tape exit out of this we got measuring tape and the take note go inside here make this microphone just random things

in my room obviously um get measuring and then we get microphone so that is our event back up for the edit note all right so hope that makes more sense now

um but there you go so um the next step now is going to be uh adding a method here to create a new

um item in the sidebar okay so for this let's go back inside here we're going to minimize this Constructor but I just want to add a new Todo

I'm going to say to do here I'm going to say um hide the note preview by default so we're going to get back to this line uh later on but for now let's remind

ourselves by adding that right there I'm going to minimize this and get back to um 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 here is going to take

through an ID a title a body and an updated timestamp so um 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 um the maximum length uh before we get the ellipses 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 back ticks 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 _ list

item with a data- note- ID of then pass through the ID so let me explain this um going to pass through here using dollar sign and curly braces the ID which was

passed in so basically um we're just keeping track of the note ID for this notes list item in the sidebar using the

HTML 5 note sorry HTML 5 data set um attribute okay down here we can make a new div called uh you know notes small-

tile and here we can just say uh using once again template strings going to pass through here um the title which was passed in up here and do the same thing

for the body and uh when it comes to the body we need to basically just adhere to this Max body length so we're going to say

body do substring and we're going to say right inside here zero 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 um when you get passed in that we're

going to only select between zero 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 we're now we're now going to

say uh if the body do length is more than the max body length Okay so if it's more than 60 then we're going to add the

ellipses otherwise don't add the ellipses okay so um that's that so we're going to add those three dots if the length is more than

60 um cool so the next one here is going to be the update timestamp now we're going to be using the browser's buil-in um you know uh formatting method so we

go down here we can just say uh basically just uh the provided updated uh you know dates object right here and

we can say2 local string going to pass through undefined here that way we can have access to the second uh argument

going to pass through here date Style as full then time style as short so basically um if you haven't seen this

before uh two local string just simply uh formats the date time in your own you know local Tim stamp or sorry local date

formatting um you know format okay um we're saying the date style is going to be full and the time style is 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 a 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 um actually yeah sorry in the Constructor um just to demonstrate this method let's say console.log okay going to pass through

console.log okay going to pass through here uh this create list item HTML I'm going to say an ID of 300 a title of hey

a body of yes mate at 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 ellipses 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 uh format so that is our create list HTML

method okay um 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 um our list of notes container so um this div right here so let's copy this class go down here and

we're going to say con notes list container equal to list roots query selector 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 doin HTML equal to empty string to clear the HTML let's save this and um we might just actually let's not

save it or let's let's just continue okay let's just continue guys um I might just uh do the next step and then show you an example so um down here the next

step is going to be to insert our um HTML for each note so down here we're going to say for of

so um for every single note of our notes which get passed in up here we're going to say con HTML equal to this creat list

item HTML using that method going to pass through notes id notes tile notes body then notes 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 um

sorry for the very long code line here I might just zoom out if I can so 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 um what's in the local storage so all of this stuff right here so 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 uh note list

container uh do insert adjacent HTML and this will just insert the HTML before the end of our container so one after another

basically 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 uh 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 do getet all notes let's just actually import this class again so let's import notes

API from the notes api.js save this right here and we should see our updated notes list and we get them right here here so those are my existing

notes uh for you they might be empty unless you inserted the notes earlier when we worked on the um API Okay so we've got this part done um 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 D delete events for each uh you know list item each note I'm going to say here

notes list container do query selector all going to pass through here the notes uncore list- item so basically just

selecting each you know uh HTML notes Here 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 uh notes list item addevent listener when it gets clicked on we're

going to fire off the on um on Note select function okay so we can say new

function here just simply say this onot 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 dat set note ID so basically

this note ID comes from the HTML up here where it says note- ID this note- ID gets converted to camel case to give us

this you know property okay so now um let's save this go back in the main.js let's add that onot 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 it's 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 we can say note list item addevent listener for the

doubleclick 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 dialogue 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 okay to this uh confirm dialogue menu this will be true otherwise false so if it's true then going to say this

do on Note delete uh then pass through here um once again the note list item dat set notes

ID so now let's save this go back in the main.js let's just uh 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 okay and we get notes deleted right

there so that is um the majority of the view so we can see how we can communicate with the other parts of the

code which use the view um to pass that data in and out using these event style functions okay so hope that sorry 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 uh raspy so I apologize but let's just move on um 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 note it's going to take through a new or take through a note okay this will then say this roots query

selector we're going to grab the notes uncore _ title input field we can say value is equal to note

tile just simply updating our input field same goes for the body we can just say uh you know notes body very

straightforward so now go back inside the main.js let's say view update active note then pass through here um if I just

grab a reference to the notes so notes API uh 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

Zer saving this and going back in the browser we can see that we have the content for the uh zero note inside here all right

now keep in mind that ideally when I select a note 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 um 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 um 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 root query selector all let's get each one of our notes uncore list item so basically each

list item going to say dot for each one of those note list item once again going to say um let's go down

here going to say note list item classlist do remove so we're going to remove the class of

notes list- 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 selector this time passing through

um the ID or sorry the class of notes list- item pass through here the

data- note- ID equal to the one we pass in note 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 a note ID of what we pass in as our active notes that way we can just

say class list 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 um 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 the and

the text area so let's go inside here add a method for update notes preview visibility okay take through the visible

flag so true or false we can just say this roots query selector once again just choosing the notes uncore preview we're going to set the visibility of the

right side so style visibility equal to if you passed invisible then going to make it visible right here otherwise we're going to make it

hidden okay so look 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

update note uh visibility going to pass through here false so now if I save this we can see that by default um the right side is hidden and the other code which

we're going to write right now the other code is going to um 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 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 do notes is equal to a new empty array then we're going to say this do active notes is equal to null okay so

this will store reference to the currently active notes then we can say this view is equal to a

new notes view all right okay so um you know this is now going to um 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 call backs here but for now let's make this empty just so we can actually make some progress um we're

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 and we're only going to import right up here actually let's

remove all of this stuff aside from our app line and instead import here um the

app from slapp doj so now we've got this constant called app okay really this should be called root okay

this one though going to 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

um which is why we need this you know call if I didn't do this you know visibility R 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 um we're going to be uh making

a new function or a new method here called handlers so this handlers one is going to be once again uh private or used as privately um we're going to

return here the object now this object is going to be all of our unnote 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 note ID D like we did earlier and we can just say you know uh let's just do console log for now note selected uh like previously plus

note ID do the same thing for the rest of them so do that it is on Note

ad okay um the on Note ad of course has no um arguments so we can just say console log uh notes add okay the on

note edits it's going to have the um 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 Note delete like we did earlier the note ID note 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 note we get in the console the note add 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 to first start up the application so we're going to say this do 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 called notes equal to notes

api getet 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 uh this do 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 note 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 do set active notes pass through here notes at index Zer so basically the first note the most

recently updated note is going to be in the first position right here or active so this do set active note it's 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 do um active note is equal to the one you pass in so let's Tak in a variable right here or argument going to say active note equal

to the the notes you pass in okay um then we can say this view update active notes okay so um calling the view now

and telling the view to update the active visible note going to pass through uh you know um 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 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 uh 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 view set note list so once sorry Update note list sorry guys it's going 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 Update 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 um 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 um we get obviously an error so let's figure out

why um 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 um we've got our notes in the sidebar here it has then

populated um or it is then told the UI okay it's told the UI which is the active note 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 uh add the logic for these handlers so we're

almost done um if I go back inside here if I click on this note we get this call back if I double click press okay we get

this call back 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 ins side here and you know do the things that we need to do so

for the on Note select when you when you select a new note okay we need to grab which note to you know actually set as

the active note so we can say const selected note is equal to this notes

find then say note note id equal to the note ID passing so basically just find the notes in our list which has the same ID as we passed in from the user

interface once we've got that we can just say this do 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 of 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 um let's make the new note we can say

const new note 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 uh take note 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 do saave note pass through here the new notes okay then just say this refresh notes and simply

just refresh our note list which should now include our new note save this go back in the browser press add note 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 do save note so with this save note 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 note because remember we only get the title and the body from the UI the UI doesn't really know what notes is currently selected it can figure it out

by looking at the class here but um 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

activ note so basically just using the data from our you know uh active note 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 um so now we can just say after this this

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 onnot delete so for this one very straightforward once again we can just say notes api delete

note pass through the note ID to delete okay then we can just say once again this refresh notes and then we are done let's save this go back in the browser

double click this and press okay and the note is gone so that is the Notes application using vanilla JavaScript and local storage um once again guys I

apologize my voice has been a bit bad recently um this video took me about 2 3 4 hours to create so actually record so

um hope that made sense um 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

um and yeah so there we go guys um if this video helped you out drop a like And subscribe to decode for more videos like this one um thanks for watching and I'll see you in the next

one