Learn to code a to-do list app in JavaScript - Part 1

what's up guys in this video we're going to create a to-do list it's going to be mainly to learn how you manipulate the Dom with JavaScript and also how to handle events so let's get right into it I created a simple design sketch in Illustrator this is how the to-do list is going to look like it's mainly for mobile format but you can also scale it up if you'd like to but we're going to create it mainly for the mobile format that's what we have this big icon on top so you can see that we have a two lists basically like the items that aren't done and the items that are done and you also have a delete icon and a complete icon with two states this one has a hover State that's when it comes red cool so I'm going to upload this this design sketch to you guys can also you can also export the icons however you like and design it for other formats as well cool so let's go let's let's create some code so in the app folder right here this is where all our code is going to be we have the reset CSS and this is my custom reset that I used for most of my projects is really simple sets up some basic properties like box sizing for all elements and some basic floats fonts and stuff so you can check it out if you like to it's going to include to be included in D code and then we have some icons that I export it right here and we're going to use inline SVG you can also use it as a basic image tag in the HTML but in this in this video we're going to use as a lights as we ding all right so let's just open up our favorite text editor I like atom throw in the folder and right off the bat we're going to create a resources folder inside of this resources folder I'm going to create a CSS folder a JavaScript folder or j/s folder and of course we're going to throw in the reset CSS right in the CSS folder and in the index or root file we're going to create an index.html that is root folder max and let's generate some base HTML to do this app as a title and we're going to create a style dot CSS file cool all right so we're going to link in our style sheet and of course if not and could be reset first all right cool so now we have the basic front set up and our styles and we have the HTML you can open up the HTML if we'd like to to see our changes you can also split this view to make it easier for you guys to see hide the treaty ok cool all right so if we open up the inspector so - iPhone for size you can see that the head actually gets the style sheets and we don't we have we have no errors so that means to be the styles are loaded so cool let's get going then so first off will you see that we have a header on top and this is going to be fixed so it's stationary on top above all elements so you can scroll and you keep it on top so we're going to create that first and that's going to be a header going to start off with that and we're going to set the header ok center with 200% and then the height what is it like aiding agree yes 80 pixels and it's going to be position fixed top:0 left:0 design index we could set 5 since it's on top and that accommodates for any overlapping elements that might need set index for whatever reason then we have a green background there's the hex value cool you could also see that it has round corners right here so you can check out the round corner value ten pixels so that is border bottom right radius 10 pixels and the same for the bottom left corner okay cool it also has a simple box shadow so we're going to grab the box shadow it's going to be this color so set that right there box shadow was it zero to four right so the RGB a is 40 for 60 to 80 and 0.15 right yeah cool so X Y spread or blur rather spread is the next one and the color of our box shadow alright so that should damn it okay let's just show the treeview either way you can see the code cool so check it out all right so we actually have our handle right there that's cool so easy to size it up a little bit going back here you can see you see that we have an input field as well as a button right there that's going to overlap our input fields we can do this on a couple of different ways but since there are no more elements underneath inside of this header we could just put them in straight into the header without any container or anything like that since it's fixed as well we can position than absolute inside of it and it's going to they're going to be a session based on the actual header so let's start off with the input field it's going to be a text input with no name value we can set the placeholder to be enter and activity dot dot okay cool and then we have a button and this button actually has an SVG right here in the middle that's the first one so we're going to do that in just a minute so we're going to start off like that that's the button and then the input field so header inputs that's going to be good hundred percent high 20 percent float:left actually notes hundred percent it's 50 pixels I believe yes 50 to do background that's an RGBA as well that's why in 20 percent so that's 255 so point to a border radius of 5 pixels order of zero pixels box shadow of none outline of known as well we can actually set up parents so you just reset that okay looks looks kind of good we also need to add some padding for the header all right cool now you can see in the design sketch that it has border-radius to make it completely round so comedy for the button that's what we're going to do we'll click let's border top right radius and since it's 50 pixels it's going to be 25 to accommodate for the height and the same thing for bottom right okay cool so that looks like completely wrong because I set the part damn it max damnit order top left radius border bottom left coal so now it works and we're going to do a little hack right away where we're going to set the text indents to make make the text jump in you can barely see it so actually let's wait for that and just set the placeholder color to put a bit more white this is a pseudo selector for the input placeholder I believe it's going to be fit okay hmm that's interesting I actually set it to a hundred percent hmm oh well that's that's a bit weird though let's actually set it to 75 instead yeah that's better and we're going to set the color to F so after we type yeah it's white okay cool so before we continue real quick we're going to grab the fonts that we are using and I'm using Roboto and the best way to implement fonts in a website is using google fonts so this is the new google fonts design looks great in my opinion I think the Roboto is going to be on top yeah there it is so let's check out which sizes were using or which styles regular 400 that is medium let's grab regular medium and bold just just so you H mm regular medium and bold yeah and we're going to use the HTML and bad I'm going to throw that into HTML actually that's just full screen this it's going to be easier so here's our fonts we can actually add a comments cool and then on top tweak it set body and input button yeah let's set that and then grab the font family okay cool so you can see probably that ditch the font family changed for the input and we're going to set the font size as well it's going to be 15 yeah so that's font size 15 508 400 that is normal okay cool now it looks better and the text indents would be 15 now actually 20 nice yeah no that's too much 18 yeah looks better much bigger okay let's just fix the button real quick oh right just going to Google one thing see which ones are covered at Stack Overflow a few CSS tracks said WebKit Moz ha okay cool so these are just browser compatible fixes you don't have to do these you can use prefix autoprefixer for sass or less I don't really care I'm going to do it the old cold way some people are going to bash me for that but I'll care get cool so now it's going to work across the browsers let's fix the button like I said 50 yeah and since this is going to be on top of the actual input field we're going to have to be positioning it absolute we could set a relative but that would we would have to fix the width of the input and all that since we don't have any different elements and such this is just the easiest way to do this and the top is going to be 15 pixels the right 15 pixels as well to accommodate for the padding we can sense index Zed's index set sad index 2 to do cool we can also remove the appearance of our button let's set the border radius to 25 pixels the background to white border to 0 box shadow to none and outline to none nice really nice let's resize it down real quick you can see that the input actually continues on and that's not something that we want at least by what I mean it continues on is that we want the text to stop out right here so we're going to have to accommodate for the width of the button in adding some padding and that's top then right and then we're going to add 50 at least actually that's 2060 60 pixels to accommodate for that yeah yeah that's much better and why I set the text indent and set up the padding well I could actually show you instead of tell you you see that there's no difference but when you start typing you can see that it breaks off right there and I know I personally don't think that's very user friendly because if they overflow they don't really know unless the character breaks so just to be extra detailed or make sure that the user sees that you can see that it overflows to the left so that's why I do that nice so now we actually have the header almost almost done why I mean almost done is that we don't have the actual icon in the middle so we can grab our icons real quick over on here we have the Add icon SVG we can actually open it up directly into the text editor because the SVG is code its SVG code okay cool so we are going to we could keep it in the group right here you don't really have to understand this you can read up on SVG if you do know SOG cool awesome great we're going to set the class of this path right here the path is the actual plus sign we're going to set that to Phil and we can remove the style right here then we can grab these this is the only important part of this with you that we need so we're going to copy that and we're going to don't save it and inside of here we're going to paste this we're going to minify it like so cool nice wait a minute I don't know if that's actually the good the good way the right way to do it but let's just make that's let's don't care about that right now I'm going to do it real quick okay so with 16 pixels I'd 16 pixels don't left where actually we can Center it instead of using flexbox we can just Center it the old-fashioned way next and since we added a class to that that path we can course grab the fill and set the fill to be the right color and in this case it's the same green as the header cool so now we have our header done awesome so you can type stuff we can't really add anything else and yes but we will be able to let's make sure that this has the cursor:pointer on it so you know that we can actually click it nice all right so we're also going to add the background you can see that it's slightly grey grey ish very light grey we're going to grab that color and set that to our body set that on top actually prefer that cool really really cool let's just close these tabs so now we're going to have to introduce some JavaScript into this we're going to set an ID to the bottom the button add item okay cool and then item or let's say I don't find them add step okay cool so in the JavaScript we're going to have to grab some stuff and this is where we're going to grab the events of a click on the button we're going to grab the value of the input field and add it to a list so first off we're going to create a that's crinoline dot yes this is going to be the main J s main J is obviously hello this is going to be the main JavaScript file that we're going to use I don't think we're going to have to use more than one now we're going to include it at the bottom of our HTML file or the body actually okay nice so that's just for lulz yay cool so I know I talked about this in the past past video about where you should put your script tags and it doesn't really matter because if if we were to now grab this button right here who wants this specific button we would have to refer to the document which is the Dom the document object model and we want to get element by ID and that is add let's just log this you can see that the button is right there if I'm wrong right now I'm going to be so embarrassed but I am 99.9% sure that this is not going to work yes I was right that's because when you load this the document object model hasn't loaded all these elements doesn't exist yet when you load this because an HTML file is loaded from top to bottom so that's why you post or you you paste your script tags in the bottom of the body but if you want if you really want your script tags in the head we can do window onload then do whatever you want and this is going to execute when the window has loaded and then the button exists pretty cool so if we were to run these both so you can see that the first one is no and then second one is the button which is an object in this case there's the button and the first one is the second one but the second one is one first because we know onload is an event that this function listens for this event to happen and then it logs the console.log which happens attributes okay so now you know that but since we don't want to clutter our code with some onload events we could just paste this in the body doesn't really matter like I said where you post it or not whether you paste it in the body or in the head just be consequent over your projects where you place it before you use them actually charlie Scrooge that's better Roboto font online style sheets and JavaScript cool all right so when we click the Add button we want to grab the value of the input field so documents get element by ID yes the script tag that's exactly what we want it and we want to add a listener for the event you can do two things for this you can do on low on click like this just like we had window.onload but you can also do add event listener like that and that's going to take two arguments the what kind of event and then be all back same thing goes for the window okay cool so now you get that kind of really simple so when we click on the Add button we want to run some code and actually let's break out this code well let's not break it out you could run a separate function called button click and run that when you click on the button itself like that button click but it's kind of unnecessary if you break out code into functions unless you're going to reuse the code on for example if you had several buttons doing the same thing that's good that's a good idea okay so user clicked on the Add button if there is any text inside the was it item field right yes item field add that text to the to-do list cool so when we click on this we need to grab the value of the input field that we have right here and since we have an ID that's going to be extremely simple so we have value equals document get element by ID item then we're going to grab the value properly on the object that is this element so we can log the value click it's going to be nothing ASD can be hasty so we want to check if value is well we can actually say if value because an empty string is always false so if value there was a value whoo so nothing happens it was a value whoo cool so if the value existed we want to add this to the to-do list so let's check out the design will quick see that we only have one text and then we have two buttons on the left on the right we can do the front-end for that as well we'll click just to make sure that we have that design and then we can just use JavaScript to paste in list items we can have two lists actually and then add classes for these to do let's comment that one all right so now we're going to look at how we style the to-do lists that represent 12 left and it's going to contain some lists resets as well but you can see that the list actually doesn't appear but that's because the lists are underneath the header so to accommodate for the header we're going to drop into the body and add the padding of the height of of the header which is 80 nice so there's the list and since we have some padding as well we can add that to the actual list not the body we could do it on the body actually that actually depends on your preference if you want to add new elements and stuff you could you could add that to the body or if you want to the list doesn't really matter so since we're going to use mmm you know what let's create a container for this and why I'm going to show you in a real quick second okay let's grab the URL to do the Li it's going to do the hundreds and load it and then we have a heights as well I think that's 50 s 50 pixels oops well this is not going well okay cool with it uh background whites back and go round I always I always miss Tiger like that back go round for the radius my pixels box shadow and this is going to be the same as the header but a little bit more subtle I think that's yeah it's the same about the little bit lower in some parts of the value so it's going to be one in Y and two and blur and 10% and the opacity okay check that out place so we're going to fix the container real quick as well nice so now we have the container containing the ul-listed ooh and in that we have the list item let's add a couple more items really quickly nice you can see that we have no margin so let's add a margin to the bottom and that's 10 pixels actually nice but the last item we don't have we don't want rather a margin so we just do L to do and I last of you do last child but you can also do last of type because if you have any more list items with a certain class or something you want the actual last of type which is the L I so I always use last I've type for that specific reason we want to reset the margin so the last one is going to have a margin really nice so we can remove those again just to make sure we don't have to copy a bunch of HTML code so the last thing we want to do for the list item real quick is the buttons right here so let's create a div called buttons the buttons going to have a specific width so since these cover exactly the height and the width 50/50 yep so that's going to be 50 plus 50 100 pixels in width and then the height of 50 pixels position it's that's absolute let's absolute let's do an absolute and then position relative on the list item since the if we want to do our absolute you need the parents I have relative to be able to align the buttons or the element inside of the parent to the parent itself in an absolute position okay and then we need to accommodate for that as well so add the padding of zero hundred pixels to the light so that the text actually can break when it hits the buttons okay so in the buttons we're going to have more buttons to buttons and each button is going to be 50 by 50 loads left and we're going to have to reset everything background:none folder so missiles box-shadow none i think that's its outline mum yeah okay so now we have the buttons right here and we can do buttons button last of type before so this is going to be the border in between them right here so this is going to select this button and set its before pseudo selector to this border then we're going to have to set position:relative on the button as well since it's going to be an absolute positioning of that border cool so that's the border between the buttons really nice so the next thing is to add the deletes or remove icon and the complete icon as well but first we're going to add a class of the move and a class of complete so we know which button we're clicking on later on and we can add some styles to the list items text as well so font size 14 yeah full-size font weight 4 500 color of 4 area then the line height to be maybe 22 and that means that we need to have comma date for that kind of padding yeah sorry I just I was thinking about something an improvement but 50 minus 22 is 28 divided by 2 is 14 so 14 pixels nice and we can add 14 pixels at the end as well just because we want to so that means if we resize this down it's going to break like that and we can set the min height to be 50 rather so now it's going to accommodate with a height as well nice so that's the text we need to add the icons which is going to be a little different okay so we're going to have the remove icon first now we still have icon right here so let's open it up oh yeah that's that's quite a lot more s e-g code but all of these are going to have the same filled so we can paste in the same feel like class for them all these all don't need the same group really but let's just leave it as is because I talked really I don't feel like caring about that right now and we have a rectangle and that's basically making that 22 by 22 because both icons are going to be 22 pixels by 22 pixels and that's just going to make it easier for its decisive so that's that just know fill and set it up and be top hair no Phil Phil none nice so in these buttons I'm going to have an SVG and that's going to be the width of 22 by narrator 22 position it absolute top with the 15 origin minus 11 minus 11 sorry for being so super fast but I only have so much time for this so I'm going to do it as quick as possible but not stress through it so complete only has to before up correct so sorry jumping between these let's grab SVG code remove the style first describe the SVG code and to save some time let's go to Bill TT and unify our our SVG so the remove we have this we can remove the ID well I forgot the ID sibling max okay so that's the remove icon and in botanist VG Phil and they button that has the classic remove the fill is going to be this hazy faded out green nice there it is but if we hover on it hover on this actual button you want the fill to change to red right here nice cool also lets add hmm I just realized something that's crap okay yeah sorry I was just thinking that maybe we should do the buttons the same height and widths the SVG just to make sure that the click happens on the icon but that's just not go into that kind of detail work right now just such a perfectionist okay so the fill class we want to add a transition of fill 0.2 seconds maybe much better mm-hmm and cursor:pointer nice so that's the remove icon next we need to create the complete icon that's going to be a little different they've done icon we have a rectangle right there and yeah sorry no it doesn't matter no fill and then of course the fill class moving this and copying this fixed thing it's your living ID actually let's use your OPV again saving some time removing the ID right there cool so the complete class is going to have the fill of green color this code yeah that's the same okay so that's the thing that I was thinking about is that if the button is complete as the class of complete rather SVG should have the border radius on 11 pixels and a border of wasn't ah man I really don't like folk numbers as border woods let's try it out and see what happens yeah it works out yeah it does interesting all right yeah sure yeah cool so the only thing left is to add a class of completed or rather we could do what should we do we should do we should do should we do the ID maybe or we should have a class instead let's do ID instead because that way we could select the lists and append yeah let's do ID so if the ID is completed we want the this complete button to be different so you will to do the ID of completed li buttons bun complete SVG should have order we could just set the background actually be the same well let's say border:0 pixels no reason to have water and add the fill to be whites nothing happened yay what did i do from completed complete dead spelling error yes cool awesome so if we remove the ID it's going to be yes awesome really awesome really awesome cool okay so let's just add a hover state for it I don't know that really going to work the transition as well aha what what aha sorry yeah ron's thank long section okay yeah that works that works definitely work yeah okay cool so now we have the hover so these will remove an hour so nice we can start adding stuff to the list now we need to comment this one out and then we can uncomment this that's at the idea to do just because okay cool so if value exists let's jump back into JavaScript here if the value not really exists but if the value is not empty we want to add it to the to-do list so let's create a function add item to all we'll add item to do add item which is the value if value run the function add item to do value just to make sure the works want to item blue yes cool so right here we're going to have to create all these HTML so to create an element to add to the Dom you can either do it via inner HTML but that's not very efficient in the processing because you add if you add a huge huge amount of HTML the inner HTML method is going to be very very unstable and chug up a lot of a lot of memory on your computer or in the browser rather so it's going to be a lot harder for especially mobile devices to render out so either way let's create the element or item well let's change this from item to text instead item equals document creates element that's going to be an AI so this defines the HTML tag or the HTML elements and the tag name the item doesn't need any content all in this item we're going to set this inner HTML to be text that's the one thing you can set inner HTML or inner text for example to this let's do in your text actually because inner HTML is going to be able to add HTML to the to the item right here but if you want the the text to be escaped you need to do inner text okay cool so inside of this we also need to create a bar buttons equals document create element buttons now and buttons a div with ones needs to add class let's add the buttons class to that then we need to move equals document create element a button and the button the move needs to have the class I'll remove this well let's do the same thing for add I think those were add and remove actually complete sorry I've had nice then we need to grab the SVG's let's set a variable for that remove SVG equals this and then our add or complete SVG equals and then the string nice remove and complete icon SVG format nice adds a new item to be to do list cool so in the remove we want to just set inner in this case we're going to set the inner HTML actually to be remove SVG and the same thing for completes inner HTML equals completes ICG nice so then we also have to append child and click on the app remove and then complete and then after we added the buttons we need to do item dot append child buttons not as a string as the actual variable and also we want to grab the list that we want to add them to and that's the to do so var list equals document create element no not create element get element by ID to do and in the to do we want to and the child of item now this can be interesting if this works yes nice awesome so it works great job guys it works great so now you can add items a lot of items the interesting part though is if we were to write out you can see that this actually ends up on the bottom but want to add it to the top of everything let's do a quick google creep and child javascript aha yeah so insert before okay cool that makes sense insert before this item into the list child nodes 0 so insert this before the first item in the child nodes of the list basically hello world yes cool awesome so the last thing we want to do is reset the value great awesome guys if you've come this far and everything works great job it's truly awesome so now you have a basic to-do list you can you can't really complete them or remove them but you can add them that's something that's really cool so let's check out the design sketch you can see that we have the items that have been done we should really add this border right here but that should be only visible if this list has any items at all so let's take care of that but first off we could remove this and now we want to be able to remove items as well from the list so if we want to click this we want to add we want to completely remove them from the to-do list and we can do that simply by grabbing the remove by the remove button right here and adding a add click event for removing okay so remove add eventlistener click remove item so we create a function to handle that in this case it's a great idea to lift out that kind of functionality because this is going to be replicated on each time you add an item and it's kind of bloated to add a bunch of functions for clicks on completing and removing items inside of another function you could do that of course but I personally don't really like that way so I prefer this way so in the remove item we could get a event as well that's a parameter that's sent for each element that has a click or a focus or whatever event it is you get an event object that has a lot of properties about the event that happens so if we click on this you see it's a mouse event which has a lot of parameters which also contains a target but in this case it's an SOG so grabbing a target is not always the same this case is in SOG this case it's a button because I clicked on this and outside of s e-g so that way you can actually just grab this in this case and that's going to be the button always so that's the best way that way we don't need the events details so that's the button this not parent node we need to grab the list item the Li so that should be the parent node and the parent node again like that that's the list item so that's how we grab the list item and then we just do a document dot remove No oh no sorry document query selector body remove child no sorry I'm a bit tired huh get element by ID oh crap crap yeah okay yeah let's just do more parent equals this and we're going to have to grab the list as well so parent remove or rather bar item equals this and then item a pair node okay so then just to parent that remove child of item yes awesome not at all annoying max not a little all annoying either way really cool so now you can remove and add items do call so the next thing would be to complete items and they will do they would do basically the same thing they would remove them from one list and add them to another and click event for adding or completing items completing the item removing that item complete like them but you can actually complete them and uncomplete them in my case I think that's a bully not in my case but in in this design case you could uncomplete them complete them so we would have to do some toggle changes for that but either way so we have a function or complete item or I don't need cools this top-down node we can just do the same thing here so that's the item and then more parent equals item dot parent node and this is where things get a little interesting that's because the two lists have two different IDs so that's where we could grab and check if it's complete and or it's easy to do and then bar parents ID or actually ID like this camel case we could do a parent ID and then if let's just do ID is that if I D is equal to to do it's a to-do item to be completed else it's a completed item to be re done nice so well to be honest we could just do bar targets and you could do targets equals documents get element by ID in this case it's the completed list and in the other case it's the to-do list but this is really unnecessary we could just do if a an if statement within the declaration to do this by adding two parenthesis and doing if ID is equal to du question mark if that is true you say that it is this : which means otherwise it's to do that's the same code right there check if the item should be added to completed or we added sue to do nice so that's the target so the only thing we need to do is do parent remove child para target append child or actually insert before item target child nodes here this would be interesting huh nice it actually works like I'm surprised I'm seriously surprised that it worked the first time this is so awesome this is literally so freakin awesome so what's left is to grab the you will to do completed right there I'm just going to do 0.5 to make sure guess it works cool if it's not empty that means it doesn't contain any sorry it doesn't it does that means that if it doesn't contain any items don't apply this style when I pad apply this style right here that's a padding of yeah it should be 30 30 actually sorry about the design sketch error right there before with 150 pixels heights 1 pixel background what was it position:absolute also we need to set the content to nothing top 0 actually v 30 pixels left 50 margin:0 0 0 minus 75 pixels nice and then we need to set this padding to be 60 pixels top okay cool I don't think I need to do that but I'm just make sure nice really freaking cool man awesome this is really cool I mean it's super cool that's one thing that we need to do laughs maybe we should add a empty message now that's a bit overkill you guys can play around and do some other extra stuff for this to work out better this is awesome all right so I guess that's that's it guys we have successfully created a to-do list using javascript HTML and CSS like I said this all this code is going to be on a github repo I'm sorry I actually didn't say that so this code is going to be on a github repo repo where you can download and check it out for yourself unless you have coded it by watching this video yeah cool so thanks a lot for watching guys I really do appreciate it

Channel: Max Sandelin

Views: 350,859

Keywords: code, html, css, javascript, programming, development, to-do, list, app, web, web application, front-end, tutorial, how-to, learn to code

Id: 2wCpkOk2uCg

Length: 65min 44sec (3944 seconds)

Published: Tue Jun 28 2016