Beginner Vanilla Javascript Project Tutorial

Hey oh that's that's not a fart that's just a chair hello there my gorgeous friends on the internet hope you are healthy hope you are doing great I have a special little surprise for you today as you know oh I release my JavaScript course almost a week ago and today I kind of want to give you guys a project from that course so if you haven't joined yet I still wanted to give you something so this is actually the first project of the course this is gonna be a bit more simple but it's gonna improve your foundational skills so if you still feel a bit uncomfortable in certain parts of JavaScript it's gonna give you a great foundation of all the basic things that we're gonna build out a nice-looking UI animated JavaScript to-do list so take a look right here this is what we're gonna build now again this is just one small project off the core so if you're interested in more projects bigger projects and more advanced JavaScript topics please make sure to check out the course link is gonna be in the description hope you're gonna like it it's 30 hours of JavaScript content goodness for all of you so consider purchasing if you're interested in it okay also so now that we're done with the JavaScript of course what's coming next on the channel what are we gonna see well in the next few weeks we're gonna do a lot of UI and UX so prototyping websites maybe a figma creating designs and affinity designer for whatever adobe you do you want to use anything you want to use some more design oriented content for the coming few weeks now this kind of preparation because eventually we're gonna get into blender unity and c-sharp so we're gonna transition more into game development alright but again it's gonna be a transitional period here so we're gonna do a lot of design stuff coming up okay so super excited about everything that's coming hope you're excited as well and let's let's build out the to-do list let's go [Music] the question is is the camera going to detect my face even though we have the glasses on very good but can you do this now Pam I would say why you do this but you did it so know why you do this okay in this section we're gonna recreate that to do list but actually make it nice-looking and all so let's start off by creating a new project we're starting off from scratch so please follow along if you want to build this little project out it's gonna be a great great practice for you okay so just a fresh fresh start here and what we're gonna do is create an index on HTML just aren't necessary things that we usually do our CSS let's do that I'm gonna call this style dot CSS and let's also do a p-- dot j p-- s okay so there we go let me make sure I'm recording I sometimes forget to press record and I'm just talking to myself for two hours okay perfect so now what we're gonna do is just add some basic HTML code in here so to generate one hold shift and one press tab and there we go this is what we have we're gonna rename this to to-do list okay now I also want to add some decent-looking fonts to this so let's hit save I'm gonna actually open this up in a new live server okay and we can go here just a new tab and we can search for let's search for Google Fonts okay click the first link and for this one I use Poppins so let's get Poppins click the plus pop this open we're gonna copy this from here and paste it right above here so let's go up here okay and let's also link our style dot CSS so we're gonna hit link dot slash style dot CSS okay finally our script tag down here we're gonna add a source of dot slash app dot j s okay am I missing something should we add something else let's also add font awesome for basically some basic icons that we're gonna be using so let's go to font awesome and let's actually search up CDN here because we're gonna directly link it to our website so let's click on the first one bootstrap CDN let me see is it this one let's actually go cdnas this is what we want okay fun awesome and I'm just gonna go here to the CSS tab let's just get everything for now so we're gonna hit copy here copy link tag okay perfect let's head back and let's paste it above our style dot CSS as well okay so basically that what this allows us to do is just use all of these custom pre-made icons and everything so let me show you in case you don't know font awesome we can just basically add these eye tags and it's automatically gonna generate these icons so let's just pick one out here I'll search out they change their website and it's so so weird right now I keep losing myself okay there we go so I want the adjust I can just start using this icon and I can just add this I tagged with a specific class it's gonna nice it and it's gonna add this automatically okay so we're gonna use it for like plus symbols trash can to delete things and things of that sort okay let's go back and start adding our necessary HTML code so down here and the body tag okay so what do we need I'm gonna just add a simple title so I'm going to create a header here with a h1 I'm gonna call this Ed's to-do list you can call it your your name because if it would be my name that would raise up some weird questions okay next up what we want to do is create a form and just do a form here we don't need an action here we can get rid of that and I'm gonna add an input here of type text that's fine and I'm gonna also add a class of to do input okay so basically what we type in here is gonna create us a to do next up we want to have a button and I'm gonna add a class of to do button to this there we go type is gonna be submit and that's pretty much it and here I actually want to add an icon so I'm gonna add an eye tag and I'm gonna add a class of actually let's Serge that up but we can do FAS f a plus square alright actually you're gonna see what this does okay so we have our button next up what we want to do is I also only create some sort of filter you know and you know what we're actually gonna get back to the HTML we're not gonna implement that we're gonna keep this one simple for now alright so we have we can add text we can submit the test the to do what else do we want well we want to actually see the to Do's so for that let's just go down here and just create a simple div with a class of to do container alright and inside here we're gonna have a UL but the class of to-do list and what I'm gonna do here is inside this UL I'm actually going to generate a bunch of allies or actually we're also gonna implement a bleed button and also a check mark button so what we're actually gonna end up doing with JavaScript is we're gonna create a div with the class of to do that has also an Li and also some buttons to it so we're gonna generate this whole thing out and I'm gonna show you how we can do more complex HTML generations like this so for now actually we don't need anything in here okay so that's that's good everything is looking at we're set up we're gonna add some basic CSS to this and also just search a big into the JavaScript you know what actually we might just do a bit of JavaScript and then add the CSS so we can actually see what's going on here okay so this is exciting I'll see you in the next one okay let's start up adding a bit of CSS a bit of JavaScript getting this thing to work so as you can see we have the plus symbol there and that's from the the font awesome again you can add like an Add button or submit if you want but we're gonna make this a bit nicer looking okay let me head back to the code here so let's pop this open and actually what I'm gonna do is kind of drag this in here so you can see what we're changing so let's close this up let's close this up we're gonna drag this down here a bit so you can see actually we're gonna tap between them now okay I keep changing my mind so first of all what I want to do is just kind of remove all the basic styling by adding a store symbol and we're gonna see margin:0 padding:0 and box-sizing order box okay so this just removes the basic stylings of the browser so now if we take a look now those are stuck all the way up there we don't have any margin Spelling's and anything like that okay for the body what I'm gonna do is actually add a nice background color I found and this one's gonna be a linear gradient like this and then here I'm gonna add a 120 degrees so it goes from down here to up here and the color is our we're gonna add a hashtag f6d three six five okay that's the first one comma the second one's gonna be FDA zero eight five let's see does it look nice and I cannot see anything hmm okay interesting so what's going on let's add change this to background image like that and now we should be able to see it okay so that that looks okay I like it let's go down here what I want to do now is change the colors so all the effects that I'm padding is gonna have a color of white there we go we can make this darker maybe just a bit yeah I didn't know you can mess around with this yeah just a bit darker so we have more contrast there yeah that's fine okay next up let's also add the font family because we added Poppins so let's do Poppins and stand serif okay there we go and also let's add amen height to this body out like a hundred VH okay next up we're gonna get the header I'm gonna add a font size of two REM just make that text a bit bigger ooh maybe it's a bit too big actually I'm zoomed in okay 1.5 okay there we go doesn't need to be too big next up what we're gonna do is get the header it's a worthy this h1 is and also the form and I want to Center them so I'm just gonna add a men height to both of them of 20 VH and then I'm just gonna use display flex with justify content center and the line item center line item center to basically Center everything there we go alright so we added the height here 20 so if we take a look with the inspector as you can see we have 20 VH and 20 VH here as well and we just centered them horizontally and vertically okay and we are getting close to start implementing some JavaScript so let's just add a bit more here and I'm gonna get the form let's get the form input and also the form button and then and I'm just gonna add some padding to this 0.5 Ram let's add some font size to Ram let's remove the border here we're gonna say none and the background it's gonna be white I know CSS takes a bit of time and I know you're here for the JavaScript but let's let's kind of make this nice-looking okay just a bit of padding to it we will remove the ugly borders and we also just increase the font size a bit and yeah that's kind of it looks already much better okay next up what I want to do is grab the forum button let's add a color to this I'm actually gonna give the color that we used up there so this one okay just paste that in there I'm gonna change the background of it to as you that's too white change the cursor to pointer so it looks clickable and let's also add the transition to this is the transition all 0.3 seconds ease okay and then we're gonna go down here and just add the transition button hover like this now what we're gonna do is just copy this color over from here but the difference is we're gonna add it to the background so we're gonna do is type in background and this and then - the color is gonna be white okay so we just kind of switch these around good okay good there we go that's what we have looks much nicer okay next up actually let's start implementing a bit of JavaScript next so we actually see what's going on here because we're gonna add those two do's and we cannot actually see what we're adding and how we're styling them so let's stop here with the CSS and in the next part we're gonna have fun okay let's start adding some JavaScript so what I like to do is kind of organize my code add the selectors up here if I have some event listeners to them here and all my functions go down here okay so let's start grabbing everything that we have and we have the to do input document query selector and this is to do input okay now quick cool shortcut that you can do is hold shift alt and just press on the down arrow like this on the down arrow and that's gonna duplicate it two more times or you can do control C control V I'm not judging you we're just gonna change this to do button and this is just gonna be to do button and this one is gonna be our big to-do list which is gonna be deed ul so this one because we're gonna append all the list items to this at the end so to do let's document the query selector and this is gonna be called to-do list okay hit save and we are good to go okay so let's create our first event listener we're gonna get the t-tube button and we're gonna add an event listener to this of click and when we click we want to add a to-do okay but we don't have an ad to do so let's create a function called add to do alright we're gonna add the event in here in case we need it and next up what we're gonna do is start creating our Li hard to do so first of all what you want to do let's just make sure this works console.log hello its save and let's click in the press f12 that's at 11 oh no where's my f12 there it is go to the console click plus and oh no it doesn't order because our browser refreshes so if you know previously what we did to stop that behavior is we grabbed the event and we add a prevent default and that's gonna stop it hit save there we go now we don't have that issue anymore okay so prevent forum from submitting okay next up what we actually want to do is because I told you that we're not only gonna have an li here like this we also are gonna have a button of like delete and also a button of checked all right so completed our to do is completed and all of this is gonna be inside another to do like this a bit of to do okay let me copy this so this is the structure that we want to achieve and then we're gonna have multiple of these like that okay so let's create this what we're gonna do is go back here and the first thing I want to do is create that to do div so we're gonna call this to do div Const to do div is equal to document now create element and we're gonna just add a div in here okay next up I want to add that class to it so we can do to do the adult class list dot add to do there we go so we have that okay next up let's create the ally create a lie and here what I want to do is kind of the same thing just cost you to do is equal to document the create element this is gonna be called the Ally alright okay and the value that I want in it let's just grab the new to do dot inner text what what do we want in here for now let's just put hey let's just make sure this works okay that's good that's also add a class list to it we're gonna say new to do top class list dot add to do item okay I'm gonna use this to style our CSS in just a bit okay and next up what I want to do is let's see let's grab that to do this and append the child of Miu to do all right so we're actually sticking it inside this tip that we just created up here alright so now we have a div with an ally of to-do item okay so that's one now we need a we need two buttons we need a completed button and a delete button so let's do complete it or check checkmark button and this is gonna be Const as the completed button is equal to document dot create element like that and this is gonna be a button and actually let me show you a cool new trick that we can do if I grab the complete button if I add an inner text inside this one alright so we know that this works if I add some text that's gonna be perfectly fine however what if I want to add inside this button that I tagged create a new icon basically if I do an eye tag like this I closed and I just add something like a class of equal to fa s fa check alright this is the one we're gonna add so make sure to get this correctly here if I do this with inner text this is not gonna work this is gonna render out as just text so what if I want to actually add it as a HTML and here how can we do that I kind of wanted to bring you to this point because you can use create element but you can also add it like this using inner HTML all right so we're basically adding to this button this I tagged inside okay let's close this up next up what we're gonna do is we're gonna get the completed button just had a class to this class list add of complete button alright and finally we're gonna append this button to the div again so to do div dot append child completed button alright there we go and then we can kind of just duplicate this again over here down here and our final button is gonna be a trash button so if we're gonna rename this to trash button like that and just change the completed here with the trash alright so here here and here and I think that should be good and inside this I tag we're not gonna do a check anymore we're gonna do a trash okay perfect should be all good now that we finally attached everything to this div again we're gonna get the trash button appended to this div so now this big div also has the to do that Ally the button and the other button what we want to finally do is take this big div and attach attach it to the actual UL because what we have right now is this kind of floating around here there's bit of to do with a li and two buttons Ryan this is what we have one and two so we want to take this to do now and append it to this to-do list so that's what we're going to do so here at the end we're gonna say append to list so we're gonna get the two to do list dot append child and we're gonna do the to do div that we just made here okay and that's it this is how we actually generate a new to do completed with a bunch of other stuff here okay so let's let's give this a shot and see if it works go here and there we go it works it's down here it's very ugly click click click but there we go everything works just fine so now let's go and style this button up a bit this to do Center it make it look all nice okay let's style of these to do buttons because they're extremely ugly we're gonna go back to our CSS right down here we're gonna get the to do container like this we're gonna add a display flex to it good a justified content of center and aligned items of center it's safe and that's gonna Center everything for us so that's good now we can get the actual to-do list so that's the UL all right and we're gonna just add a minimum width to this let's do 30% like that and let's remove those thoughts so we can say list aisle of none okay good now we can get the actual to do so these items in here let's add a bit of margin to them as your margin 0.5 Ram okay let's add a background of white so we can see them all right there we go that's what we have let's do a color of black all right we can see the text now increase the font size a bit 1.5 Ram there we go it's also a date display flex to this so all the items jumped next to each other and then what I'm gonna do is add a justified content space between like that okay it's gonna give a space in between each of the elements inside this review and align items Center okay good let's also add a transition to this actually we're gonna cover this later upon let's keep this simple next up let's get the to do Li if I get me to do Li so only this one and if I add a flex one to it it's gonna push all of these buttons right here at the end so if I had save as you can see now they're one to each other next to each other okay next up let's kind of style these up the buttons so the trash button comma complete comma complete button for these let's do a background of ff6 f4 seven there we go let's add a color of white to them border of none let's make a padding of one Ram there we are much better cursor off pointer so we can click on them like this and a font size of one rep there we go oh that's much much better next up I want to change the color of this check mark because we added it to both of them but we can just come down here and override that style because yeah I want all of them to have this besides the background color so I'm just gonna grab the complete button and just add a background and an a let's do like greenish color if we hover over this let's just write green here go here okay I'm actually changing both of them for some reason so let me make sure I'm not doing that so why are we changing both here this gives us a refresh add a new one all right I'm still adding this complete button let's make sure we're generating this correctly complete button and complete button okay so we actually haven't changed the class of the trash can so let's go back to our JavaScript here expand this a bit and here trash button we add a class of complete button so we want to change this let's change it to trash button all right and that should fix the color for us okay let's head back to our style at CSS Save and generate a new one there we go that's what we want perfect okay let's see something else here that's important actually I think we're gonna keep it like this and now we're gonna jump in and let's actually change the text here and JavaScript because I don't want hey hey hey however the place so let's make this bigger we don't need that minimized anymore okay we're adding it but the problem is we keep adding hey here over and over again so we're where are we doing that let's find the element and what is you I'm blind oh my goodness hey hey here we go the culprit has been found okay so rather than doing this what we want to do is actually grab the to do input value so on the input here what we can do is say to do input don't value okay let's save let's see there we go much better than before a problem I want to also clear out this I don't want this to stay here so to clear out if you remember what we can do is say to do and put down value and set that to nothing so let's go down let's go down here after we appended clear to do input value to do input dot value is equal to nothing save let's see there we go much much better now we also need to add some padding to this on the margins because it kind of looks stuck there and I don't like the way that looks so let's go back here to style dot CSS let's grab the to-do item and just add a padding of zero RAM and 0.5 Ram left to right there we go so they're not that stuck together anymore perfect okay that's great we have made the ad to do that works perfectly fine now and we're gonna leave it at this and then the next one what we're gonna do is make it so we can delete each item okay next up we're gonna add the delete functionality and if you remember when we were messing around with Dom we kind of did it this way we added a new item Advent listener of delete item but what we're actually gonna do we're going to do it a bit differently this time rather than adding it to the actual to-do or DLI we're gonna be adding it to the whole - - and we're gonna basically listen to what are we clicking on and based on what we're clicking on we are gonna execute a different function okay this is gonna give us a bit more flexibility so let me let me show you let's go back to Apogee yes all right currently we can add stuff but we cannot delete hitting delete will do nothing so what I'm gonna do is go all the way up here to the event listeners and let's add a new one we're gonna do to do when we do to do button let's do to do list so the actual list add event listener I'll click what we want to do is delete and check on I so delete and check delete check let's name it like that okay let's go all the way down here create the function called delete check delete check okay so that's good now here we're gonna get the event again and basically what I want to do is just console log out the event dot target all right see what I'm clicking on so go here press f12 console let's see all right so I can get to click on the Li I can also get the button here and the other button so based on whatever I'm clicking on I can add different functionality ok so let's do the deleting part it's gonna be quite simple first of all let's just grab the item whatever we're clicking on I'm just gonna name it item he dot target alright this can be anything okay so let's delete the to do for this one I'm just gonna say if item da classlist I'm gonna check zero here so the first class if that triple equals to trash button that I know that we collect hundred trash buttons I wanted to delete the thing so what I want to do here well we're gonna have a problem because if I just do take a look event is due to do dot remove like that hit save well yeah that's a problem that's not what I want to do delete all right let's check what's happening here do we have an error all right so that's good that gets deleted for some reason up here the two two input so let's see what happened what did we mess up eat that target to do input I don't want to do input actually I want the item itself to be removed alright so delete delete alright that only gets rid of the trash can and that's not we want but we also have another problem as you can see I'm kind of struggling to click on this and to remove it so what's happening there well I'm actually not clicking on the button and clicking on this little damn I tagged here and when you click on the I tag nothing's gonna happen because we have the class of trash button on the button so I have to click kind of on the side here to activate it so if you click on the actual thing on the I tag it's not gonna delete it air-sea so let's remove that problem we can just go here to style that CSS and what we can do is we can get the FA trash and the FA check and we can just say pointer events none which is gonna mean that hey you basically kind of click on this anymore okay so we fixed that issue let's see bla bla bla bla bla bla hit delete alright so it works perfectly fine doesn't matter where I click here we're actually clicking on the button okay but we're not deleting the to do we're actually deleting the button and that's not good that's not what we want so how can we delete the button the to do well what we can do is we can go up to the parent element from here rather than removing the actual item we can remove the parent of it so I can say Const to do is equal to item dot parent element like that okay and now if I did to do the remove then that should work just fine delete there we go so that works perfectly fine now hey that's good okay there we go we made a simple to-do list next up we're gonna add let's also do the check mark actually and then we're gonna add the necessary classes and animations to this so quickly let's also do the check mark check mark basically we click on the green to mark this as completed so we can do the same thing if item dot class list 0 triple equals to complete button then what we can do is say cons to do is equal to item dot parent element and to do class list we're gonna have a toggle to this of completed ok and that's it next up let's implement the the classes and the animations to make this nice here is where the fun begins let's go through style dot CSS okay at stop singing and show me how to do this okay that's good to style at CSS and the first thing I want to do is let's do the completed because we added that class completed for this one it's going to be super simple completed all I want to do is add a text decoration of line true alright and I want to just put the opacity down to like 0.5 and that should be good add something click OK there we go we are nicely toggling this so now what we can do is also add a transition to this so let's go up to D to do an add a transition of all one second ease hit save much better there we go lovely actually this is kind of too long I know I don't like it 0.5 hit save there we go much more responsive much better what I also wanted you it would be cool if we can delete and add an animation to this right okay let's let's see how we can do that the problem is if we just do something like I don't know and let's create the class of fall all right so before we remove the element I wanted you to do class lists and fall ok let's make this go down here we want to have a fall like that and I just want to transform translate why let's do something like a TPM alright I kind of push and push it down by 8 and let's also add a rotation to this rotate see 20 degrees ok and opacity is also zero okay I want to add this let's see how this looks so here's the problem we are gonna add the class to this bubbler and it's only gonna remove it and and delete see it gets rid of it instantly even though we do add the class list here okay so let's remove the remove is that gonna work apple-pie Madhi delete the pie all right so the animation works nicely but we're just removing the opacity so the element actually still stays there if we check see we we still have these kind of stuck in space there so we still want to remove these somehow okay how can we do that but what we can do is we can animate this out first and when the animation actually finishes then we can remove the element so is there a proper way we can do that and yes there is and I use this quite a lot what we can do is add the animation here and down here we can grab it to do and add a special event listener to it called transition and like this and what this is gonna do is that's an attic function in here is it's kind of wait and only execute after the animation completed so after the transition completed because you also have something called animation and if you have an animation and CSS you can also do that but here we have a transition so it's gonna wait till transition finishes and then it's gonna execute this function so we can do to do that I'll remove in here okay let's save and now take a look and multiple elements and there we go perfect so as you can see it waits a bit till it's actually done and then boom it removes it so lovely look at that how nice okay that looks nice I'm happy with that next up and we're getting close to the end here we're just gonna add a filter that we can check what we have completed what's all of them what do we have left to do and finally we're gonna save this to local storage so we can close up the browser and we can still have our to Do's okay let's go back to our HTML and and just add a filter in here so let's go where are we going above the form here let's add it here we're just gonna create a select class and here we're gonna have select all right let's remove everything from here we're gonna have a name of two do's and a class of filter to do okay and in here we're gonna have a couple of options option with a value of all all and let's copy this two more times this is gonna be completed or we can do marked yeah completed uncompleted okay and then just kind of change this from here to here and here to here and just lower case everything okay that's good now here is the incredible boring part we're gonna style this up a bit if you don't want the files that are gonna be attached down there because styling one of these select things is kind of just yeah yeah that's how it is and it takes quite a long time so if you want to skip this feel free to skip this and copy paste it over from the source files but if you want to follow along then let's go so let me put this up here make the smaller close this up and make some space okay so what I want to do is actually get deselect and remove all the styles from it because we cannot prop actually style this the actual select tag so what we do is we remove all the styles from it we do some trickery with pseudo elements and the diff above it so what we can do is we can say WebKit appearance and set that to none hit save we can do a mosey appearance none appearance none and then we can do an outline of none a box shadow of none border none okay so that's good next up we're gonna get the actual select so the div that we created around the select all right this is the div here let's just you add a bit of margin one Ram all right space it out we're gonna add a position of relative and an overflow of hidden alright next we're gonna get deselect we're gonna add a color to this of F this one that we use there we go that's a D width to it as you ten rim and okay cursor is gonna be pointer and it's good and now over what we're gonna do is add the arrow back and for that what we're gonna do is get these selective and we're gonna add up to the element of after and the content in here is gonna be - like that - five BC all right take a look that adds a nice little arrow and now we're gonna place this arrow on the inside here so we're gonna say position:absolute okay we're gonna add a background of ff6 f4 seven perfect and then we're gonna add it to the top 0 right 0 like that all right so it's right there next we're gonna add a bit of padding to it of one Ram like that and we're gonna add a pointer events of none so we cannot actually click on this alright so I want to be able to click through it and hit save ok so that's actually this does own bed alright we actually need to make this for some reason it hasn't expanded yet because I wanted this to expand the size of this so let's let's take a look on what's going on here why is this not working padding select after we have some width let's have the padding to this one rim there we go alright so that kind of fixes it for us okay looking it's ok that's not terrible it looks fine ok so now we can select all of these different options feel free to make this nicer looking we can also add like a transition to this if you want I don't know let's do a select hover after and then we're gonna do what shall we do to it like a rotation now we know like a color or we can do a background of white and the color is gonna be eat this one okay that's good transition 0.3 seconds is all kind of have the same thing that we have going on here okay that's good okay there we go we have everything working completely fine now what we can do is kind of make this work so let's add some random items in here apple chocolate Nana tomato Kiwi David and you we are together that's so cute okay let's switch here to all close this up and fullscreen this so what we're gonna do is create a you guessed it a function function filter to do we're gonna grab the event in here and what we're gonna do is let's go all the way up here and we're gonna get the filter option is equal to document query selector we're gonna get the filter to do okay so this is the this one alright so the actual select element let's scroll down here again and now what we can do is grab all the to deuce cons to deuce is equal to to do list we can also grab the child nodes that we want like that let's do a console.log to use hit save and let's see what we have expand this console let's add some things okay it's not working Han why you do this to me and we actually need to add an event listener hey joke's on me okay we can save filter option without add event listener on clickety clackety we can't fill through the to do filter to do okay click as you can see it starts executing as soon as I click let's I have some things here okay there we go now works but I really don't care about clicking here I wanted when I only click on the actual option for it to do something so what do we want to do we want to go down here and we want to make sure to check what we're clicking on so we're going to loop over this over all of our to Do's to do is that for each again since we're using node list here we can do a for each loop which is cool we can add a function in here and here we have access to each individual to do okay so here what I want to do is create a switch which we haven't used so far so we can check the e-dot target --top' value okay and what this is gonna bring us back is basically if I click on all this is the value so he thought target it's gonna be option and the value is gonna be all or completed or uncompleted okay so that's what the actual value here is then we're looking at okay so switch this we're gonna open a pair of curly brackets again so we're gonna create cases so case all alright so in case we click on all what we want to do is basically show all the two dues but we already have them shown so let's skip to the next one so let's just add a break for now as your case of completed what do you want to do when it's completed well I can check if to do that class list contains completed so basically I'm checking hey make sure to only check the two dues that have the class of completed on them and if they do have the class of completed then show them so to do that style doubt display I'm just gonna add a display flex since this is what they have all right we added flex on the two dues else if they don't have the class of completed to view that style that display make sure to remove them none and in case we click on all of them here well then we just want to do that style display equal to flex so we want to show all of them alright we're not checking on anything we want to show the completed ones the uncompleted wants all of them okay let's see so we add Apple John Mayer cocoa Oh almost went wrong there but there we go so we check Apple and John we click here press completed it only shows us the completed ones all right because we're checking the classes show me the the two dues that only have the class of completed on them and display those flex and the other ones just get rid of them and now if we switch back to all it's gonna show all again I did display flex since this is what we have in our CSS because if we do this play block a block and block this is what's gonna happen all right let's just have something random here like like there we go all right so it jumps down here because we had this blade flex on them so I'll switch this back okay hit save check-check completes it perfect so now we can do the uncompleted one two we can go down here case uncompleted so this is getting kind of simple right it's kind of the same thing we can just check if to do the class list contains completed so we can do this again and I can just say to do classes that don't contain that completed all right we add the exclamation mark here to check if it doesn't have it and we just do the same thing so let's just copy paste everything here copy this paste it down here let's paste the else statement there too okay Apple John Traverse e-media let's see Apple media and we go completed all uncompleted there we go that's what we have all actually wait something's not okay let me make this a bit more clear one two three four because I'm pretty stupid at finding these problems out so let's do one end to you all right so complete it should be 1 & 2 but we have 3 & 4 & uncompleted we still have 3 & 4 ok so something is not OK here all completed so complete that should show me one into you okay let's see what have we messed up we're gonna find out together I need a break here Oh No there's our problem break let's also have a break here see sometimes the simplest things mess you up 1 2 3 4 1 & 2 so the completed ones are 1 & 2 there we go and then the uncompleted ones are 3 & 4 ok now it works see that little break can be quite the type okay I'm happy with us everything's looking just fine and dandy the last step that we can do which to be honest is a bit it's not necessary anymore this works perfectly fine but if we want to save them with local storage then it needs a bit of extra work so let's do that final video implementing the local storage to our little app here ok so what we're gonna do is create another function all the way down here that's basically gonna is safe to do pseudo chol storage caps lock please turn off so we're gonna create a function save local to dues and here we're gonna receive a to do because what we're gonna do we're we're gonna call this function is actually in here somewhere okay so when we actually add the to do we're also adding it to our local storage all right so we can pass in this to do here because we're gonna receive it in here so what do I want to happen in my local storage well I want to create a a to do's and first of all what I want to check is if I already have it to use in my local storage because if I have one already then I don't want to basically get rid of it or rewrite it so I want to make sure to create some kind of a check hey do I already have things in there so to create that I'm gonna create a variable here just call to use all right not gonna sign anything to it and next up I want to do it if statement and say if local storage don't get item to do so I wanna check if this exists if I already have a to do and if I don't so I'm gonna set null if it doesn't exist then I want to create an empty array like that okay else what I want to do is to dues is equal to JSON thought parse we're gonna parse back local storage that gets item to dues alright so this assuming that I already have something in there I'm gonna take it back and create it into an array I'm gonna parse it back into an array okay so this is the check that we're using and next up what I want to do is grab the two dues and push in need to do okay so the thing that we're passing in here I want to push it to that to do the rain and finally what I want to do is say local storage dot set item two dues comma json dot stringify to do so at the end of the day actually let me just say to do is here the array I'm pushing this back into local storage alright so this is how we are saving it when we're adding a new item first of all it's gonna check if we already have a to dues if we don't have it's gonna just create an empty array so this one and if we do have what to do is already well we're gonna be left with an array here so we're gonna get back the actual to do is from local storage and we're gonna have an array so let's say we have an array if we do we're just gonna push it on you to do to it and then we're gonna set it back into the local storage okay and that's kind of it so let's let's take a let's take a look look if this works let's go up here and we're going to want to add it and you add to do well I want to make sure I added before I actually change the to do value to nothing so let's do it somewhere up here no let's do it let's do it here okay we're down here add to do two local storage so what I want to do is just call save local to dues like that okay and what do I want to add in here well the to do input dot value alright so this to do input value is gonna go from here inside here so here we have the value now and we're just going to either push it into the local storage so hit save and now if we take a look if we press f12 go here to storage local storage click here we have one already let me just actually believe this I have I have it saved let's get rid of this local storage dot clear okay so I cleared this out let me just go back here it's safe okay so we have nothing we add something Apple they were young chocolate and there we go so again when i refresh the page it's still there but when I add another one it's not gonna be any issue because it's gonna get this list back from local storage it's gonna be like oh we have an array there so if if we have the array which we do then is just gonna get it back and it's gonna set it equal to two do's and it's gonna and we're gonna have it in here and then we're just gonna push in you items to it and then push it back to local storage okay so it works perfectly fine but the problem is that our UI is actually not updating so we cannot actually see anything in here anymore and we're gonna fix that later on so don't worry okay now that this works actually let's do that because to be able to delete from the local storage we need to see these I cannot click on anything here so let's implement that let's do get to do so I'm just gonna create function get to dues and here I'm just gonna create that to do this again an empty empty variable and I'm basically gonna redo this check here I'm gonna copy everything from up here down here alright so I'm checking hey do we have something in local storage no creates an empty array if I do okay and get it back so in this case we are getting it back we have two items we have Apple and chocolate okay after that what I want to do is just loop over them its dues for each we're gonna add a function and here an anonymous function for each to do well what do I want to do well basically we're gonna recreate the whole thing that we have up here inside this add to do okay so this is kind of gnarly but we're gonna need to copy kind of everything over here so from here to D to do div let's copy all the way down here to the to do appendchild to do this okay and go down here and paste this big thing in here hit save and let's kind of change things up so we do need this so that's fine this is fine this is not fine anymore because we don't need it from the input anymore the value here of the inner text of the two dews what we actually need the value is from our actual local storage that we have in here so I'm gonna copy D to do and add it in here okay yes we still need to add the class AB and the child that's fine we don't need this anymore save to local storage so we can remove this this is fine and everything else should be fine so let's hit save let's give this a refresh and I think yet happens because we're not calling this cat 2 news anymore so let's call this function and what we need to do is go all the way up here where we have our event listeners and what we can actually do is we can attach an event listener to the document or the window and we can check basically if our content on our web page has loaded and if it's loaded and then execute the function so we can say document dot add event listener and we can call this Dom content loaded basically if everything loads up run this function of get to dues get to dues okay head say refresh and we have nothing hmm let's make sure that Harting executes so let's go to get to do this again scroll down here get to dues that's a day console.log make sure everything works also log hello console alright so we have an issue here let's see we declaration of let to do so we re declared a variable on line 103 105 let's see okay so we copy pasted this two times so that's the problem here let's get let's get rid of this hit save alright we had to let - duze there we go look at that works perfectly we can get rid of this so we're just pulling everything back lovely now let's take a look on how we can delete things so now if I delete this delete this refresh these are still gonna be here okay this is getting this is getting a bit tricky isn't it so let's create another function remove local storage to do local to do this alright that's fine here we're gonna have it to do again again we're gonna do this check so let's grab this check here you can also drop this in another small function if you want it's probably a better idea but for now I'm just gonna copy paste it down here okay so we have this little thing here this is gonna be very simple all we need to do is basically remove the position of the element that we're clicking on so if I click on Apple I want to remove Apple from this array so how can we remove a specific element so I just add more here Apple chocolate donut potato dance alright so basically what I want to do is get the index of 1 so donut index of donut and then using an array method we can get rid of this one exactly because we saw a pop push on shift and shift which kind of just do at the end of the array or the beginning of the array one of the two but we can also remove specific elements from our array and we can use that with a method called splice so what we can do first of all is get the index of that to do so we can say to do index is equal to to do let's just console.log what we get back here actually console.log to do because i have no idea what we're getting back remove two dues ok so when do we want to call this well when we actually click on delete so let's go to delete delete here we go so here after we add the fall animation I want to also remove it remove local - dues and I'm just gonna pass in the to do ok hit save let's see what we're getting back here console alright so I'm actually getting back the class off to do okay so what I want to have access to now is let's see if we do children let's see what we get back now all right we got to do item complete button and trash button so what I want to just basically do is get back this text here that I'm clicking on so we can access the first one so the Li so to do dot children zero okay because we're and the div here this is what I'm clicking on the depth and I want to go all the way to the Li okay now we're at the Li and I just want the inner text inner text there we go all right doughnut potato all right where am I getting with this what what do I want to do well what I want to do is console.log I want to get the index of that so I want to do two dues dot index of this thing index of Apple for example okay and that's gonna give me back let's do potato all right that's gonna give me back tree so potato was on number tree that's why I'm doing this whole thing just to get the index of the element that I'm clicking on so what we can do is drop this in a to do index and set that equal to two children in your text okay and now what we can do is use this method called splice on the array to do splice and I can just pass in this to do [Music] we can grab the two dues index of to do your index like that and I'm gonna add a comma and one okay I want to go over this again because this looks a bit complicated so what's happening here is when we were clicking on the delete here we're actually clicking on the dip right that's the to do the to do here is dative and what I want to do is can navigate all the way down to the text because we can access a specific index of an array using index of so to do is index of Apple is going to give me back the position of it so to do index of donut is gonna give me back zero one two all right that's gonna give me back to and using this place method I can just say hey from the to do's make sure to remove the third element the index of third element or the index of second or fifth or whatever alright so this is the first argument that's you're passing in here what from what position do you want to remove an element and the second argument is how many do you want to remove one two three I just want to remove one okay so that's what's happening here we're checking the big array we're just checking the index of one specific element so now if we go back to storage here you're gonna see that if we remove donut okay nothing's gonna happen yet why well we removed it from the array but we still need to set back that local storage we're not changing it so what we need to do is say local local storage set item and just set back that to dues json.stringify and push it back to local storage okay so I hope this clears everything up a bit with what's happening here I can give you a secluded example probably there's gonna be a bit more clear so I'm gonna just grab everything here comment it out because I really want to make this clear Const as you items or juice set this equal to that's you Apple John do not baby boy okay so we have that and what I do basically say to do is dot index of let's say John alright this is basically gonna give me back the number of the index the position of it so 0 1 so if I do a console.log index of Tron see that that's gonna give me 1 ok so we have the number and that's what we did here we just get the number of it index of to do index which we drill down all the way to the text and then what we do is we use the splice method so I'm gonna save this Const John index is equal to this and then what we just do is we grab the big to-do list and we just splice up John index and one so one element okay and then if we call so log this should be fine console.log - duze john should be gone goodbye John okay so I hope that cleared everything up uncomment save let's get back to this code storage and let's see donut and there we go donut is gone Apple is gone refresh and we still have these perfectly fine here our filters still work just fine everything is great there we go we can close up the browser restart this go live and we still have everything working so that's gonna be it there's gonna be the project now there's still like a small thing that will not work with this local storage for example if we add a check mark to this and we refreshed all right that's gonna be coming back normally because creating that functionality will be incredibly tricky what you need to do probably is just when you hit complete also create a local storage for that of completed items separate those from these and then retrieve all of them accordingly okay but that's overly complicated to be honest for just something so so small it doesn't really matter okay so that's gonna be it hope you enjoyed the small little project hope you learned a few things and let's do more

Channel: Dev Ed

Views: 559,915

Rating: 4.9489865 out of 5

Keywords: javascript, javascript project, learn javascript, javascript for beginners, javascript tutorial, javascript todo list, modern javascript, vanilla javascript, dev ed, developedbyed, programming

Id: Ttf3CEsEwMQ

Length: 75min 18sec (4518 seconds)

Published: Sat Apr 11 2020