Build a Todo List App in HTML CSS JavaScript | EASY BEGINNER TUTORIAL

in today's video we're making this beginner friendly to-do list we can add a new to do new task and then we can choose to either click this button or hit enter and this new task is added to our current to-do list we see we can scroll down to find our new task here along with our existing tasks learn JavaScript feel good about my progress if we tap by itself on the back we see we can check that to do now it is also shown as being checked and it is grayed out we see that we also are tracking how many to-doos we total have and then of course we can also delete all our to-do's making the list disappear if we add a new to do again and then let's also click this time we see that it's added again to the list this is a very beginner friendly tutorial and a perfect project to learn JavaScript no prior JavaScript skills is needed to start and complete this project as I will walk you through the entire code step by step to do is a perfect project to actually learn both beginner and some intermediate JavaScript Concepts we will learn things like variables what the difference between the left and the constant variable is we will learn to use a local storage and Json we will learn how to select HTML elements we will learn to structure and listen to key events in our browser we'll learn to create functions we'll learn if statements we'll learn how to manipulate the HTML using our JavaScript and how to use arrays and objects ready to become a JavaScript Pro let's get started first off I have my visual studio code open here that's our editor that we're going to write our all our code in and then I have an empty folder on my desktop I'm just going to drag that folder into Visual Studio code let me make that full screen and here we're going to start making our HTML file we're going to call it index.html and the main HTML file is the one that we show on the browser it's where all the elements of our project live and that's always called index.html that is the only file we are needing to kind of display on the browser and then all the other files we have are going through the index.html so that's kind of our root file for our project inside of indexed HTML we want to write a exclamation mark and then we get inside of a visual studio code we get some shortcuts here if we click the first one we get a basically template for what an HTML document needs to have at the bare minimum I just hit save and now you see that the code jumped around that's because I have prettier installed that is an extension in Visual Studio code that you can click here and you can search for prettier and then you're just gonna install the first one that pops up install that here and that's you're basically just gonna make the code to jump around like mine if you want the code to be exactly the same why would you want the code to jump around well basically this is formatting our code for us and making it so that we have a uniform and also synthetic be correct and easily read the code if I made a lot of space and I made this code very weird and hard to hard to read like so and trust me you can get much more harder to read and I save it basically formats the code in a human friendly way so prettier install that if you don't have it first off in any HTML we have this doctype.html that is basically telling the browser when it reads this document that this is going to be an HTML code here that's basically all this doctype does and then under that we actually have our HTML which lives inside of this opening HTML tag and closing HTML tag all of this lives inside of this and then you see if we go one step deeper in the head here opening head tag closing head tag together they must make up the head element and then inside of here is the children of the head and then the head is the child of HTML and then inside of them again we can have children again so HTML is basically made up of elements in blue and they can be children or parents to each other furthermore in the head section here we are explaining to the browser a lot of content that we don't actually see on our page but content that is very useful for the browser to know so to give you an example I'm gonna click on this little button down here that says go live if you don't have that installed again that's an extension install a live server install that that is gonna make you click this button here go live and that is going to open our browser as we can see here and notice what it says up here document that is what is in the title if I now change that to to do and save we see that that is updated so the head is everything that it doesn't live within the actual browser window but it can be up here it can be behind the scenes of the actual uh screen that we see another quick tip go up to view in your vs code turn on word wrap and then we can fit all the code inside of one page no matter how wide it is then the two meta tags here basically say this one says use the character set of UTF also if you hover over things in vs code it also usually tells you what it is quite well hover over name we see that that's that so utf-8 says use the standard characters that we can find basically most characters that exist that's going to be utf-8 like the character e or the character you know hieroglyphics all of them are in there and the next meta tag is so that the width and the height is represented correctly across devices then of course we have our title and that's all there is to be head for now then we have our body and this is the actual things that are on our page here so if we add an H2 here and we say hello we save that we see that that ends up in the body which is inside of this white frame and of theory let's build our to-do so let's remove this H2 element that stands for heading 2 which is a bit smaller than heading 1 and those go down to heading six we are going to start by giving this body another section element as we can see I just need to start writing section hit enter and that's going to create the opening and the closing tag of that element inside of this section I'm gonna have other things but I'm basically putting most of my content if not all of them inside of this section but I'm basically going to put most of my contact within this section in addition to this section we're just gonna have a footer so that's gonna be the two children of the body element inside of our section we're gonna have something called an input a section is a way to divide our content into sections properly named and the footer is the bottom part of our website usually and then an input is where we take in any information from the user of our website and then we can use that for something for example when you log into a website that's going to be an input element that you're typing your password into in addition though we're just gonna put an H2 element up here because we want to give this a little title we're going to say to do list save that and we can see that we have our Title Here with a little input element we are gonna put this input element inside of something called a div so under H2 and before the input write div hit enter and this is a basically a catch-all element it doesn't mean anything by itself but it's very useful to create boxes borders and a logic within our HTML so let's copy paste this copy out to control X the input and we're going to put it inside of the div and hit save actually we're going to put it like this and then hit save now we have a lot of elements inside of our HTML but they're not really containing a lot of information yet because we haven't added attributes to them so starting with our section we need to actually add a class to this section A Class attribute and what this says is we're going to call this section something and we're going to call it a class of to do and this is going to be very useful because later when we're creating our style sheet we are going to reference this class we're going to Target it by going through this to do class here we're going to use this to do to give this some style then we're gonna do the same for this div we're going to give it a class and we're going to say this is an input this box here same thing we're going to use that to give it a certain kind of styling in our CSS and then later in the JavaScript we're going to use it to Target it to do logic with it then in our input we already have a type text that's correct that was just generated for us automatically in addition to that though we're gonna give it a class and we're gonna give it a class of input Dash field these are classes that I'm just making up I'm calling them whatever I want whilst the type is text which is something that is you have to choose between certain options in addition to the class and the type we want to give it an ID to do input capital I notice that this is what is called camel casing which basically means that you start your first word with lowercase and then when you're starting a new word inside of the element here you are basically capitalizing it that's camel casing and the difference between them is that an element can have many different classes but it can only have one ID and one ID is unique and can only be put inside of one element whilst all elements can pretty much share the same classes so I could give all of these elements the class of input field but this one can only have the class of to do input because now it's used and no other elements can have it ID is unique class is not lastly we're going to give it a placeholder which is what you see inside of here but before you type so let's say test save that and we see that we see test here on our browser let me just zoom in that so you can see better we see that test is written if I start writing it goes away because this is our placeholder that's how it works we're not going to write test here we're going to say add a new to do there we go I start writing it disappears perfect of course we need to also have our button here to send our to-do in so we're just going to start writing button hit enter we get our button inside of the button we're gonna say add and we see that that pops up there doesn't do anything yet and our button is also going to have a class and that class is going to be called vtn which is short front button then under our div here if it's hard for you to understand what's going on you can also close certain elements to make it easier to see under our div we are going to add a UL which stands for unordered list an order list starts with one two three Etc an unordered list has bullet points and inside of an unordered list you actually need one element a list element which stands for Or List item which is an Li and that Li is not going to have anything inside of it it's just going to have an ID remember that's unique called to do capital L list and also this UL is going to have a class of scroll as we can see we have our bullet point and then under our UL we're going to have another div and inside of this div we are gonna write an HR which is a fancy way of saying basically a break it is a line in our HTML if I save we see that it pops up it's a divider more or less and this divider is gonna have a class of counter and then under the HR we're going to have another div with a class of counter Dash container and then inside of the counter container we are gonna have a p element which stands for paragraph and inside of the paragraph we're going to have a span and if we hold over the span we see that it doesn't really mean anything on its own but it can be useful when used together with global attributes a bit similar like divs and used to separate different elements inside of the span we're gonna say space and then items total because this is where we're going to keep track of how many to-do list items we have sorry this we're gonna copy paste and put after the last span and then inside of the span we're just gonna say zero like so because inside of the span here we're gonna be adjusting the zero based on how many we have and this is just gonna stay the same then under the paragraph we're gonna add a button and it is going to have an ID of delete button and then here we're gonna write delete oh which is going to be our button to delete all the r tasks then we are done with the section part let's close that so it's easier to see then let's go into the footer and we are going to create a div here we are gonna give a class of footer and then under that or actually inside of that div we are gonna give that a paragraph with a class of made Dash by and there we're gonna say made by under here we're gonna add another paragraph with a class of author and inside of that paragraph we're just going to say our name or in this case John Doe and that is all for our HTML as we can see if I expand this it's not all that but that's all we need now we can move on to style our to-do list let's open our Explorer here and we're going to create a new file we're going to call that style dot CSS hit enter and then we see we have our style sheet here the way this works is that we're gonna Target for example our body by writing body and then curly brackets and then we're gonna say background color is gonna be red and then hit save and then we see that we don't actually have a changed background color why is that well because we haven't actually told the CSS and the HTML to communicate and how do we do that we do that by writing here inside of the head a link and hit enter and by default that's going to have a relationship of style sheet it's going this link is going to know that it's going to be connected to a style sheet which is a CSS file and here we're just gonna link the actual path to it so if you write dot slash we see that we get our style.css here recommended so click that hit save and we see we get our red background color applied to our body element aka the whole page back in our style sheet let's remove the background color instead we're gonna write margin which is the sides around an element it's basically spacing around elements if you right click on your browser hit inspect and then we just hover over we've seen the elements tab here we hover over different elements the margin is the orange color and the padding is the green color and we're gonna get more used to using those but we see that the H2 by default has some padding if we click the H2 we see here in the styles that by default it has a margin of 0.83 e m and you're going to be seeing em in your browser and REM when we are writing our style sheet and that's just a different way of writing the sizes instead of pixels and 16 pixels is one em and also one REM so it's just a different way of writing sizes for things let's click our body we see that we have a margin around here the orange part and we see that the margin is eight pixels so let's just set that to zero and we see that things pop right up to the corner of the page let's make this a bit bigger so we can see our website a bit more like so and still keep our inspect window here because it's useful then we are going to give it a height as well of a hundred not percent which would kind of work but we're going to give it a 100 view height which basically means that the body is going to take the 100 of however big this screen is so if you have a thousand pixels so if you have a thousand pixels or 5 million pixels or three pixels High screen it's gonna be all of that which is very useful for when you want to create responsive design that looks good across screen sizes we're also going to give it a background and let's just give it a gray background for now we're going to change this in a bit we are also going to give it a display of flex I have a separate video on Flex um that you can watch here but basically what it does is it moves content around to put it in a very stupid way but as we can see here when I hover over body in the element we see that we have these dividers here that is because we have decided to display the content using flexbox so we see we have our One content here we have another vertical content here and then we have some empty space here in in purple and if I remove this display Flex it goes back to how it was let's see you see that everything is just one thing under the other what display Flex does is that by default it puts one element next to another element horizontally and we can decide how we want to then space these out and we can even space them out vertically which we're gonna do by adding Flex direction of column and now we're putting them back to under each other and you might be wondering why did we do all of that because it was like that from the get-go well because now we can not only have them close to each other under like this or you know use a lot of padding and and margins and to like space it out so it looks good centered on the page which is what you used to do in the past but now by using flexbox you can dynamically make the content spread itself out in a very natural and Visually pleasing way so if we add another Justified content here space evenly then we see that now the content is at least vertically being spaced out kind of in the center and with a little space between them which is what we want so with three lines of code we have avoided with flexbox a lot of padding on each element or a spacing and a lot of like retrofitting across all different screen sizes to get this effect so flexbox is really useful for responsive design and then in order to get them in the center horizontally as well in the x-axis not just the y-axis then we also want to align the items to the center and there we go now if I full screen my screen we see that it's still in the center if I close this bar here we see that it moves to the center and basically whenever I however big my screen is this is going to be horizontally and vertically aligned in the center if I now hover over the body you see that it is spaced out with even space between the two main elements which is the section here and the and the footer sorry here I hope that made sense again I have a separate video that you can watch after this video if you want to Deep dive into flexbox now we're gonna get into a bit more complicated stuff but it's a good warm-up to JavaScript so now we're gonna actually create something called variables and what is a variable well in essence it's something that holds some value that can be interchanged so we're gonna start by writing dot root or colon root and when we use this root colon here we're targeting the body here we're targeting the root the root is kind of even deeper than the body if you can think about it this way the root is the entire project the entire folder even the the head and everything inside of there so the root is like everything think about it this way and inside of here we're gonna write Dash Dash and we're gonna say gradient and then we're going to say Dash here again sorry colon and then we're gonna say um let's say red at the start here now what we have made here is a variable with a name gradient and it has the property the value of red and if I now go down to my body here and give it a background of the variable of gradient and I hit save uh ah sorry I have to also remove this background down here which is great and I hit save we see that the background of the body is now red very intense but it's red and I told you that the variable can change its value and it can if I now say blue here and I hit save we see that the body has gotten a blue color even though what is said in the body stays the same it's because we're referencing the variable n not and then by proxy we're referencing the value inside of it so it's kind of going backwards jumping here checking what the value inside of it is and then going back to the background of the body and putting the color here and that's the beauty of variables is that now we can use this gradient and we can reference that in a million different places but we can simply change it in one place and that would change all of the places so it's very useful to get started with using variables in CSS and not hard coding things that you don't need to but this is called gradients so it's not a simple color like this we are going to say linear Dash gradient and then we're going to write colons here and then inside of those colons we're going to see it's going to be 180 degrees which is the direction of the gradient which is going from one color to the next and then it's going to be the first color rgba which is basically a way to just say a color it's a color code 45 1 1 2 1 2 5 3 and then so those are the red blue and red green and blue colors and then the A is for the opacity so 0.73 and then we want to start this first color at zero percent which is basically all the way on the left side and then the second color is going to be a bit simpler because it's we don't need this last part here so we're going to say hashtag one six three e nine two and then we're gonna see that's going to be a hundred percent which is in other words on the complete opposite side and then let's save that 180 degrees goes from bottom to the top if I put zero degrees it starts from the top to the bottom if I put 45 degrees we see that it starts in this corner if I put 90 degrees it starts on the right side so it's moving this way 90 0 45 90 180. so like so and that is our gradient for the body we are gonna make a couple of more variables here so we're going to say dark is going to be equal to zero zero one seven four seven and we're gonna say gray is going to be equal to hashtag B1 b a c b and then we're gonna say dash dash gray Dash border is going to be equal to rgba and then colon 210 210 comma 210 comma and then 0.75 opacity like so under here we're gonna say gray right light like so and that's going to be hashtag 6 times e one two three four five six save that and then it's gonna be gray dark a lot of gray colors here and that's going to be hashtag four zero five one seven five and then we're gonna write a blue and that's gonna be hashtag to the 70 f d save that two more green that's gonna be equal to hashtag Zero Zero D eight a seven and then the last one here is gonna be white that is just gonna be hashtag F six times see that okay we have all our variables let's make this page a bit smaller again so it's easier to see our code like so now we're ready to create the styling for the rest of our content here so let's target our button we are putting a little dot in front of it because that's how we target classes so up here we were just targeting the element body but here we're targeting the class button the first thing we're going to do is we're going to give it a color of variable they're already coming in handy and here we can see we can choose between them and we're going to choose White and now we see that the color of our button became White and then we're gonna give it a font size of 1.1 REM remember that's 16 pixels is one REM and we just made it a bit bigger then we're going to give it some padding that's the green inside of elements whilst the margins are the orange around 0.7 REM in the top and the bottom Direction and then we're gonna say 1.5 REM in the left and the right direction as you can see if I now say this is 5.5 REM it's going to add a lot on the sides as you can see if I add like so and I add 8 or 9 here it's going to add a line at the top and the bottom so that's how these work you if you only add one it adds it all around like so so putting that back to what we are supposed to have like so then we're gonna add a border radius which is how we get to smooth out the edges of our elements so we're going to say 0.3 REM and we're going to give it a background color of variable blue like so we're going to give it a border of none to hide the Border the gray border here that is not very pretty like so and we're going to give it a position of absolute so when we give something a position we are basically we have a couple of options so basically how an element is positioned in the document like this is showing here it's a great uh description the top right bottom and left properties determine the final location of positioned elements so it's how something sits within our document when we're saying position absolute we're saying this part here this button if we inspect it it's gonna sit absolute within its parent and that's going to be the section element here and that's going to come very in handy when we're going to place this button compared to the input text so that regardless of how wide the screen is the button is going to stay kind of the same and we're gonna give it a right property so that we can now adjust it based on from where it starts of 0.5 REM we see that that goes 0.5 REM from the edge here and then from the bottom that's going to be 0.5 REM as well as I see now this is not the correct placement of this button so if we go to our index.html and we find our button here we see that I have actually placed it in the wrong place so Ctrl X to cut it out and then we're gonna go and scroll up and we're going to put it inside of this div with the class of input so we want to actually place this under our input here there I don't know why I didn't place it there but hit save and then we're going to save here like so and now it is placed in the correct spot okay so back to our CSS now we're gonna Target all the headers that we are using we're actually not using all of them but let's just Target them in case H5 and then H6 and then also the paragraph and then we're gonna give all of them because if we separate by comma we can Target and style all of them at the same time I'm gonna all give them a margin of zero and hit save and that's going to help us get a bit more detailed styling then we are going to start on our to do let's just make a comment by holding Ctrl K C and then here we're going to say to do container and that's how you can comment in your code to add a bit of structure so it's easy to see what's going on so here the to-do container is starting and we're going to Target the class of to do and if we inspect here or elements we see that that is this section that holds all this all these parts here including our button down here so here we're going to say that the to-do is going to have a display of flex and save that and now we see that the content has been spaced out next to each other again because remember that's what flexbox does by default but we're going to change the direction to say column instead now it's back and now we can justify it to space around the content again like so and we're gonna give it a border radius of 2 REM we're gonna give it a background color actually just a background of variable and that's going to be white like so we're gonna give it a padding of three REM looking much better we're gonna give it a height of 50 percent of the parents height so that's the body and we're gonna give it a width of let's say 60 percent of the parents body which is the body and now if I take more space we see that it's going to still take 60 percent so that's one of another tool to make responsive design that doesn't need a lot of code then we're gonna give it something called a box Shadow which is a fancy way of saying basically a shadow behind this whole box here so we're gonna say zero and then we're gonna say one REM 3 REM and then one REM and then we're gonna say RGB a and then colon zero sorry parentheses 0 23 71 and then 0.15 for the opacity these are the directions and the lengths of the Shadow and this is the color and hit save and we see that a very faint Shadow has popped up we are also gonna give it a Max width of 30 REM which means that when we are in full screen let's do this I'm also going to zoom out because now we're very zoomed in so it doesn't really show but when we're in full screen it doesn't get bigger than this size so if I go back here and I remove or I comment down this Max width we see when I go full screen it still takes 60 percent of the width which doesn't really look good this wide so we're saying take 60 of the width until you get to 30 Ram then grow no more like so that's what Max width does so I'm gonna zoom in a bit more just so we can see what's going on then we are going to Target the H2 and we are gonna say we're gonna text transform this and we are gonna say uppercase and that makes our heading here uh uppercase we're also going to give it a height of three REM like so creates a bit of space between the to do and the heading we're also going to give it a color of the variable dark which is a very dark blue and we're also going to align this by using text align we're going to align it horizontally uh in the center so then we can Target our input and we're gonna say that its position is going to be relative to its parent and we are gonna display it using Flex like so and then we're gonna Target the input field and we are gonna say it's gonna have a width of a hundred percent of its parent it is going to have a border of 0.06 REM that is the thickness of the Border it's gonna be solid you can choose dotted as well and it's going to have the color of D2 D2 D2 BF which is a gray color as we can see around here then we're gonna give it a border radius of 0.5 REM which smoothens out the borders makes it round we're also going to give it a padding of 1.25 ramp and let's now zoom out a bit so we can see let's zoom out all the way almost all the way so we can see a bit more how it looks in real life and then we can give it a font size of one party amp as I can see now this is not being targeted correctly we have our button down here as well we are needing to Target not the input element but the input class by adding a dot in front of the input here hit save and we see that now this is lining up and our add button has been put relative to its parent and displayed Flex here inside so now that's correct let's move on to Target the input element now not the class and only the element with and then we're going to give it these brackets we're going to say the element the input sorry of the type equal to text so only target the input which has the type of text and if you remember here we have an input with a type of text so when we are targeting that we want to say colon colon and then placeholder so we're targeting the placeholder of the input here and we're going to give it a color which is this add a new to do we're going to give it a color of variable of great hit save and we see it graded out now we are gonna Target the to do container we are gonna display it using Flex and then we are gonna give it a gap of one REM and hit save and when we hit save we see that it doesn't really do anything it is because this element doesn't really exist yet we're going to be adding it in our JavaScript but we're going to get back to that but for now we've given to the styling it needs and then the UL we're gonna Target and we are going to say that you're gonna have a padding of zero you're going to have a margin of zero so that's the unordered list where the um dot is and you're going to have an overflow in the y direction which is the vertical direction of scroll and we're adding this so that when basically this list is going to be too full for the space it's gonna give that scroll bar as we can see the start of here but now we don't have any elements here so we can't scroll then we're going to Target the list Elements which are going to be their actual to do's we're gonna give them Flex as well display Flex we don't have them now so we're not going to really see a lot of stuff Happening Here but we're basically just aligning them like we like it we're gonna give them a gap between each of 1.2 REM we're gonna also give it some padding 1.3 REM then we're gonna Target our to do list and then our paragraph inside of that when we say this we're saying going to the ID targeted by the hashtag called to-do list and then inside of the to-do list Target all the paragraphs so that would be to do list let's see that is here so every paragraph which again you see doesn't exist yet we're going to create that with JavaScript Target all of the paragraphs inside of here and then what we're gonna do we're gonna give them a color of variable actually it's just gonna be eight f nine eight a eight I don't know why I didn't use variables here but I could have but let's just keep it this way for now we're hard coding a couple of colors here then we are gonna Target the disabled another class that doesn't exist yet and we're going to say display of flex and then we're gonna say text decoration of a line through now this is going to be a class that we add when an item is checked then we're gonna add this line through which is going to cross out the text this is going to make a lot of sense when we get to the JavaScript next we're gonna Target the input of the type of check box another element that we are going to be adding and before the check box we are gonna basically add our little checkbox Mark here so the content of this checkbox is going to be forward slash 2 7 1 3 which is the uni code for the character of check mark so we're just going to add that and then we're gonna display that using inline block which is basically adding elements as a block one next to the other and not flexbox which is more fluid and then we're gonna see it's gonna have a width of two Ram so this this is the circle we're talking about that we're adding later and then the height of two run and we're gonna give it a font size of 1.7 REM and we're gonna give it a text align of Center we're also going to give it a border of 0.06 RM it's gonna be a solid border with the color of variable gray border also we're gonna smoothen the edges for the radius 50 percent that makes it a circle we're also gonna give it a color of transparent like so so no changes yet seeing but when we add it later we're gonna see that it looks perfect then let's copy paste this down like so we're gonna Target the type of checkbox again but now we're gonna say B4 and then after like so here we're targeting the check mark when we've actually checked it and here we're targeting it when it is unchecked so we're gonna give it a color of let's see variable White and then we're gonna give it a background color of variable green and then we're gonna give it a border of zero point zero six REM solid and then the variable uh green and also a border radius of 50 like so then let's target our counter which is this one down here and we're gonna give that an order of 0.06 REM solid and then variable of Gray light like so actually that was the line here next let's target the counter container and here we're gonna say it's gonna have a height of 2 REM and a display of flex and they justify content of space let's see in between as we can see here it's starting to space out nice and evenly and we're gonna give it a color of variable rate not green Gray like so then let's target the counter container and then the paragraphs inside of there we're gonna align the self as we can see here this sits a bit higher than this horizontally so we're gonna align self to the center and that puts it Center within this height here then we're gonna Target the counter container again and then the button inside of there which we see is this button here then we're gonna give that a border of none and then we're gonna give it a background color of transparent like so we're gonna give it a color of variable great and we're gonna give it a font size of one ram like so then we are going to Target our footer foreign and we're gonna give that a display of flex we are gonna give it a gap of 1.8 gram we're gonna give it a background color of variable White we are gonna give it a padding of 1.2 REM 2. we are gonna give it a border radius of 0.5 RAM and hit save and we see it pops up nice and neat then we're gonna Target the made by and also the author and we are going to give them a font size of 0.9 Ram just a bit smaller and then we're gonna Target only the made by and we're gonna give it a color sorry a color of variable dark her gray dark and then we are gonna Target only the author and give it a color of variable and that's gonna be blue as well as a font weight of 500. like so let's say bold here like so and now we're gonna style our scroll bar here so let's target our scroll and we're gonna say it's gonna have a height of 15 REM then we're gonna say scroll scroll bar width is gonna be thin then we're gonna Target the scroll and say colon colon web Dash webkit let's see web kit scroll bar this is a bit finicky but it's basically to ensure that it looks good across uh different browsers so we're gonna give it a width of 0.6 RM let us copy paste this down copy and paste scroll webkit scroll bar and here we're just gonna add Dash sum thumb like so and inside of here we're gonna say background color variable blue save that and also border radius 0.5 Ram let's copy this one hold down if you hold shift and ALT and press down you can copy it down and here we're going to change the thumb to track and here we're just gonna say display none so we don't see it now because we don't have actually tasks here that are is filling up the space But as soon as we add tasks so now we can write here but if we click the button nothing happens this is now basically a static web page it doesn't take any info in it doesn't do anything with the info but it looks pretty good and that is all for our style sheet now let's move on to our JavaScript so let's create a new file we're going to call it script dot JS and then we have to actually the similar way as with our style sheet in our HTML in our head we have to actually link the HTML and the script so under our link to our style sheet we're going to write script and then inside of here we are gonna say SRC and that is gonna be dot slash and then script and then behind that we're gonna save the fur which is a attribute it's an add-on that we say that before you run the script run the entire HTML first and we just avoid bugs this way because otherwise the HTML then the browser is read from top to bottom so it would read it from the top and then when it came to the script the script will be containing a lot of references to things that are down here under the script and that's going to cause errors while when we have the defer it's going to skip the script run through all of the different things here and then it's going to recognize the IDS and the classes of things when it runs the script last that's what the deferrer does now we're ready for our JavaScript let's go back to our JavaScript file and the first thing we're going to do is we're going to say retrieve and then hit Ctrl k u that's going to comment here retrieve uh to do from the local storage or English spelling is not my best skill and empty array like so let's turn on word wrap here which we have to do per like so per file so what we are doing here I am basically writing what we are going to do in each section so in this first section we're going to retrieve R2 from local storage what does that mean well if we right click on our side here we hit inspect and then here we have things we have elements we have our console if we hit this Arrow we see we have application if let's just make that a bit bigger like so then we can drag it out here we see that inside of application we have something called storage and inside of there local storage and then that's this website here and here we see that we have something called a to-do this is something that I have from the past years probably doesn't have this any of these yours probably looks like this and maybe even it doesn't have this theme because I've specifically set my Chrome thing to dark but uh in in the case of that yours is empty or that it only has a theme or maybe something else as well that's a okay but this is basically where we're gonna store our to-do's when we are creating them so that when we are adding to do is we're storing them here so at the start when we refresh our page for example we don't want to clear all our to-do's we want to retrieve our to-do's from local storage and if we haven't been on this page at all we want to just start a whole new uh basically save spot here and that's going to be in the form of an empty array and what is an array easily put that's an array this is an array it's these two brackets and inside of an array you can put a lot of things you can put numbers you can put uh things like hello in that case it will be hello that's a string or you can put even other arrays or you can put for example objects and what is an object well instead of brackets it's curly brackets so that's basically the essence of what an array is it's a way to store information and both an array and an object store information and they can store the same things but in essence an array has brackets and an object has curly brackets and they are very useful tools in our JavaScript toolbox so the first thing we are gonna create here in order to store our uh to Do's or to even retrieve our to-do's is to create a variable similar to in our style sheet and the way we create a variable is by using the let keyword if you've been looking online then you might be coming across something called VAR for a variable that is the older way to write a variable so let to do is equal to one let's just say that so now I'm saying that the variable called to do is equal to one and why did we change from the keyword VAR well because now in the past it was VAR and that was the only way to write a a variable and now we have something else called not a variable but a constant which we initialize by saying const and then this test equals to 2. so if we try to change this to do later if we're referencing it and then we say well to do is not equal to 1 anymore it's equal to 2. that is a okay but if we try to do that with const we say test is not equal to 2 anymore it's equal to 20. then that is going to give us an error whilst this is going to run just fine and basically that helps us Define certain values that is meant to be changed and certain values that is meant to be kept constant so that is why we don't use the bar anymore although we can still use it in and it's going to be the same use case as wet to with that out of the way let's actually create our let to do so the to do is gonna be equals to something called Json which stands for JavaScript object notation and it's basically a way to format JavaScript code that is easily read and you don't have to think more deeply about it for now because we can go in detail about it but think about it basically as a way to format our variables and our arrays and the way we store our information so we can actually read it and send it between the different places we want to use it so we're going to say Json parse which if we hold over here we see converts a JavaScript object notation it converts this Json into an object so it starts as a string and then it turns it into an object and if we remember an object has this form and then it's going to be a lot of data in here like so and that is basically how the Json object looks without all these jumbled code here it's a bit prettier than that so what do we do with this now well we are parsing something what are we parsing here well we are trying to get a hold of retrieve to do we're trying to go into this local storage and get something from here and so we're gonna say inside of local storage we want to get item and what is that item called well it is going to be called to do and if so let's just save that so if there is a to-do here we're getting that item and setting it equals to Let's to do which might be a bit meta if you're not used to this way of thinking but basically think of it like this if this already exists because we've used the browser before we're just going into this list and setting our to do to be the same as it was in the past but if it doesn't exist then we are going to say or by denoting these vertical two lines we are going to say or it's going to be equal to an empty array so this part is the first part and then this means or and then this part is the second part so let's to do the variable to do is equals to go and get the local storage item with a name to do and if that doesn't exist then we're going to say well then let to do is just an empty array and that's your first piece of JavaScript code if that's your first time writing JavaScript so I know this is very theoretical but we're going to see this in action very soon then we are going to create a couple of constants so we're constant as you remember is something that is not meant to be changed so that's very useful when we are referencing HTML elements that stay the same element that they they keep the same ID in class so we don't need to change them so a security measure is to just use the constant keyword and not the left keyword so that later down the line we can't change this name by mistake or change the value of it so const to do input equals to and so what is the do input well it's basically what we are wanting to reference here in our body we have a to do and then inside the class input we have an input here so we're trying to get a hold of this input and the way we can do that in JavaScript is we basically have to make a reference to it so think of it as we're referencing the HTML here we're going to reference this to do input here with the ID of to do so we're make basically making a let's say a clone of it or a copy of it that we are referencing and how do we do that well we're saying go into this document this HTML document and go and get the element let's see get oops dot get element and you can see you can get it by class by name we're going to say Get It by its ID and then parentheses and that ID is called to do capital I input so get that to do so now to just show you some JavaScript actual visually and not just theoretically now we've defined this to do input in our document in our JavaScript what we can do now to test that it's actually finding anything is we're going to console log it and that is basically as you can see here in the browser we have something called our console it is basically a very useful tool to tell us what's going on in our script here so now that I have defined the to do input I can use it so I'm just gonna console log to do input and then hit save and we see something popped up here we see that it came from script JS Line 6 which is the line we're on here and it is console logging to do input if I press this here now you see that we have input fields to do and that is basically you see we have a lot of attributes here that we are not basically using we're not they're they're all hidden in the background and that's true for most HTML elements but you can see that basically this is our input you see input hashtag to do input input field and that is our input here if I save sometimes it also shows I don't know why it shows it sometimes in this way and sometimes in the other way but we can see if I hold over it it is showing the actual input field okay great now we have console log it is working to Target these we're going to make a couple more so cost to do list is gonna be our next one and we're just gonna copy the same way here I'm Gonna Save ourselves some typing document and we're going to get element by ID it's going to be instead of input it's going to be capital L list like so so we're just referencing the different elements that we're going to need on our page to make the JavaScript work let's shift alt and then hit down twice to just copy down the whole code and the next one is going to be called the const to do count that's going to be the counter here get element by ID and that's going to be to do count like so and the fourth one the fourth const is gonna be the add capital B button and that's going to be document and not get an element by ID we're going to use something called query selector and that is to Target a class and we're going to say dot BTN and be sure to have uh quotation marks around so like that and then we need one more const that's the last one we're creating here and that is going to be our delete button and document dot get element by ID I use the arrows here to go through the recommended Suggestions by Visual Studio code it saves a bit of time typing and it's a useful way to be a bit more Speedy with your coding so when you have selected the one you want get element by ID you can just hit enter and that finishes the typing for you and then quotation marks delete delete button using camel casing now we have all our elements now we want to initialize any shell eyes our project so what are we doing here well we want to start our project because now nothing is still working nothing is happening here so how do we start our project well we need to actually listen to some changes because now the only thing our project is is a static web page and the thing that changes the aesthetic web page to a dynamic web page is change so we are going to listen by listening to the document which references the whole page and we're going to say add event listener we're literally every you know micro second I don't know what the timeline is but very very often like many many times a second we are listening to events so that can be a click that can be a hover that can be a typing there's a lot of different events but in this case we are just listening in the entire Dom content loaded oops entire Dom counted loaded like so so we are using this add event listener we're gonna listen to the Dom content here the page here and we are gonna say when something happens on this page and we're gonna run a function here and this is how we Define a function we say function and then these parentheses and then what is gonna happen inside of the function so when we have our document open we're listening and we are having a function that is continuously running inside of our document and then we're gonna say add button where is this coming from well that's the add button we've created here which is the button that's this blue button so we're targeting the add button notice that we don't we don't need to say the const again because here we are creating the button here we are just referencing it so we're saying add button we want to add an event listener to this button and then whatever event are we listening to well it's gonna be a click because we are clicking this button right now nothing is happening but eventually we'll be able to click it so when we click it what do we want to do well we are gonna call another function it doesn't exist yet but it's gonna have the name of ADD task and that is everything we're going to be doing for now let's not forget our comma here then let's just make this function add task so we don't forget so function remember that's how we Define a function but here we Define the function without a name here we can define a function called add the task and then still adding the parentheses and then you know some logic in here let's just uh comment that out let's just make this screen a bit bigger so it's easier to see what is happening here well when we start our document when we start our page we're continuously listening to something happening and then we're specifically listening to if we click this button and then when we click this button we run this function here and that's this function and we're going to create the logic for that function later but for now we're also going to add another event listener so under here we are gonna listen for the to do input by adding our event listener and we are going to listen for a key down and that is basically any press of any key on our keyboard and when that happens we're gonna run a function that is going to take an argument and you see all our functions have these empty parentheses but this one has something inside and that is an argument because we can send something into our functions and here we are sending an event which is the key down and here then what happens when when we press a key we send that key in as an event into the function and here we are inside of the function what happens then well we're going to ask if an if is basically just a question if something then something happens but if that is not true then whatever is here doesn't happen so if the event which is the key if the event dot key is equal to enter basically if we're pressing enter then we want to run a piece of code what is that piece of code well we want to say first then this is going to be maybe a bit complicated but event prevent default because whenever we have an event like this we have a default um behavior of the browser usually for the input it's reloading the page or sending us to a different page so we are basically saying don't do that don't refresh the page or send us to another page that's what we're saying with this event prevent default that's just a safety we're putting here but then we get to what we actually want to do here instead we want to say add task again we are referencing the add task function so as we can see here also you might be wondering why we don't have the brackets here that is basically just some lazy typing we should always add these sorry not brackets parentheses so basically we are calling the add task if we click the button and if we hit enter here and then we are into our add task function you just made your first logic in JavaScript so pat yourself on the back before we're done initializing our logic let's add our delete button here as well because we want to make it live and functional as well so we're targeting our delete button we're saying add event listener here we're simply gonna listen for a click as well when something is when it's clicked we want to say delete all tasks and that is also a function that we haven't made yet let's copy that and Define that function now and let's just copy that there so that we also don't forget to create that task in addition last in our initialization here we want to also display any tasks that we already have so display task plural tasks is going to be our last function that we initialize this document with same thing here let's define that function display tasks and like so copy paste that and it's also going to have some logic great we have started our JavaScript code now it's listening for advanced here but nothing is happening of course because these functions are empty so let's start by creating our add task here so let's take away the comment and we're gonna say const new task because we can also create our constants not just outside here globally as it's called we can also create them inside of functions we can Nest a variable that only lives within this function and if I try to access this constant anywhere else outside of here it's not going to work so constant new task is going to be equal to to do input which if you remember here is this constant that we defined which is basically this box here and we're gonna say dot value which is going one step further now we're saying this box but then the value that I am typing here so the text value is actually this value here and it doesn't have to say value you can say whatever you want so whatever you want that piece of text is this value and then we're going to say trim and that is an inbuilt function you see that it's a function it turns yellow because JavaScript has a lot of inbuilt functions and methods as they're called so trim whatever that does is basically if we have a text here and I have a lot of space is simply going to trim away the space like so that is what we're doing here it's just an added safety feature so we're just defining this new task as whatever we write in here if new text the one we just created is not is not equal to and that's how we write that by saying exclamation mark and two equals and what's the difference between one equal sign and two and three while one equal sign means we're setting this to this but three equal signs means we're measuring is this equal to this was if I said like this I would say this is equal to this now and if I have an exclamation mark and two equals sign then I'm asking if this is not equal to an empty string what is an empty string well text as a string whatever I put inside of two brackets here curly curly brackets that is going to be a string in other words it's simple text so what we're saying here is if new task is not empty so if I have written anything inside of here then I'm going to run some code and the code I'm going to run is I'm going to say to do which is remember that's the first thing we made that's the list we have in our local storage I'm gonna say to do and I'm going to use another inbuilt JavaScript function called push which is basically adds a new thing to the to do new element to add to the array so remember either the to-do is something already or it's an empty array which is going to be the case for us the first time so what I'm saying is here push whatever is here we're going to push that into here and we're going to save it there because that's what we want we want to add it into our to-do list so how do we push well we need to add it as an object and we don't really need to do that but we want to do that because we don't want to just add one thing at a time for every task we want to add two things and that's how we can use an object inside of an array because we're going to keep track if each task is either disabled when we check mark it or if it's enabled when it's still left to do so it needs two values per to do task so that's going to make sense in a moment so text is gonna be new task that's whatever you write here that's our first value then our second value is going to be something called disabled which is we're just making out these names this text and disabled is just variable names that we have chosen and then that is going to be set by default to false so every new to do is going to have the text that we give it and then it's going to have a disabled value equals to false because it's gonna by default be enabled then once we have done that once we have pushed that into our uh to do array we want to run the save two local storage function that we haven't made just yet either like so and then we want to clear the value once we've added our text to a to-do list we don't want to still have it here so we want to clear that text so we're going to say to do input dot value is equal to an empty array sorry empty strings which basically sets this empty again and then we want to call our display tasks function which we have here already so now let's just copy this one and create that as well function and then save to local storage local storage we're gonna say we're going to set the item and we are going to say this item is going to be called the to do and then when we have that item we're going to say Json Dot Dot stringify this to do like so let's check out what happens when we actually run this add task function here so let's try to add our first task so if I inspect here and I go to application we see that a local storage is for now only holds the theme dark what if I add now first task and I hit enter now we see that there is a key with to do and the value is text first task disabled false which is exactly what we made here and if I click let's say second task and I click this button here nothing is happening because yeah we don't actually use the parentheses here sorry for saying that earlier they're not supposed to be here when we are calling it in the event listener neither in the delete button here like so we don't put the parentheses here so we're just gonna save and try again let's see second task and now the click works so that is good let's just see if the delete tasks work as well I'm just gonna write some a console.log here and we're gonna say test just to see that the button works and let's see delete button ah we see that the test is running perfect okay so sorry about that be sure to fix the add task and delete all tasks without the parentheses behind so back to our application we see that we have our two tasks and now we see that whatever I add here gets added to this list and if I open one we see that it has disabled false and the text that we have given them how cool is that and that is all saved basically in our browser local storage now if this was a real app with a server you wouldn't be saving it necessarily in your local storage you might be doing that as well but you would normally send it somewhere to store it safely so that if your browser goes down you clear your history you can kind of get a hold of that information from a server so now we have our tasks in our local storage but they're not showing up so that's the next thing we're gonna do we're gonna go and try to actually display these tasks so we're gonna go down to the display tasks function we're going to delete the a comment here we're gonna access the to do let's see the to-do list that we made up there and we're gonna say that the inner HTML which basically means the HTML inside of this and we're gonna set that equal to an empty string because when we start this project for the first time and when we are running this task function over and over again we don't want to be kind of doubling all our to-do's so we only want to be adding the newest to do if there wasn't one there already and this is basically how we're going to be doing that by setting it to empty first because then we're going to be re-adding all the to-do's that we have in our list how do we do that well for every to do or actually Four each to do which is the correct syntax we're going to take the item or actually double parentheses in here we're going to take the item which is the to do and we're gonna take its index which is its position compared to all the other items and then we're gonna say we're going to run a function and this arrow is just a different way of saying function it's a different way of writing a function but this is a function and also this is a function so this is a function within another function so for every for each item that's every to do and it's index we're gonna say we're going to run this code we're going to basically create another element that we're going to put inside of the HTML because remember here we are actually starting this by saying in our HTML so we're going to create a constant here we're going to say document and we're going to say dot create element which is how you create a new HTM element while you're in JavaScript and that element is going to be a paragraph and then take this paragraph and go into its inner HTML and here be sure to not write a quotation marks here like this or a double quotation here we want to add a backtick which is different and we want to add two backticks and then let's make some space in here and that is how we Define HTML code inside of JavaScript so now the JavaScript knows that this is HTML and not let's say variables because now everything inside of here you know is HTML it's it's orange as we can see so it's important that it's backticks and not uh double like or double or single quotations then inside of here we are gonna create a div so like so and and closing div tag as well like so and then inside of the div it's gonna have a class of equals 2 and here we have double quotes that class is going to be called to do container container like so we are basically making the and adding the the HTML the structure of the HTML inside of our JavaScript and we're going to do that for each to do we make inside of this div we are gonna have an input and then an input doesn't have a closing tag it is a so-called self-closing element and here we're going to have a type set that equals to double brackets and that's going to be a check box it is also going to have a class equals to double quotation marks to do check box as well as an ID equals to input Dash and here is also another interesting JavaScript code we're going to write we're going to write dollar and then curly brackets and you see this becomes yellow and that's basically how inside of this HTML we kind of get to use JavaScript again now the file here recognizes that here we can put variables now again whilst here if I were to try to reference let's say the to do it would just be JavaScript sorry HTML code and it would just come out as to do text whilst here if I write to do I am actually referencing the variable to do and that's how we kind of mix HTML and JavaScript by using these backticks and also the dollar sign with um curly brackets so what are we giving it here well we're giving it this index because every to-do is gonna have its own index and that is how we keep track of every one of them and basically every to-do is going to have its own ID called input 0 input one input two etc etc so here we're gonna say index and then after that we're gonna let's just copy this dollar sign here we're gonna say item is it disabled basically meaning does it have if we inspect our application we go to our to-do's we see that our item disabled is false here but when we say like this item disabled like so we're asking is this set to true whenever we're asking just like this that means is this true if that is the case then we want to give it the check attribute if not if not we want to make it empty which is basically giving in our HTML another attribute which is either checked or nothing so we are done with this part now we are going to create another paragraph here like so and let's not forget our closing paragraph tag and inside of here let's see like so inside the first opening element we're going to give that an ID which is going to be equals to to do Dash and this index here also giving it a unique Index this is to both have a unique way to Target an element but also to avoid some errors that we would get in the console and it's also going to have a class which is going to be equal to and here we're going to put the dollar sign again but we're going to change that to item dot disabled and we're going to ask the question again if it's disabled then this is what it's gonna have disabled class and if it's not disabled then it's just gonna have nothing which means no class so when something is disabled it's going to get a class CSS class that we're in style we actually have styled it if we go up here and we see the disabled let's see if we can find it here we go we see that then it gets the disabled class and it gets aligned through and if it's not disabled it just gets nothing so no class is added or in other words an empty class is added which would make it a not a class so it's normal if you're writing something wrong here when we're writing it like this it's hard to pick up on any errors just to make sure that you are not stuck here I have added this finished code in the description below so you can copy paste in this function if you run into any problems or something isn't working or if you just want to see the difference between our codes and reference the finished code so you can find the link below this video so then when we have added this paragraph we also want to inside here we want to have an on click and that is going to be equals to pick some space here then on click is gonna be referencing the edit task because when we want to click the paragraph We want to be able to edit the actual text there and then inside of there we want to be calling some JavaScript again we want to call the edit task on the index that we have clicked we don't want to edit all the text for all the to-do's we just want to edit the task of the to-do we clicked and then we are almost done here we want to also add inside the actual paragraph the item Dot like so and then we can kind of close this paragraph there and we close the div and then that should hopefully work when writing that much code without testing it it's kind of inevitable that we have some bugs but I'm crossing my fingers then before we test we are also gonna Target the paragraph we're gonna say query selector and then we're gonna Target the class to do check box like so we're going to say dot add event listener and we're gonna say listen to change that means if we edit the text when we've made it then you're gonna run an arrow function and inside of that Arrow function we are going to toggle task and that is another function we haven't made yet and we're going to toggle not any task but the task that we have changed save that and also we are gonna Target our to-do list and we are actually gonna add all the stuff that we just made like so and when I hit that save we see that we got the tasks that we have already been making in our project so it actually seems like we have correctly added our JavaScript and actually correctly made this code well semi-correctly it might be something wrong here we see that we don't have the um correct styling but that just might be a problem in the CSS let's leave that for the end for now we see that we are actually adding and we are able to check our code here so as we can see we have a little styling issue here let's reload the page let's I see here actually that we have forgotten well I'm blaming you I have forgotten to actually give this the display it should have so let's target the input here over input type checkbox input type equals to and that's going to be check box like so and then inside of here we're going to have appearance none okay we are on to the correct spot we're gonna have dot web kit appearance and that is also going to be none we're gonna have dot Moz appearance this is just making sure that the different browsers don't display it and then we're gonna have our cursor as we can see here as well it's not changing so we're going to have cursor to pointer like so so now still not showing the check mark even though we might be actually checking it the problem must be here somewhere uh yes we have here an extra it's just one colon here let's do that save that and that was not it but that was ah this is supposed to be and then it's supposed to say before like so now let's try there we go cool and then I also forgot to add some styling here just getting a bit late in the evening but uh okay I just forgot a bit of styling here but we're gonna add it now no no harm so here we are actually going to is there even a disabled one here okay I see what I did so let's copy the hashtag to-do list p let's copy it down here and we're going to change the second one instead of to-do list B we're going to say dot disabled and we're going to keep the color as it is there that's correct but this one we are gonna uh take away the color we're going to say display Flex looking better and then we're gonna give it a gap of one gram and we are gonna give it a color of the bar in the dark like so and we are gonna align the items to the center and that's much better so as we can see also how cool is it it's taking shape we can see that we are checking the tasks we are can uncheck them they are not being disabled which we're going to also fix it seems to be that can be a styling issue that can also be a JavaScript issue um but we're going to fix that but as we can see how cool is it we can add a new task new task hit enter and then we see we get our new task you see it's also refreshing our like all the check marks go away we're going to fix that but that is pretty pretty cool so we're getting close uh to the finished result let's see because I see here that in our when we check our to do here let's say we check our first task here the text should be strikethrough as we can see here in our disabled here it should have us dragged through text and the color should change to like a grayish color um which makes me believe that we probably haven't added it correctly in our JavaScript of course we haven't we're not actually dealing with that logic in our display task that is of course in another function we're gonna create okay so everything is good for now let's move on with our JavaScript let's create the function to actually toggle our tasks so it's going to be toggle task and we're going to say index because you see here we are calling the toggle task when we are changing the actual text here when we are clicking the checkbox which is this so then we want to take the to do with the index we click on we want to go into that index we want to go into like so that's how we target it and then we want to go into the disabled property that we have on every to do and we want to say that it is not disabled so we're just using the same code and saying not and because it is by default false it's going to be set to true and then we also want to save to local storage so that it is saved to our storage not just visually and we want to display the tasks again with this new uh new visual appeal so let's see and we see that it works so we're basically just switching between true and not true for the disabled feature which means that the class that strikes this out is true and not true now it's getting a bit messy here I want to enable this delete all buttons so we can clean this up a bit let's make the function function delete all tasks and then I want to Target the to-do I want to say instead of being what you are I want to just put you as an empty array and then I also want to save that to the local storage like so and I want to display the tax tasks again with this new state so let's try it and it works and then we can see in our inspect here if we go into our application we see that the to-do is now an empty array we add a new task it fills we delete it empties now the only thing we're missing is if we add a new task here new and let's say I missed ballot tax I would like to click this and now edit it I can enable it and disable it but I want to edit this text and fix the typo here so I'm going to create a new function here over toggle task I'm gonna say function edit task and I'm going to say index remember these are all the things we're we're using those in the HTML here edit task we're using here toggle task we're using here okay so edit task of the task we are currently on because we're targeting it with its position we want to add a new constant here we're going to say to do item it is going to be equal to document dot get element by ID and then important use back text here not uh quotes we're going to say to do Dash and then we're gonna use the dollar sign and then the curly brackets index and then after that we're going to click constant egg existing text and we're gonna set that to to do index and text so what does this mean well we are saying the to do item we're just creating that is equal to the to do with the index that we are sending in so the to-do item is the item that we click on basically and then the existing text is the text that is inside of the to-do that we click on that is what we have defined here and then a new constant is the input that we are giving it so the actual new stuff that we are putting on to the text or the change of the text basically so the document we're going to create an element here create element and we're going to say it's going to be an input because here there's no input here nothing happens but we wanna when we click on this it's going to create a new box here for us to actually add or change this text in reality we're going to be adding new text so let's target this input element dot value and we're going to say that's going to be existing text so we're going to start by putting this empty input and putting it equals to the text that is already there so that it doesn't start from scratch and then we're gonna say to do input we're going to say replace with the input element like so then we're gonna basically be putting in whatever we input into this oh sorry it's going to be to do item here not to do input so then the to do item here the whole item is going to be replaced with what we are writing in or actually for now it's only what is already existing there [Music] then we're gonna say input element dot Focus which means that when we start writing automatically it's not going to be writing here it's going to be focusing on the input we clicked on so it's going to be being able to write there then let's get to the actual writing Target the input element we're going to add an event listener we're gonna say alert and blur means basically when the focus ends so blur is the end of focus so when we click this now this is focused and when we click out that's a blur so when a blur happens then the function that is going to be run is going to be caused updated updated [Music] text is equal to input element dot value dot trim to remove the blank space which is a fancy way of saying the updated text is the whatever we wrote inside of the new input here look at that then if updated text exists then we want to go into the to do into the index go into the text and we want to set that to the updated text like so and then we want to save that to the local storage like so and then we also want to display that in our actual list like so so let's delete the task here new tax I wrote it wrong I want to change it task and I hit or I just click out actually we haven't added the functionality to hit enter but you could if you want here but we just click outside and we see that the task has been updated and it should also be updated in our application new task let's change it again let's say three and we see that it updates in the local storage as well so with that I think we have everything we can add our task we can hit enter or click we can delete all we don't have our counter of course this is not working so we forgot to put the counter function here which is not really that advanced let's go into our display tasks function here and at the end here no it's here to do count why is it not working to do count to do count let's see if we are getting any errors console script 51. that is indeed our to do count so something is not working to do count get to do count maybe we just misspelled it let's see let's copy that here to do count we don't counter we forgot to add an ID here we forgot to just add it so like so always be checking your script here your console we see when I added that it disappeared and let's add a new task and we see that our counter is working cool the way that it is working let's see here to do count text content basically let's let's basically actually let's inspect here let's go to the console let's just copy to do count and write it in here hit enter and then if I hover over you see that it counts it Targets this now let me Target this whole thing put it in there hit enter you see that that's the six and then let me Target this one put it in there you see that the length of to do is six so we're just putting it let's see also the to do so the to do is the actual array we see that the length of the array is six one two three four five six and it starts on zero because an array is a zero based index um that's just the thing you have to get used to and it's very common in programming that things start from zero so the first position of any array is usually zero um but it is six items inside of here so the length is six and that is basically how we're counting this we're saying that the to do count text content which is the inside of the to do content we're just setting it equal to the length of the array always so when we add things or remove things like so it's gonna update this um number here as well and with that I think we can check we can check off we can edit we can delete add a new button and it counts with that our task is done I hope you really enjoyed this video I hope you enjoyed coding it along with me um as mentioned if you want to reference the code if you have any bugs please check the description below for the finished code you'll find a GitHub repo there where you can download the code if you have any questions or something was unclear please let me know in the comments I'll be making more of these JavaScript based teachings and tutorials where we're going to be diving more in depth about learning JavaScript from scratch and also of course building full projects from them because I think by building that is when you really learn so please let me know also what kind of project would you would like to see next and if you like this video then I highly suggest watching this next video that is suggested for you here until next time see

Channel: How to Become a Developer

Views: 18,247

Keywords: todo list javascript, javascript todo list, todo list app, to do list javascript, to do list app, todo list html css javascript, html css javascript tutorial, html css project, javascript tutorial for beginners, javascript tutorial, javascript projects for beginners, javascript to do list, vanilla javascript project, html css javascript project, web development tutorial for beginners, responsive javascript website, web development tutorial, html css beginner tutorial, html, css

Id: 3OqWCGVaOkA

Length: 124min 57sec (7497 seconds)

Published: Sun Sep 03 2023