How to Build a Sticky Notes App using JavaScript (Beginner's Project)

hey how's it going guys my name is dom and today i'm going to be showing you how to build this sticky notes application using html css and of course everybody's favorite language javascript all right so this right here is going to be the finished product as we can see we've got a bunch of sticky notes on this board now i can do many things such as add a new notes by pressing on this big plus icon and i can say something like this is a new note all right so now if i was to click out of this it's going to save that notes and the rest of them to the local storage on the user's browser so that means if i was to refresh here all of the notes are going to be retained because they're going to be saved locally on the user's machine within their browser all right so i can also do things such as update a note for example i can say learn an outside hobby such as mowing the lawn okay now of course that's going to save once again and i can also delete notes by double clicking and pressing ok so this project right here is perfect for you guys who are learning javascript maybe you want to refine your skills learn something new this project right here should hopefully help you out now all of the source code for this is going to be linked down below if you want to download it and follow along while you watch today's video so now going inside this tab right here we're going to be beginning from scratch to create what i just showed you all right so now going inside the text editor i've got this empty index html file okay so the first step here is going to be to make a new directory on the left side here called src short for source and inside here we're going to have a couple of files okay so going inside here let's make a new file called main.css this one here is going to contain all of the css we need for the sticky notes application and next up we've got a second file called main.js and you may have guessed already this one here is going to contain all of the javascript for the you know sticky notes application all right so going back in the index.html let's link up these two files by going inside the head and dropping down and making a new link to a css file going to src forward slash main dot css we can do the exact same thing for the javascript right down here we can say script source then of course going to src forward slash main.js now it's super important that you include a defer attribute here this is basically just going to make it so the javascript file is going to load up as the web page loads but it's going to execute only once the document object model or all of your html has been loaded inside the javascript okay so this right here is going to prevent errors with undefined elements and things like that all right so now i'm going to be showing you the html and the css first before moving on to the javascript all right so going down inside the html we're going to need a main container for the entire sticky note application so dropping down here let's make a new div with an id of app okay so now this is just going to be the main container for everything inside the sticky note board alright so inside here let's place an example sticky note we can say text area and now we can remove all of these attributes and simply replace it with a class of notes okay so this is simply a sticky note it's nothing more fancy than a text area alright so dropping inside the text area we can add some sample text just to see what it looks like you know in the css okay so now let's add a button right below here and this button is going to be the add new note button so dropping down here let's give this a type of button we're going to also give a class here of add dash notes all right so now inside the button text let's simply put a plus sign if i save this here and go inside the browser we're going to get something like this okay so now let's use some css to style up what i just uh wrote in the html all right so when it comes to the css we're going to go inside the main.css file and we're going to be targeting the body so for this i just want to remove some of the default space which the browser you know puts in there so we can say a margin of 0 and a background of a green so i'm going to say 009578 that is the decode green color and we're basically done with the body so moving on to the app id for this one here it's going to it's going to contain a display property so we're going to say a display of grid so we're going to be using css3 grid to place and position all of the sticky notes now this is not going to be complicated we're going to simply say right down below grid template columns and this is basically defining how the columns for our grid are going to be uh positioned okay so in the case of our sticky note board we simply just want a bunch of you know little squares to appear across the page so we're going to give this a repeat value here of auto dash feel and then 200 pixels so basically this right here just says it's going display uh every single sticky note at 200 pixels of width and if the browser is too small it's going to simply drop them down to the next line okay so that right there is going to allow us to of course position our sticky notes next up we can give this a padding of 24 pixels this right here is going to be it basically just details the padding along the edges of our container and a gap of 24 px between every single sticky note if i save this here and go back in the browser we're going to get something like this as we can see we have our 24 pixels of space in the top and then this top notes right up here as well as between every single you know note or in this case here it's going to be the add button now if i was to duplicate a couple of text areas here and make multiple notes and go back in the browser we get something like this so that's working perfectly fine all right so next up in terms of the css we're going to be targeting the class of note so when it comes to a note itself we're going to be giving this a height of 200 px the same value as the width we gave inside the grid so make sure they are the same to give you perfectly square sticky notes we can also give this a box sizing of a border box and a padding of 16 px now of course this border box means that the padding will not increase the width and height of the sticky notes we can also say a border of none a border radius of let's just do something like 10 pixels okay as well as a box shadow here of 0 0 7 px then rgba 0 0 0 and then 0.15 to give us a 15 opaque box shadow i'm going to save this here and go back in the browser and we get something like this so now let's apply a couple more styles to the notes class namely a resize of none to remove that default resizable you know box there we can just place that right down here as well as a font family of something like sans surf you can of course pick whatever font you want as well as a font size of 16 px inside here i'm going to save this and go back in the browser and we get something like this so now we are done with styling up the notes class we can now move on to the add dash notes class for that big add notes button so for this one we're going to give this a similar height of 200 px a border of none as an outline of none we can also apply a background here of rgba then 0 0 0 and then 0.1 for 10 opaque backgrounds this right here is going to allow the background color of the whole page to seep through the button okay so if i save this and go back in the browser we get something like this as we can see it's a dark shade of green we can move on by giving this a border dash radius here of something like 10 pixels the same as our notes from right above as well as a font size of 120 pixels this value here might change depending on your font family we can also give this a text color of rgba000 and then 0.5 for a 50 opaque black as well as a cursor of pointer so now going back in the browser we get something like this so now i want to add a simple hover effect when the user hovers over the add note button so going back inside here we can just copy the class name and we can say colon hover and for this one we can just simply darken up the background color we can say background at rgba then zero zero zero let's make this zero point two okay so i'm going to also just include a transition here so if i just say transition on the adds notes class and i say background at 0.2 seconds it's going to give a smooth fade between our two different background color levels if i save this and go back in the browser and hover over we get that nice transition right there okay so now we are done with the css we can officially move on to the most important part the javascript okay so now when it comes to the javascript well if we go inside the main.js file i want to begin by simply declaring every single function we're going to need for this to work okay so we're not going to be writing out the code for each function initially just actually declaring them and making them usable okay so inside here we can have a new function called getsnotes so this one here is going to simply retrieve all of the existing notes from our local storage in the client's browser next up we've got the function called save notes and this one here is going to take in an array of notes and this one is going to simply save the new notes to the local storage on the client's browser next up we've got a function called create notes element and this one here as the name suggests it's going to allow us to build a new element to represent a note and when i say element i'm referring to an html element okay so inside here we can provide an id and the notes content okay next up we can add a new function called add note and this one here once again as the name suggests it's going to be adding a new notes not only to the html but also it's going to save it to the local storage that brings us to the next function here called update notes and this one here of course is going to be updating your notes instead of adding a new one it's going to be provided with an id and the new content for the note with that id now also keep in mind that when i say id an id is simply just a unique identifier for every single note you're going to store and lastly we can have a function called uh delete note and this one here is going to simply take in an id as well as the html element which represents that particular note okay so now i want to stop right here and i'm going to be showing you guys what the data looks like for these sticky notes okay so going back inside my example if i go inside the dev tools right here and i go to the application section and go down to local storage as we can see here i've got a key called sticky notes dash notes and it has a value here of some json so if you're not too sure what local storage is basically it allows you to store data in key value pairs as strings okay so of course um as json is a string it's going to allow you to store that data as json so if we inspect this json array i've got my four notes right down here each note has an id and the content which uh you know correlates to what i showed you earlier inside the create notes element you know function and that's basically it so we have all of these nodes right here and we can basically begin the code by you know implementing that get notes function which of course is going to be calling the local storage api all right but first before we do that i just want to declare a couple of things above all of these functions here so firstly i want to get a reference to the main application container so we're going to say right up here const notes container is equal to document.getelementbyid then pass through here the id of app so now of course notes container refers to this div right here it's also worth at this point in time removing all of the existing text areas because of course all of those notes right there is going to be generated using the javascript instead okay so going back inside the main.js file we're going to also get a reference to uh the button to add a new note so right here we can say const add notes button equal to and then say notes container dot query selector we're gonna be getting uh the first elements with a class of add dash note inside the notes container so basically this is just simply referring to our button to add a new note very straightforward okay so now let's begin by coding up this get notes function so when it comes to this get notes function it's important that it returns an array of notes okay so this is basically just a javascript array full of javascript objects okay so right inside here we can return and we'll just say json.parse and then we're going to pass through here localstorage.getitem then pass through here sticky notes dash notes then we can just say or then pass through here an empty array as a string so basically this right here is going to attempt to get all of the notes stored inside local storage if it's the first time your user is loading up your application it's going to say or then default to an empty array then of course it's going to say json.parse to convert that json string into a native javascript array and you have your list of notes okay so if i was to go inside the browser right here and i call the get notes function we get an empty array okay but if i go inside the application tab right up here and i manually add a new key called called sticky notes dash notes and have a value of something like a new json array and i say an id of something like one and the contents to be something like you know a new note something like that okay if i add something like this then go back into the console and i refresh the page and i call the get notes function again we're going to see here we get the notes right there it's also worth noting that you don't need to refresh the page i don't know why i did that but you get the point your notes are going to be loaded right there that's working perfectly fine we can now move on to the next function it's going to be to save those notes so basically it's going to be the function which populates this local storage field with some data so inside here we can say local storage dot set item we're going to be setting the item or setting the notes to the key called sticky notes of course dash notes um using the exact same the exact same key as we did right up here and for the value it's gonna be json.stringify and then pass through here the list of notes just like that so now it's going to take in your javascript array of notes and of course stringify as json before it saves it to your local storage key so the way it's going to work is basically in the case of something like the add note function this right here is going to get all of the notes that exist currently inside the local storage then it's going to add your new notes object to that existing array and then it's going to re-save that array to local storage using the save notes function right there okay so let's test this out real quick by going inside the browser we're going to be calling the save notes function and then i'm going to pass through here an example array of a singular note so something like we can just say an id of two and the contents of uh let's just put something like a balloon okay i press enter right inside here then i'll call the get notes sorry the get notes function and it's going to return here an empty or not an empty um an object right there of your notes so that is how the the get notes and the save notes functions are going to work all right so now we can move on to the function called create notes element okay so when it comes to this create notes element function basically it's going to have the responsibility of creating a new text area to represent a single sticky note okay so we're going to begin by creating a new constant chord element equal to document dot create element and then we're going to pass in here a text area okay so for those of you guys who aren't too aware how this stuff works basically this element here is a javascript representation of an html text area in fact it's a new a newly created text area this is different to the ones up here because these ones here already exist whereas this one down here is yet to be added to the page uh other words it's yet to be appended to the dom okay so we're going to be getting to that part very shortly but for now we're going to need to do a couple of a couple of things to the element itself firstly we're going to add a class so we'll say elements.classlist.add and we can add the class of notes that way the css rules we put right inside here are going to be applied to our notes we can also say element.value is going to be equal to the content which we pass in because as we can see we're able to pass in an id and some default content for the create notes element function so it's going to populate that data right there inside the text areas value and we can also just say elements.placeholder is equal to something like what's it called empty sticky notes there we go so this right here is simply just a placeholder text when there is nothing inside your sticky note okay so now we have all of these things we can now simply return that newly created element but we also need to do a couple of things uh before we actually return that element and these involve adding your event listeners to trigger a couple of functions okay so firstly as we know uh when the user changes the contents of your text area we're gonna need to save that that change or update that note in the local storage so inside here we can say element.addeventlistener when the user changes the contents of your text area we're going to run this function right inside here so within this function we're going to simply call the updatenote function so inside here we can pass through the id as well as we can just say element.value so the element dot value is going to contain the most recently updated text area contents okay so now it's basically just gonna hand off the process of updating that note to the update note function so just for demonstration purposes i'll say inside the update note function console.log then say updatingnote.dot and i'll just also console.log the id and the new content okay so that is the first event listener next up we're gonna need to react to when the user double clicks with the intention of of course deleting your note so we'll say element.addeventlistener on a double click right inside here we can run this function so firstly we're going to check if the user actually intended to delete your note so we'll say inside here constant do delete equal to confirm and i'll say something like um are you sure you wish to delete this sticky note something like that so now it's going to prompt the user and ask them this question if they say ok then this do delete is going to return or it's going to contain a true and a false otherwise okay so we can now just simply check right down here we can say if do delete so if the user said yes delete my note i can then just say delete notes then the delete note function wants an id and it wants your element so i can pass through the element right there and then dropping down to the delete note function let's do the exact same thing with that console log just to test this actually works so we can just say deleting notes just like that and now i can save this and we have this create note element function so now if i go back in the browser and i call creates note element and i pass through something like 5 for the note id i then say something like decode for the notes content i press enter and we have this text area right inside here we have that class the placeholder etc so that's working perfectly fine okay so now let's actually make this interesting so going back inside the text editor when the page first loads up we're going to want to get all of our notes and of course display them to the user so we can say get notes then we can just say dot for each so for every single note that currently exists in local storage we're going to grab onto those notes or one note at a time right here so we have a singular note object then we can just say something like const note element is equal to then call upon the create note element function we're going to pass through here the note id we'll say note dot id then we'll say notes dot contents remember these properties here come from the json that exists inside your local storage we can then simply just say notes container dot insert before and then we'll say right inside here we're going to be inserting this newly created notes element before before the add note button so we can pass through here the notes element then pass through the add note button which just means like i just said insert this notes element before our plus sign save this and go back in the browser and we can see we have our balloon from earlier which currently exists in local storage so that works right there if i was to click on the note and i say something like dom and i click away we can see the update note function is called it receives the id as well as the new content for that note if i double click and i say no nothing happens if i do it again and i say yes delete the note we get deleting note right there this is broken because of course i left this new content down here so let's just remove that and try it again for example purposes double click press ok deleting notes for id number two so that is our create note element function right there as well as our automatic loading of the existing notes on the page so next up we can work on the add note function so when it comes to adding your notes it's going to be relatively straightforward the first step is going to be to get a reference to all of the existing notes within local storage so this right here can be something like const existing notes equal to get notes so the reason why uh we need to get all of the existing notes is because we need to basically uh add a new notes object to this array and then re-save the array okay so that being said let's now say const notes object equal to a new javascript object so now we can generate a new id we can say id equal to math.floor then say math.random times 100 000. something like that then for the default content of a new note we can just make this an empty string okay so now we have these two constants right here we can move on to actually creating that note element to represent our new note so we'll say const notes elements equal to creates notes element then of course passing through those uh those id and the content so we'll say notes object dot id then note object dot content and similar to uh the code above we can actually just copy and paste the insert before on the notes container and put that right down here so basically just adding our notes elements to the page so it's visible to the user okay and then lastly we can like i said at the very beginning of this function we can append our new notes to the array so we'll say existing notes dot push then we can add the notes object to that array and simply re-save it to local storage okay so we'll say save notes and then we can just pass through here existing notes now uh the naming of existing notes might be a little bit misleading because of course once you push a new note um it's now the new notes array and not the existing so maybe we can make this something like notes that something simple like that okay so now if i save this and go back in the browser i can now call the add notes function and i can say nothing actually i can just press enter and we get this new note right here if i refresh the page it's going to stay there because of course it's going to persist to local storage by using this save notes function so now that brings us to the next step making that add note button work this one right here so for that if i go right up in the top and i can now just simply say add notes button dot add event listener when the user clicks on that button let's simply just run the add note function just like this and that's going to work if i save this and go back in the browser then press on add notes nothing happens i wonder why let's try and figure out why of course i was meant to do this parentheses then i just say add notes so make sure your syntax here for the arrow function is correct your parentheses equals then greater than then of course your function save this go back in the browser refresh and then press the plus button and our notes are going to be added right there refreshing again is going to have those notes persist so this now brings us to the update note function so for this one it's going to work in a similar fashion to the add note function so here we're going to be once again just grabbing the list of existing notes so we can just say const let's actually call this one notes equal to gets notes then we're going to try and find the target notes which the user is trying to update so we can say const targets target note equal to then say notes dot filter so the filter method on arrays allows you to provide a criteria to filter out your array we actually want to look through every single note and find the notes which matches the id which we're going to want to update so inside here we can grab onto each note we can actually test we can say if the note dot id is equal to the id which you're trying to pass in then we're good to go then i can just say it index 0. so this right here like i just said it's filtering out to only provide notes with the same id as the one you pass in of course this right here is always going to give you an array of a single element with that array of a single element we're then just saying an index 0 to get the first element of course referring to our note okay so we can now say target notes dot content is equal to the new content which we're going to be passing through then we simply resave that array once again so we'll say save notes then pass through the notes array so i hope that made sense especially this filter part if it didn't i've got a whole video dedicated to the filter method if you want to check it out so going back inside the browser i can now do something like update a note i can say something like we are almost done i can now click away and if i refresh the page it's going to persist that change right there so lastly we can work on the delete note function this one here is going to work once again in a similar fashion to the update and the add note so for this we can say const notes equal to get notes then we'll just say inside here directly dot filter so we're going to use the filter method once again this time we're going to only want the notes which don't have the same id as we're passing in so for this we can say notes then just say notes dot id does not equal the id which you pass in so now like i said we're only going to see notes here that do not have the id which we're passing in of course giving us every note but the target one we can now just say save notes then pass through the notes which we're trying to re-save of course all of our existing notes then we can just say uh notes container dot remove child and then we can pass through the element right there this of course is going to physically remove your notes or text area from the page so now if i save this and go back in the browser we are done with the sticky notes application which means i can double click to delete all of the existing empty notes right down here and if i was to now refresh the page it's going to persist that change right there so now we are done with the sticky note application hope you guys enjoyed today's video if you did drop a like and subscribe to the channel and i'll see you guys in the next video

Channel: dcode

Views: 5,698

Keywords: html css javascript project, javascript project ideas, projects for learning javascript, web apps for learning javascript, learning html css and javascript, best javascript projects, best html css javascript projects for learning, javascript practice, projects to build javascript skills, how to get better at javascript, improve javascript skills with project, js local storage tutorial, javascript local storage project, notes app with js, notes web application project

Id: Efo7nIUF2JY

Length: 33min 54sec (2034 seconds)

Published: Mon Oct 04 2021