How to Code A Better To-Do List - Tutorial

hello and welcome back to web dev simplified my name is Kyle and today is a really special day because I have the privilege to work with Kevin Powell one of the best CSS and sass teachers on all of YouTube to make in advance to do this application for you he covered all of the HTML CSS and sass for the entire application in his video so I highly recommend you check out not only his channel but also that video linked down the new description below in this video we're going to be going through all of the JavaScript to make the to-do list application actually work and function and save to the browser so if you're new to the channel make sure you subscribe for more videos like this where I simplify the web for you in all topics such as node JavaScript HTML CSS anything webbed related and with that out of the way let's get started so here we have the design that Kevin created in his video as you can see we have some lists over here that when we click on them it'll change the list over here which we're going to implement in JavaScript we also have these check boxes that have a really smooth animation when you check them and uncheck them and we want to be able to make these be a clearable by clicking this button down here we also want to be able to delete the list type something in and actually add that to the page so we have a lot of JavaScript work that we need to do on this application but the very first thing we need to do is just create the script file that we're going to use so let's create a new file over here what is call it script jeaious and we want to include this in our index out of HTML and we're just gonna include this at the very top here we're just gonna put a script tag make sure we type the defer keyword so that we actually load this javascript after the page is done loading and then we just set the source here to be script jeaious close that off and they regard java scripts being loaded into the page and i think the first thing that we should tackle is this list section here we want to tackle the list because it's a lot easier than tackling the actual to do's first so to begin with we're just going to tackle showing a list of tasks so let's open up that in that script JJ is here and the first thing we need to do is to create a variable to hold all of our list so we're going to create a variable we're just gonna call it list and we're going to default this to an empty rate because by default we have no list on our application when it loads also we want to get the element which is the container for all of our different list text here so we're gonna create a variable we're gonna call a list container and we're just gonna set that equal to document dot whoops query selector and figured we're just gonna pass in what we're gonna query to get that and in our example we're just gonna create a data attribute on that and we're just gonna call it data list just like that so that'll be our list container and this is going to be our list of list so in our index at HTML let's actually find that list container and if we go down here we see this thing with a class of all class and then we have been here our task list so let's just add that data attribute data list and this right here is going to be what we're selecting in our JavaScript using this line right here so this list container is corresponding with this unordered list here which is what contains all of our items in here now what we want to do is we can just comment these out for now because we don't actually want our list to by default have anything when we started up we don't have to be loaded from this list variable here so now to do that let's create a render function which is going to render our list for us come down here just create a function call it render and inside of this function we want a clear list container first so we want to take this list container and we want to clear it so we'll create a function which will be called clear element and we'll just pass it the element we want to clear I will do that in a little bit so we'll just make this element or this function here clear element and it's going to take an element for now it's not going to do anything but what it's going to do is clear out all the elements in it that already exist the next thing we need to do is actually populate this element right here this list container with all of our different items so let's copy what one of these lis looks like just like this so that we know what we're actually working with so we want to create an Li that has the class of list name on it go down here and we can just say list dot for each and inside here it's going to give us a list so for each one of the lists inside of our list for example we're going to have lists that look like this for now it's just going to be a string which is going to be the name so we'll just have name and to do as our two different list items all we want to do is we want to create a list element so we can just create a variable here call it list element and this is just going to be equal to document dot creat element there we go and we pass it the type of element we want which in our case is an Li because as you can see up here we're creating an Li next thing we need to do is we need to take that list element and we actually want to add that class to it so we're just going to take our class list we're gonna add our class which is list name so let's just copy this down in here and there we go now a class to set our element is set the last thing we actually have to set is the name of our actual element so the text inside of it and we can use a property called inner text to set that you just said it here equal to our list because right now our list item is just the name of the list so that's all we need to do to get all that set next thing we want to do is actually make sure we append this to our list container so we can just come in here we can take our list container we can just say a pen child we're just going to add a child to the end of it and we can just append that list element now we can remove this li because we don't actually need that Java Script now the last thing we have to do is actually call that function close do that all the way at the bottom of our page we're just gonna call render just like this and now if we save it you still there's two lists are being shown up inside of our container here which is perfect we just need to implement this clear element because it for example we go in here and uncomment all these again and save those are still in there and we want to make sure everything in here is deleted every time we call render so in order to do that this clear element is actually really straightforward we just want to set up a while loop and in here we're gonna check to see if the element has a first child so we can just call while element dot first child oops child so this is saying if the element has a first child let's remove it so we'll say element dot remove child and we just want to call it on element dot first child so this is going to remove all the children of the element and now when we save this you'll see that all those existing elements are removed and it only adds our new ones now we can come in here recom at this back out because we don't want these to be in our HTML by default anyway and there we go our lists are actually populating correctly but as you can see over here there's this active list class that we want to add to whichever list is selected and right now we have no way to represent what list is selected so we actually need to use IDs and objects to do that so instead of using just names here let's change this to an object and this object for example is going to have properties of ID and this ID is going to correspond with some ID we'll just say 1 by default we're also going to give it a name so in our case we're going to give it a name here of name let's do the exact same thing here with our other to do you just close this on down here and we just want to do the exact same thing but instead we'll use an ID here of two and we'll use a name here of two do we save that you now see that we're getting objects here because this list is actually an object so we need to use is we need to use a list dot name here instead of just the list and that will actually print out the name for us so now as you remember we added these IDs here and the reason we're adding these IDs is down here what we want to do on our list element we want to take our list element and we actually want to add a data attribute so we're just going say data set list ID we want to set that equal to our list ID and this way we know which list were actually selecting so when I click on this name I actually know which one it is because it has this list ID on it so now that we have the infrastructure set up for rendering our list and also being able to identify which list were selecting the next thing we want to work on is being able to add lists to our page and this is done by just typing in a list name here and clicking enter and that will add it to the list but as you can see clearly that's not working so we need to write some JavaScript to do that and what we need to do is we need to use this form right down here so instead of this form all we're going to do is to add a data attribute to it we're just gonna call it data new list form so that we can identify this in our JavaScript and we're also going to add a data attribute to our input here we're just going to call this here our data new list input that is all we need to change in the HTML to get this working let's save that go back into our script here and actually select these elements so first we're gonna want to get our new list form and as you're just going to be again the document query selector we want to get that data attribute we just set so we'll say data new list whoops list form just like that and we wanted to be exact same thing for a button so we're just going to say here are our input new list input make sure we capitalize that so it looks correct and we just want to change this from form to input so now we have both our form and our input which we can use in our JavaScript and the first thing we want to do is set up an event listener which we're going to use for our new list form so we can just come down here create a function are not a function sorry we can take our new list form and we just want to add an event listener to it and we want to do this anytime that the form is submitted and we get an event when we do that and what we want to do is the first thing we want to do is actually stop our page from submitting because if we come in here and we click enter to submit it actually refreshes our page for us and we don't want that so the first thing we need to do is type in a dot prevent default now if I go back over here type something in and hit enter you see nothing actually happens because it's preventing our form from submitted itself which is ideally what we want now the next thing we need to do is actually get the name of the element that we typed in here so let's actually fairly straightforward we can just come in here and get our listening this is just coming from that input element so we can say a new list input dot value and this is the name that we typed in right here and what we want to do is first we want to check to make sure they actually passed in a name so we can say if the new list or if the list name is equal to null or if the list name is equal to a blank string we just want to return from this function because they passed us something like they essentially didn't type anything in here and then hit enter so we don't want to actually do anything when they do that we want to make them actually type in a name so if they do type in a name we'll come down here and create a new list and we're gonna actually create a function for that so we're just gonna say create list and we're gonna pass in here the list name so let's create that function right now it's going to be actually a very straightforward function create whoops create list and it's just going to take a name of the list we want to create now this is just going to return an object and as I mentioned earlier these are going to have an ID so we're going to have an ID and to make it a unique ID really easily we can just take the date object we can get the current time and we can just convert that to a string this is going to give us a unique identifier pretty much because it's going to be based on the current time that they run this operation next we can actually just set the name here to the name that they pass in and also these lists are eventually going to have to list a tasks that are associated with them so we can just set that to an empty array because by default they're not going to have any tasks now the last thing we need to do is make sure we return this object so we can just type return in over here and now it's actually giving us a list right here that's brand-new with the name that we typed into the input last thing we have to do is actually clear out this input here which is again really simple to do we just take that new list input we take the value and we just want to set it here to null then we can just take our list variable so this is all of our list and we just want to add that list to so we can push the list and we can call that render function again so now if we save that type something in here and hit enter you see that it actually adds that to our list and it deletes what we actually typed in but the problem is is if we refresh our page this is not being saved anywhere so we want to make sure we save this to the user's browser so that every time they refresh the page they're going to have all their to-do lists saved as before so first let's just clear out this list because we don't actually want to have anything in there by default so when we first get to this list page everything is empty and we can add things just like this now in order to save and store things on the user's browser we're going to use what's called local storage which restores information inside of the user's browser and you need to use keys it's essentially a key value pair so we need to create some key we're gonna store information so let's create two keys the first one we're gonna call local storage whoops storage tasks are just list key and we're going to set this equal to for example you'd think just the list but one thing that's really important when you're storing things in local storage is you want to make a namespace so in our example this is a task list so we're gonna namespace this as task dot list and essentially what this does is it prevents you from over writing information that's already in the local storage or preventing other websites from overwriting your local storage keys so right here we just have task dot lists so we don't have to worry about any collisions with our site or other sites and anything like that so now this is where we're going to store our list which we get from here and the first thing we want to do when we load our page is instead of setting this list to an empty array we actually want to get this from the local storage so we can just say json dot parse because this is going to come out as a string so we can say JSON dot parse and we want to get local storage whoops local storage get item and we don't get an item with that key so we'll just pass to the local storage list key and if for some reason that doesn't exist we can just say or we want to just use the empty array here so let's lengthen this up so what this is saying is as saying get this information from local storage using this key and if it exists I want you to parse it into an object because it's just a string right now or if it doesn't exist give us an empty array of lists to start with so when we save this you'll see that all of our items are disappearing because we have an empty array by default censors nothing already in our local storage which is exactly fine what we do want to do is create a save function so we can save these lists so let's come down here right above our render we'll just create a function that's called safe and we want to do is we want to save this list to the local storage and this is really simple we could just say local storage dot set item and we want to set this as a JSON string so we'll say json stringify and what we want to do is just string a fire our list here so we'll just say json dot string a five list and this is going to save that information in our local storage we also need to make sure we specify what key were using and again we're gonna use this key up here so we first passed the key and then we're passing the value of that key now let's add something to our list here hit enter refresh and you'll notice still it does not persist and that's because we never call this save function so let's create another function here this function is just going to be called save and render and all this is going to do is just call a save function and call our render function so we have save and we have render and now what we want to do instead of just rendering we actually want to save and render here whenever we have a new list being created and now we can save our page type in a new list name hit enter and now when we refresh you'll see that this list name is being persisted because it's in our local storage and we can keep adding new ones hit enter and refresh and those are always going to be there force and it's pulling it in right here as soon as our page loads the next step that we have is to actually be able to select these lists because as I mentioned earlier selecting them doesn't do anything but because of the fact that we added these IDs here is actually going to be fairly straightforward to set the selected list when we click on them the first thing we need to do is get a variable for our selected list we can just call this here selected a list ID and what we want to do is again try to get this from local storage if possible because we want to store this in our local storage so we'll say local storage that get item and we need to set a key for this so let's copy this and this is going to be called local storage selected list whoops selected list ID key right here selected list ID there we go we just need to make sure that this is different than the list up here that we used now we can try to get that item with this name of selected list ID key and if for some reason we don't have anything that's perfectly fine this is still going to work it's just going to return null which means we don't have anything selected which is great and now we want to use this selected list ID so down here inside of our render function we want to check to see if the list that we have right now so if the list ID is equal to the selected list ID and that means this is the list that's selected and we want to add another class to it so we can just say list element dot class list dot add and if we go to our index dot HTML we can see what that class name is it's just called active list so let's copy that over in here paste that just like this put this on a different line so it's easier to read there we go and now you can see that if our list is the currently selected list we're going to set it to active list and right now you see that nothing actually changes which is perfect because we don't have a selected list yet now the next thing we need to do is actually set it up so that when we click on a list over here it's a exit force and this is probably the most complicated thing we'll do in this tutorial and that's because when you dynamically add an element to the page here you need to always add an event listener to it but there's a way you can get around this by adding an event listener to the container that contains all the elements you're adding so in our case we're adding all of these elements to our list container so let's come down here to our whisk container and add an event listener for it we can say list container dot add event listener for click so now every single time that we actually click on any of the things inside of our list container it's going to fire a click event for them and in our case we only want to get our click event listener when we have an li element so we can actually check this we can say if a target and this is the element that's been clicked and we want to check if the tag name we want to convert it to lowercase so if the tag name that to lowercase is equal to Li so essentially if we clicked on an Li element which in our case is one of these list elements then we want to actually run the code in here and all we want to do is set our selected list so we can see our selected list ID is equal to e dot target again the thing that we've selected and we want to go to the data set and get that list ID that we set down here earlier where we said data set list ID is the list ID so essentially we're just telling it which ID we are selecting and then we can call save and render which is going to save our page and rerender everything so now let's save that and when I click on one of these lists you'll see that this is highlighted because it's adding it as our selected list ID here and when i refresh you'll notice it's not persisting that and that's because in our save function we're actually not saving anything other than our list we need to save our list string as well so we can come in here local storage set item and we want to set the local storage selected list ID key we want to make sure we set it to our selected list ID now if I say that select something and refresh you see that persist through and it remembers I select that I get select something else refresh and again it's going to remember that we selected that and the great thing about our render function the fact that it clears everything and then rear Enders it all is we don't have to worry about removing the class from the old element when we change it because it's just going to delete everything and then re render it so it's always going to change the class for us while I was having to manually do all that work the last major list related thing we have to do other than showing the task is to actually make this delete list but work it should delete whatever list is currently selected so back in our index.html we can scroll down until we find that delete button it's all the way at the bottom here button delete and we want to make sure that we adhere at attribute a data attribute which is going to allow us to select it in our JavaScript so we're just gonna call this one data delete list button just like that and we can calculate so we can paste it at our JavaScript whoops screw up all the way to the top and make sure we select a new element here we're gonna call this one delete list button and set it equal to document query selector and we want to just query select on that data attribute that we just set of delete list button make sure we actually capitalize this here we go and now we just need to add an event listener so we can just scroll down here a little ways add our event listener we want to do it whenever we click this button and what we want to do in here is we just want to delete the list that's currently selected so we can set our list equal to a new list and all we want to do is filter our current list this is just going to return a new list that has all the items that match their criteria that we set so we can just come in here and say as long as the list ID does not equal the actual current selected list ID so essentially this says give me all the lists that are not the one we have selected those will be on new lists and then we want to take our selected list we just want to set this here equal to null because we no longer have a selected list and of course the last thing we need to do is call that save and render function so we can rear-end our entire page now if we refresh and click delete list you'll see it removed that list and unselected it and now we can select the new list delete that and if we refresh you see it persist those change so let's add a new list we're just going to call it one two three make sure it saves when we refresh just like that perfect and now we need to actually go on to the harder part of the application which is working on getting all the tasks to render properly so in order to do this we're going to need to be able to select a lot of elements inside of our JavaScript so let's go into our index.html here and look at how our tasks are currently arranged the first thing we see here is this container this to-do list is what contains all the information over here it's this big round box that has everything so we want to be able to select to this we're going to call our list display container and then here we have our title as well as how many tasks are in we again are going to need to be able to change these in our JavaScript so let's make sure we select them as the list title and down here we're gonna have the list count there we go now in here this tasks div this is what actually contains all of the individual tasks as you can see here by this task class so we need to again be able to select this we're just going to call this tasks that should be enough information to get us started on what we needed to do to render the list over here let's go back into our script j/s and actually select these elements so we have our consti and the very first thing we want to get is this whole container so we can just say list display container we're going to set that equal to document dot query selector and again our data attribute here is going to be whoops data list display container there we go close that off and again we need to be able to select the actual title here as well as the count so let's create variables for that here we're gonna have the list title element which is just a document dot query selector and we want to make sure we use that data attribute which was data list title and let's copy this down we're gonna do the exact same thing but for the count instead of the title so we'll change this to count just like that and the last thing we added a data attribute for was the container that held these two dues we can just say Const tasks container is going to be equal to document that query selector and we want to do it on the data tasks oops tasks just like that so now from here what we want to do is we want to change our render function to populate these containers with the proper information so let's go down to our render function and let's actually move this list out into its own function we'll just call it function here which we're just going to call render list and here we go those are just going to render all of the list for our container and we can just call that up here render list and now if we refresh you'll see that everything is still working even the add so we know that we don't have any problems now the first thing we want to do instead of our render is we want to check to see if we have a selected list so we can say if selected list ID is null this means we do not have a list selected else if it's not null down here it means we do have a list selected so first if we don't have a list that we don't want to display this big box over here this big section so we can say our list display container dot style this is going to allow us to style it we can say we want to style the display element and we want to set it equal to none here so if we don't have any selected list will display nothing so now if we click delete this entire section is going to disappear because we have no select list right now but when we do have a selected list we want to make that appear so in the else section what we want to do is we want to take our list display container dot style and we want to set the display here equal to an empty string this is just gonna revert it back to what it was now if we save this you see that shows back up because we have a selected list again if we delete it it goes away and when we click on it it shows back up also we want to change this section up here as well as this tasks remaining so what we want to do is we can come in here we can get our list title element we want to change the inner text we just want to set that here equal to our selected list which we don't actually have so let's create a variable for that we're just gonna say Const selected list is equal to list dot filter or dot fine sorry and we have each of our lists so we want to find the list that has the ID of our selected list so we'll say list ID is equal to selected list ID so this essentially means this is our selected list and we want to do is take our selected list name we want to set that to the name of our title and if we save that you see it says one we select two and it's going to say two up here so the next thing we need to do is set our tasks remaining to do that that's actually fairly simple but we're gonna create a function for it so we're just gonna say render task count and we're gonna pass in here the list that is currently selected so we know which one we have to get the task count from so let's create that function right here render whoops render task count and this is going to take in a selected list and inside of here what we want to do is we want to get the number of incomplete tasks because here we can select a task and we can unselect the task just like this so these tasks are going to be marked as completed so our tasks are actually going to look a little bit like this let's see where we did it in here we're gonna have a object and this objects gonna have an ID which is going to be our task ID for example one and inside of here it's also going to have a name which is going to be whatever the name and then it's going to have lastly a completed fly and this is just if we've completed it or not so true would mean it's checked and false would mean it's not checked let's actually use the word complete here because I think it looks a little bit more sense so this is what our IDs and everything are going to look like for each task so with that in mind let's scroll back down here we're rendering our task list just like you're at task count and we want to do is we want to get all of the incomplete tasks because this is only going to show the number of incomplete tasks so we're gonna create a variable here which is called in complete whoops complete tasks just like that make sure we capitalize that T this is going to be equal to our selected list dot tasks we want to filter this list of tasks so it's going to take in a task here and what we want to do is we want to get only the tasks that are not complete so we can say tasks that complete and if we just put an exclamation point in front of this it's going to say get all the tasks that are not to complete and return those so this is going to be every task that's not complete and we just want to get the number of those so we can say dot length so we can actually change this to incomplete task count this is just going to be how many tasks we have not completed next thing we want to do is convert that to a string so we're gonna say task string and this here is going to be equal to if we have any incomplete tasks so say if incomplete task count is equal to one what we want to do is we want to use the word task so just like this will say task but if it's not equal to one we want to return the word tasks this is just going to allow it to be pluralized so it'll say one task complete or it'll say two tasks complete depending on how many are incomplete here and what this is is it's just a compact if-else what if st. has anything active the question mark and before the semicolon is what happens if this is true beforehand and everything after the semicolon is what happens if it's false so now we just want to combine that so we can say our list count element we want to set here the inner text and we can do that using string interpolation which is a backtick anything in these back ticks we can actually set variables using dollar sign curly brace and everything and here is a variable so for example we can print out an incomplete task count we can also come in here use the same thing to complete our task string and then lastly we just have the text remaining I can actually spell properly there we go and if we save this you'll see us as zero tasks remaining and that's because by default up here when we create these elements work with no tasks these tasks being shown here are already in the HTML one of the next things that we're going to work on is actually making sure we render these tasks and here properly and to do that is actually fairly straightforward it's going to be almost exactly the same as the way we rendered our list so let's go back up here in our render function and the first thing we want to do is we want to clear our element which is going to be all of our tasks so this is going to be our tasks container and if we save this immediately you see all of our tasks are gone because we cleared them the next step is actually to render them so we're just gonna say render tasks and in here again we're gonna need to have the selected list so let's get started on that function we can just come down here we can say function render tasks this is going to take our selected list and inside of here the first thing we need to do is actually loop through all of our list tasks so we can say selected list tasks dot for each and we want to do this for every single task so everything inside of this code is going to run for every single one of the tasks that we have and if we look in our index.html you can see our tasks are actually fairly complex creating this in JavaScript alone is going to be very difficult to do so what I would recommend doing is actually using what's called a template if we just copy one of these tasks we can just remove it here scroll all the way down to the bottom of our page right before the end of the body and we want to use what's called a template tag and this template tag allows us to put HTML inside of it that doesn't actually get rendered to the page but we can access in the JavaScript so for example let's put it inside of this task here so we have the template for our entire task and we just want to give this template an ID so we can select it in here we'll just say ID task woops template just like that so now we can actually clone this template and paste it in for every single one of our tasks we just want to make sure we completely remove this information that corresponds to the specific task we also want to remove this for and this ID here because these are all individual to that specific task and we want to make this as generic as possible so there we go this is a completely generic task template that we can now use in our JavaScript let's go back over to our script in here and let's make sure that we pull that object in so we can just say here we want our task template this is going to be equal to document dot get element by ID and we just called that task template I believe let's make sure that's correct task template there we go yep so this is our template for our task right here and if we go down to render our task we can actually get this template pretty easily all we need to do is here is we can say task element is going to be equal to document import node just like this and this essentially is going to let us clone our tasks so we can say task template dot content whoops content this is essentially all the content inside of our task and we want to pass true because we want to actually get everything inside of it if we don't pass true it's only going to render the topmost which is just this div but nothing inside of this div so let's true it's going to render everything inside of this template and not just the top level element and this task element now contains all of this information inside of it this makes it really easy for us to duplicate this without writing it all by hand in JavaScript now the next thing we need to do is actually go through all of our elements so we can just say we want to check our check box so we can say our check box is going to equal to task element whoops element dot query selector and we want to get the input element this is just going to be our check box and we also want to be able to get our label our label is gonna be very similar but we'll just select label like this and the first thing we want to do is we want to set the ID for our check box so we'll say check box ID is going to be equal to task ID and we want to set if the checks box is checked so che check box woops checked is going to be equal to task dot complete complete just like that so this will check our check box for all of our complete tasks but it will leave the incomplete ones unchecked next we want to go down to our label and we want to set that for that we removed which in JavaScript we need to use HTML for and we can just set that equal to the task ID then we can take our label whoops label and we want to append our task dot name this is just going to make our name show up in that place right here where we removed our name from earlier now the very last thing we need to do is just take that task element and append it to our task container so we'll say task container dot append child of task element there go now we can actually test this by coming up here and by default let's add a specific task to our container so we're just going to say our ID is going to be equal to some string we're going to have a main which is just tests and we want to set it complete equal to false now if we save that and add a new list type this in and selected you should see that we have one task here which is perfect that it's set to incomplete if we were to set this to true save this add a new list and select it you should see that it's completely checked so we know that our code is working down there now let's actually remove this so by default our things don't have any tasks now we're getting fairly close to having this entire to-do list complete but right now we cannot add tasks that doesn't work and checking and unchecking them doesn't actually increment this clock up here and the clear completed still doesn't work so let's first work on adding new tasks because that's the easiest thing that we have to do in our index down here we want to do is we want to find that new task button right here and we want to go up to the form and we want to actually add a data attribute here so we're just going to say data whoops data new task form so we know what our task form is and as well for the input we're gonna say data new task input this is going to be very similar to how we actually set up creating new inputs so let's save that go into our script and select these objects so down here we can say that we're gonna have our new task button whoops not button new task form and that's document that query selector for our new oops our data new task form make sure that I spell document correctly and we can copy this down and do the exact same thing but instead of performs this is going to be for our input now we can set up our event listener which we can actually just copy this new list form because it's going to be very similar to the new list form but instead a new list we remember that this is our new task form and here instead of list name this is going to be our task name and it's going to come from our new task input and then we want to check here if we actually passed in a task name and if not we'll return just like we did before and now instead of creating a list here what we want to do is we want to create a task and we want to pass it in the task name and of course this will be a task variable so let's create that function function is going to be called create tasks and it's going to take in a name and this is also going to be very similar to our list so we'll copy that down it's going to use the same ID mechanic it's going to use the same names but instead of tasks here we're going to use complete and we just going to set this to false because by default our task is incomplete now we have our task here all we need to do is take our new task input and we want to clear out that variable and the next thing we need to do is actually set our task on our selected list so we don't actually want to push something to our list what we want to do is we want to get our selected list just like this we can say it's going to be equal to list dot find and we want to find which lists like so when a list ID is equal to our selected list ID this is going to be our list that we have currently selected and we just want to take the tasks on that and we want to add this new task that we just created just like that and then we'll save and render so now if we refresh come in here and type in a task for example new hit enter and that's going to add it to our list of tasks and even when we refresh you're saying that's being persisted we can switch switch back and it's still there now the next thing to work on is as you can see when I click this to check or uncheck it it doesn't actually change our task complete number and when i refresh it doesn't actually save that I actually checked that so we need to set up another event listener very similar to how we set up this click event listener here for our list container so let's come down here with our task container and we want to set up an event listener on us so we're going to say add event listener this is going to be a click event listener and it's just going to take an event and we want to do the exact same thing we want to check if our target dot tag name whoops tag name we want to convert it to lowercase and we want to just see is that equal to input because that means that we checked our check box over here essentially we clicked on our check box so if we clicked on our check box then what we want to do is get our selected list because we want to make sure we check that task is completed so we'll get the selected list which is just list dot find pass in the list here and this is just going to be list ID is equal to selected list ID just like that and now what we want to do is we want to get our selected tasks so we can say selected tasks and isn't going to be very similar we want to take our selected list we're going to take all the tasks inside of it and we want to find that individual task in our case this is just take a task here what we want to do is we want to check when the task ID is equal to e dot target ID because if you remember in our render function all the way down here when we were rendering our tasks you see that we set our check box ID to the task ID so we want to do is we want to take here where we were doing this our task ID and compare it to our check box ID so whichever one matches we know that's going to be the task that we just clicked on and then what we want to do is we just want to set that to complete so we'll say selected task dot complete is going to be equal to e dot target dot checked so this is going to work both if we check it or if we uncheck it because this will be true or false depending on if it's checked or not and then lastly we need to save this and all we need to do is actually rerender this part of our code right here the one that says tasks remaining so instead of doing a save and render we'll just do a save and then we'll just render the task count now we can save that and click and it didn't actually increment for us and that's because we need to make sure we pass in the selected list so now if we save it and we click on this you'll see it becomes one task remaining we click it again it's 0 tasks remain both of them we get two tasks remaining and the best part is when we refresh it actually saves our check to state and our uncheck state for us now the next thing we need to work on is our clear completed tasks button as you can see if we check these tasks and click clear completed task it's not removing them because we haven't hooked that up yet in a Java Script so let's go into the index.html here and find that button luckily it's right there and we're gonna set the data attribute which is data clear complete oops complete tasks button there we go let's make sure we copy this selector so we can use it inside of our JavaScript here and we'll just select that we'll say clear complete whoops complete tasks button there we go and that's just going to be a document that query selector of that query selector that we just copied for clear complete tasks spell document correctly now we can use this to add an event listener so let's just say here we want to add an event listener to that every time that we click on it get that event and inside of here if we just want to clear the list of all the tasks that are completed so we can get our selected list is the first thing we want to do so we'll say select the list is going to be equal list dot find we want to get the list and we want to get it where the list ID is equal to selected list ID there we go we have our selected list and we want to take our selected list and we want to set the tasks variable we essentially want to overwrite it and we want to overwrite it using the selected list tasks and we want to filter this so we're going to filter it on our tasks and we're essentially going to say all the tasks that are not complete is the ones that we want to keep so we're going to set the task list to all the tasks here which are not complete and all we need to do after that is call save and render now if we save that you'll notice we have an error and it's because I forgot a comma here again save it refreshed everything's working and let's click clear completed tasks you'll save removes that test says we have one task remaining and if we refresh it stays gone you will notice there's a little flicker when we refresh and that's because in our index.html we still have all these old tasks in here let's delete these now so we can delete all these old tasks that we no longer need this task should be completely empty when we load our HTML page also same thing with this commented out code we no longer need this this task list here should be completely empty when we load the page and now if we save we don't get that flicker as much anymore and now all of our information is working again if we select this clear completed and now we're all the way down to zero tasks we can add another task just like this add another one and so on delete the list if we need to everything in this application is working and we're done that's the advanced to-do list application for you if you enjoyed this video please make sure to check out my other videos which are going to be linked over here and subscribe to the channel for more videos of me simplifying the web thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 90,708

Keywords: webdevsimplified, todo list tutorial, to do list tutorial, todo list javascript, to do list javascript, to do list localstorage, code a to do list, how to code a todo list, how to code a to do list, how to program a todo list, how to program a to do list, to do list for beginners, todo list for beginners, to do tutorial, todo tutorial, program todo list, program to do list, html css js todo list, html css js to do list, javascript todo list tutorial, js, js todo list

Id: W7FaYfuwu70

Length: 39min 16sec (2356 seconds)

Published: Wed Jul 17 2019