Build a Todo List App in Vue JS with LocalStorage in 2022 | Vue 3 for Beginners

what's going on fellow web developers my name is tyler potts and in today's video we're going to be building this to-do list application that uses local storage and it's built using few js now we've built this exact same uh to do app in vanilla javascript you can find that the actual video links down below if you want to watch that one so let me just show you what we can do here so we can give him a name uh we can then click off this and if we refresh page this will be saved because it's stored in local storage another thing we do is added to do so let's just say uh make a video and then we select if it's business or personal let's just select business and hit add to do and there you go you see make a video we can then also say we can select personal and change this from make a video to um eat lunch with steve uh and there you go you see we've got a personal one here if we refresh the page these will be consistent we can also tick this checklist and refresh page and you'll see this is also consistent we can also edit these make a youtube video and if we refresh again it all saves as you update and change things which is really awesome we say okay we've done this let's just delete it now so we don't have it refresh and there you go you can see it's working as expected everything works really nice and this is what we're going to be building in today's video so without further ado let's get in to the code okay guys so as you can see here we have an empty folder inside official studio code so the first thing i'm going to do is open up my terminal and we're going to be using feet to actually create our uh boilerplate our you know our our starting code so we're gonna say npm create feet at latest then we're gonna give it a name i'm just gonna put dot to say create it in the current directory i'm gonna do double hash and then template and i'm gonna sell it as few which go use just a few js versions let's hit enter and then it's gonna ask for a package and we're gonna say to do app hit enter and then we can run npm install to actually install the dependencies now while that's doing that let me just quickly go into our tutorial into our source and paste a css file now this css you can find in the github link below or if you want to watch me actually code all this css i would explain it you can head over to the javascript version of this tutorial and check out i don't want to rewrite it takes a long time to rewrite the css um so i decided that it would be easier just to paste it let me just quickly show you this inside of here and i'll quickly i'll slowly scroll down there as you can see there's quite a bit of code it's over 100 odd lines but it's very straightforward and if you do want to get this coaching gear in the github link below or watch the ufd javascript video which will also be linked down below if you want to learn it how to do it in two different ways you can check it out down there and there you go that's everything in this file so with that out of the way let's go into well let's check if that's right now hit hassaran we can now say npm run death and just hit run and then if we just refresh over on the right here you'll see we are given this just plain template here so let's remove all that code let's go to app dot view actually let's go to main first and let's just import our main.css file you can see that's now changed the way this looks uh and close that we're done with that we can delete this assets folder we can delete the components folder we can delete effing in there in here and this whole style tag because we're using a css file and there you go we could just put so get here saying like hello world obviously wrap this in a tag um and there you go that's working and you can see that's changing as we go so first we're gonna do is we're gonna start off by just adding in some um markup so we want to import some sorry not markup some javascript so we want to import and we're going to say ref on mounted and computed also we want to get watch from few so these are different uh things you can use with the composition api and fujs we've got our reference um which is basically how we're gonna handle our state we've got on mounted which is gonna be used for when we first render the page or render the component we're going to uh call this here and this is what we're going to use to get our local storage out of local storage we're going to use computed because we want to have things in order so we're going to have a todos array but then we're going to have a computed value which is going to be a a to b or a to c sorry um computed list rather than halfing or not ac it'll be done by date sorry so it'll be ordered by the date it was created and then we'll also have a watch file here which will basically watch for any changes in our references and if they update it or update our local storage so let's start off with creating a few references so we're going to say to do's is equal to a empty array we're then going to say to do's const name so it's equal to an empty string we're then going to have an input which is going to be our content and we set that to an empty string so that's going to be the content we enter inside of our actual input field we're going to say inputs and we're going to give a category and this is also just going to be we're going to set this to null because it's going to be null by default we don't want our to-do's um underscore asynchronous um or ascending sorry not asynchronous um and what we're going to do is say array sudo's dot value dot sort and we're gonna sort a b and then we're gonna say break this into its own little function here and we're just gonna return b dot created at minus a dot created at and that should oh cancel save that should give us back a asynchronous uh or a sequence ascending um a list by date so it should show the latest up front and the oldest afterwards or i might be wrong and i need to flip b and a around but we'll find out in a moment now we've done the filtering we next want to let's start with our markups let's actually get some things displaying on the page so inside of our template the first one we do is i'm going to create a main tag with the class of app um and then inside of here we're going to have a greeting oh a sec wow i've got caps lock on it will not turn off uh we want a section called greeting and inside of here we're gonna have a h2 with the class of title which is actually going to be a it's gonna say what's up comma and then we're gonna pass in an input field it's gonna be of type text we're going to give it a placeholder of name here and we're going to say fee model is going to be equal to name which is something we set up here so you can see here with nothing in there it's there but we can then enter our own name and that should save however it's not going to save as we refresh you can see it's now removed and it's no longer there which is kind of annoying we kind of want it to be persistent so what we want to do is we want to call this watch function we're going to say name and then we're gonna say new value we don't need the old value for this um and we're gonna go in here and we can either console log new value or we can say local storage dot set item name and we set the name equal to the new value so what this is gonna do is we're gonna we're gonna be watching this name if this changes we're gonna get the new value it's changed to and we're gonna set our local storage to name but this still isn't gonna work so let's say here we just set my name to tyler and we're going to refresh nothing's going to happen if we open up our um console and go to application you can see name has been set to tyler we also have to do so which we could delete so you can see my name has been set to tyler we could also change it to like steve we need to save this side sorry um i don't know what happened so steve you can see that's now changed to steve we could change it to tyler um but when we refresh it will not be set because we're not actually pulling it from the local storage so to do that we're going to call on mounted we're going to create an arrow function and in here we're going to say name dot value is equal to local storage dot get item name then we're going to say else and empty string hit save and there you go you can see that set now if we delete this and we refresh you can see we get nothing there and then we can enter our name and it is saved and there you go that is all we need to do to actually save the name we can also do a similar thing with the to-do's but i'll show you that once we get there let's get back down to the marker so underneath this section we need a place to actually create a to-do so we could create a create to do section we're gonna have a h oh sorry a h3 and this is gonna say create a to do and there you see that there we could probably make that block capitals that looks a lot better um and then under this we're going to create a form we're just going to have and at submit binds to it so we're going to say at submit so when we submit this we're going to prevent default and we're going to call add to do which we don't currently have so let's just create a constant called add to do and sell it just to an empty function for now we'll deal with that a bit later um so underneath our form let's create a h4 that just says what's on your to-do list question mark so this is where we're gonna add that we don't want an input field uh again an interesting input field if it will want to work an input field of type text um we're then going to give it a placeholder which goes set to e dot g make a video then we want to set the fee model to be equal to input content so now we have this and as we enter this we can actually see this changing in our input content section so anytime we change this our input is now bound two-way bounded to this so this is now set so let's just remove that and let's just make this more readable so let's break these down onto these attributes down onto separate lines here um give that one of those and there you go so that's now easier to read now underneath this section we want enough h4 and this is going to say pick a category so we're going to have a category you can actually select so we have our uh to do so you could say make a video and then in the categories you want to know if this is a business is this for our business or is this just a personal to do so to do that we're going to create a diff with the class of options inside of this we're going to have two labels they're not going to have force on them they don't don't need it because we're going to have our inputs inside of them and we'll call this of type radio we don't well we need a name um and this is going to be called category we do not need the id um although it probably would be useful to have one in these cases but for this one we do not actually you know let's just give them the id of category one because i think i styled the id and we'll have enough one of category two in a minute we're then gonna have the value to be bis-ness oh this is that's the one and then we're going to fee model this to be attached to our input category so what we're doing here is we're getting our input we set a radio and you can see it here and we're gonna set a category category one um business and input category we don't need this id i don't think actually i'm gonna remove it i'm i'm taking the risk if we need it i'll take you know we'll find out um we're gonna then create a span called bubble and as you can see it's already there it's styled because this is all in the css and we're gonna call this business because this is the business bubble now underneath here we're gonna create this diff and call it business and there you go we've got our business selector now we can copy this paste this underneath change the value to personal um and change this also to personal and finally this business at the bottom to personal hit save and you can see we have a array that's changing and if we sorry not an array a radio button that's changing if we say input category underneath it's set to well there you go so we have business personal business personal business possible and you can see they just change depending on what you click um which is great so let's just remove that as well now underneath the options diff we're going to add in just a submit button here so we're going to create an input of type submit which is just going to have to foul you off add to do and there you go you can see we've got the button here so that's great we now have a a form that can add a to do but the problem is the add to do is empty so what we need to do is actually add in some code here so the first thing we'll do is we're going to check if our input content content is um dot value dot trim just to make sure no one's just put space in there is equal to an empty string so if it's equal to an empty string that means no one's putting any content in there if it's just spaces like this it will also remove those spaces um we're also going to check if our input category dot value is equal to null so basically if we have no nothing in there if either one of these is true so if this is empty or this isn't been selected we're just going to return and we're not going to do anything so if we hit add to do now nothing happens we can put a log pass here saying add to do just so we have you can see if we hit this in our console there is no add stupid if we fill this in and say test and hit business and add to do you see add to do shows if we just add spaces and do this you can see add to do doesn't render again if i clear that it does not if i do a t here you can see it does so there you go you can see that's how that works so the next thing we want to do is we want to say to do dot value dot push and we're going to push in some content which is going to be input dot content dot value we're then going to get our category value and then we need to create that this is actually going to be a new date dot get time um and the reason we use get time is because this returns um our date in milliseconds which is what we're gonna use to compare inside of our to-do's ace uh ascending so what's to do is value push that's good we also need one more thing in here it's going to be done and we're going to set this to false because by default nothing is going to be set to done which is great now that should actually save every time we add a to do however this is just going to add it to our to-do's array and not to our local storage so we need to take the same method we use down here and change up a bit so we're going to say watch to do's we'll say if there's a new value what we're going to do is basically do the same as before local storage dot set item to do's to to do well yes jason dot stringify knew foul um but this isn't going to work by default so this is going to allow us to once we first initially set our to do's this will work however this will not work when we push because push is adding inside of it the only way to call a watch is to completely change the to-do's value by doing so such as to do's that value is equal to and whatever you want now to combat that you can actually pass some options in here and one of the options is called deep and we can set this to true so what deep means is it's going to look through everything it's going to look through each individual array item element in here and then if any of it changes so if anything changes inside of this deep will catch it and then we'll call this function again so let's just hit save and let's just try this out let's just say make a video let's say it's a business and hit add to do and we get an issue date dot get time it's not a construction they oh i need to pass in parentheses there because i'm calling a date let's refresh this and let's try this one more time let's say make a video question oh just not question mark business had to do and then nothing happened right but if we go to application you can see we now have to do's in here let's say we add another make a let's say get lunch and set this to personal and to do you can see we now have a second item here we have our make a video and i'll get lunch now just because i want to test this inside off underneath the bottom here let's just dump out our to do's asc because i want to see which cat which way to make a video is first and get lunch is last so i think that means this needs to be b and this needs to be a oh also we're not going to have anything there because our creator that is not actu sorry our actual we're not pulling our to-do's so this now our to-do's array is actually empty so to fix that in on mounted we want to say to do's dot foul value is equal to jason dot pass because we stringified it originally um and then we're gonna get i am to do otherwise we're gonna excuse me that should just be a plain array actually this can be removed and if that comes back for nothing we'll just pass in an array and there you go so you can see get lunch is now first rather than last because we made to get lunch after so if we added a new one to this let's say just test a business one and you see test becomes first which is exactly what we want because if we change this to to do's you'll see test should swap to last or not maybe not or maybe i'm doing this completely wrong in my head but hopefully that works so if we change these around it seems to work if i make a video was our last one which is fine that means b minus a save is correct it must mean that to do's is just being pulled back in the correct order which is fine um this is actually still working if it does end up being in the wrong order which is fine that's good okay so now we've got that working we have one more section to do which is actually listing the to-do's out so underneath this section we want to create a new to do hyphen list section we want to create a h3 which is just going to say to do list there you go and underneath this we want to say diff dot list now in here we want to have a diff this is going to have a fee for attacher we're going to say for every to do inside of to do's a ace ascending we're then going to pass through a class bounds we're going to pass these template strings and we'll say to do hyphen item so you can see there's three arms in our list and now we've got these blank boxes there and we're going to check if to do dot done if that's so let's pass this and and um method here and we'll just go past back done and that will basically set this to done if the to do is actually set to done so underneath here we just want to say we want to add in a label with nothing kim and inside the label we want to say input of check box we do not need a name or a id have we do need a fee model set to to do dot done now underneath this we want a span with the class of bubble again we're going to bind it and you see these template literals here and we're going to pass in a dollar sign i'm going to break this down i'm going to say to do dot category oh god to do dot category if it's equal to business then we're going to pass through um let me just close this as well because it's gonna error else so we're gonna pass through business otherwise we're going to pass through personal and i have just realized we don't even need to do any of this because this will either be business or personal so all we need to do is pass through to do dot category so i i just went to write all that out to do a ternary operator when i didn't need to and there you go you can see we have these check boxes we can check and if i check them and refresh you can see it's actually safe because now get lunch is set to true if we untick that you'll see get lunch is now done false um so that's basically showing that's working we then want a to do content diff let's scroll down there um and inside this to do content we want to pass an input which is a type of text with fee model being our to-do dot content save and there you go we now have this here and we can actually update it so test could be um test a uh test a add i don't know test an ad and add get your grammar right there tyler there you go test and add and there you can see it's actually updated inside of our local storage if we refresh it actually is saved which is good we can close that now because i think you've got the point of local storage and how it works now underneath this we just want actions and inside of here we just need one button we originally had two buttons one with an edit button one for delete however we can actually just update this whenever we want by just typing in here now rather than having an edit button that does it for you so once you change this button say delete this will also have the class off delete and we're going to have a click event now this is going to say remove to do and we are going to pass through the to-do we want to remove now this isn't going to work because we do not have this function so let's go up here and underneath add to do let's create a constant called remove to do which is going to be equal to a arrow function and we're going to say to do dot value is equal to to do stop value dot filter we're gonna get the current um we're gonna go we're gonna loop through every single to do in there and we'll check if it's not equal to to do then we're gonna add it back to array if it is equal to to do then we're not going to add it back and this will return false and then it will only have the ones we don't want oh i've just created a new tab that's fine refresh and now let's just delete test and add right so let's just delete and there you go you can see that works so that is everything actually working in this tutorial so now we can add a new to do let's say um complete or edit um this video well i'm gonna have to do that so let's say that our business ad to do edit this video is now at top because it was the last one we added um and then we can get our lunch maker video um and let's just say we've done our lunch we've made we've made the video we just need to edit this now there you go let's say we just want to delete the lunch and there you go you can see that's all working really great now one thing i have noticed is this is still filled out and we kind of want to reset that so how we do that is we're going to say to do no input content dot value is equal to an empty string and input category value is equal to null now every time we submit a new one let's say um make pizza because that's a fun thing to do and to do you can see that is reset and that's a lot better so there you go you can see that is working and that is really nice so we can tick this off we can tick this one off delete them and i think it's working so guys if you learned something new do not forget to leave a thumbs up smash that subscribe button if you want to see more and don't forget to leave a comment if you have any questions if you're new around here you can always um jump in our discord description down or discord we're in the description down below and ask any questions in our help channels if you get stuck or just join the community and have some fun also we have memberships on this channel so if you are a long-term person who's been watching these videos for a while and you want to support me on my channel please consider looking at the memberships just click to join have a look at the perks you can get by looking at those and then hopefully if that's something that you want you can actually click on it and support the channel and get some perks as well but for now guys thank you for watching this video and i will see you in the next one peace [Music] now

Channel: Tyler Potts

Views: 100,962

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: qhjxAP1hFuI

Length: 26min 17sec (1577 seconds)

Published: Tue May 31 2022