Creating a better todo app - the HTML and CSS

hi there my name is Kevin welcome to my channel where we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and in this week's video I'm doing something really exciting I'm building out a to-do list and we're gonna be styling up and making it look really really awesome but even more special is I'm not just styling this up and making it look cool I've gotten in touch with Kyle of web Deb simplified and he's going to actually make this thing work so in this video we're gonna be looking at how to do the HTML and the CSS and just make this thing look really really cool we're going to be doing a lot of really fun and cool things in this which is why the video is a little bit longer than I usually do so here is what we're gonna be building it is the stuff I need to do tasks list to-do lists little mini app here which is gonna be a 2d builder but we're not just doing the to-do itself we're also able to create extra lists so here I have two different lists you're going on so you can see I have I have one of my other jobs to do is create a new task let's go and do that um so if I come in here I can here is my new task and if I can push enter and it makes my new one or yet another task and I can also push this little plus symbol and it will make my new task and now this one's finished so I can click on that to scratch it off and say that it's done you'll also see it's keeping track of how many tasks we have to do so if I click that on or off it is has a little animation going on there to do that and I can come here and I can compare completed tasks or if the whole list is done or even if it's not I can delete an entire list you can also come here and let's say you have your work list and a groceries let's just do grocery list there like that and if I click on it it gets bold because it's active and then I need apples and a pineapple and some charcoal for my barbeque charcoal and so in this one we're moving the HTML and CSS and you want to see how to actually make it work you can go and check out Kyle's channel Kyle has a lot of really high-quality and awesome stuff also if you know if you're interested in what I do you'll definitely be interested in his type of content as well um he does a lot more JavaScript and functional stuff so I know I've just done my intersection observer videos here but if you're into JavaScript and a lot of you guys seem to be asking for more JavaScript content so if you really want to start getting into JavaScript and seeing some fun JavaScript stuff you can do I highly recommend checking his channel but he also does some really fine dish Mullen CSS stuff along the way as well so yeah link to that is in the description and the link to the next video is in there but before you go and click on that make sure you watch this one let's get into it alright it's time to write some HTML and I'm gonna try and do this as quickly as I can but the basic structure of it is pretty simple but there will be a timestamp down below that goes to my CSS just in case it does drag out a little bit cuz sometimes writing markup can take a little bit so what we pretty much want here is here's where we are but I'm gonna be using this as my reference as I'm creating it so I pretty much want a div for this and a separate div that's gonna be all of this over here so that's going to be my all tasks and I'm using Emmet right now so if I do dot all tasks and I push tab it will give me my d of like that if you don't have if you're using vs code you have Emmet already you can start using it out of the box if you don't aren't if you're not using vs code you can definitely get an extension for your editor and then you'll be all good so we're gonna have all tasks and I'm gonna have to do list so that is the basic structure very basic structure and now let's go into my all tasks and get this all set up it's relatively simple the most complicated part is our little create a form a little form down there but it's not that bad so the first thing we do is in h2 and I'm going to call this task list title that will just be my list and then we can come down and we want a ul because it's an unordered list that will just call task list because I think that's a nice simple one and then we need three list items one of these list items we're also going to give the class is active we'll call it active list so we know which one of these is the active and that's the bold that would be putting and can move around so let's do the same thing I have right now YouTube work and grocery there we go so save that let's come back over here just to make sure that it's working and we can see that we have a really basic list right there now I'm going to be still inside of my all tasks here and what we want is we want to be able to create this little input that's Kyle's going to take to make it take whatever we put in there and actually make a new list item motive so to do that it's gonna be pretty simple but we will need a form I don't know exactly what Kyle wants to do with this form so I'm just gonna leave it like that and inside my form here I'm going to put an input now this input will be a type text but what we also need is some other stuff on here and just to make it easier for you guys to read and I'm gonna come down and make it look like this just so it it's gonna be easier to follow we're gonna put a few different attributes on here so the type is text the class is going to be new I'm gonna do a new list like this and we'll see why after I normally use them for my naming convention but I'm just gonna be playing around with something a little bit different in this you'll you'll know if you're used to my videos you'll know this isn't usually how I name stuff but it's fun to experiment and try different naming conventions sometimes so we're gonna have my new list like that and then let's come down and save I want a placeholder on here so a placeholder is going to be a new list name obviously but the other thing that I also want on here is an area label because I'm putting an input in here and I'm not actually gonna be putting in a label which is best practice you should try and put in a label but in my design I didn't have it being a naughty designer um I want to come in here and at least have an area label because we want to keep it as accessible as possible so a screen reader will know what this the purpose of this input here is so my area label and on here we'll throw in a new new list name as well so it'll be the same as my placeholder in this case so I can save that and then the other thing we need on here is a button I'm in this class a button many of it to classes we're going to call it button and list as well um now you know this has the class of new end list and this is a class of button list that's all good and dandy because of how I'm gonna set this up again this is not a conventional way of doing naming but I wanted to experiment a little bit with this one as well so for this button I'm actually just going to put the plus symbol in there so we could also on here come in and put an area label of create new list like that so at least you know if somebody gets the plus symbol they might not know exactly what it's for even though visually it might let them know cool so that is all set up so if we come in look I mean it's not even that far off of what we have here so we're getting there so now that is there now we can actually come into our to-do list here and get this looking pretty good so you'll notice there's two parts to this and there's actually three we're gonna have our header at the top we're gonna have a div for our to-do lists and then we're gonna have this part at the bottom which is essentially the same thing that we just created here and we're gonna have two buttons that are dangling off the bottom of this so in here we can do my to-do header and in my to-do header we have two things we have a name and we have our tasks here so I'm going to do an h2 with a class of list title and for now let's just put YouTube so when we look at it after and we're styling it we have something to look at and then I'm gonna have a paragraph with a task count on there and for now that can be three tasks remaining so if we come back to here there we go I have my YouTube my three tasks remaining right there perfect doe so let's come down and keep going so actually where we can get out of my to-do header here and we want to come into the next part so in here I'm gonna make my to-do body because this is the main section and this is going to be one day of we're gonna have another part for that we're gonna have another part down here for my clear completed tasks and delete list so for that our three parts we can call the first one tasks we can call the second one it can be our new task creator and then the third one will be delete stuff because why not we know we're deleting not the best name I could probably get a little better with that I do think it is descriptive enough in a small little thing like this that we'll know what it's for and so in my tasks let's start with my tasks so we want to come inside of here and we're going to create a task so each individual task will be in a div because we're gonna be using flex a little bit and we have to position things within all of this and it gets a little bit interesting and this is where things do get a little bit interesting because if you've ever tried to style a check box you know you can't really get them to look like that so to be able to do that well first we still do want to have a check box on here so I'm going to do a input but it will be a check block and like before I'm actually gonna bring this down on to its own line just to make it a little bit easier for everybody to see what's going on so we have my type checkbox' and then inside of my we also want to give this an ID so ID will be task one and then we also want to have a label so label four will be obviously for a task one so if you're not sure what the point of a label is let's just say it's record to-do list video so if i come and look over here if you don't if say I don't have my four so if I just have a label like that and I come in click here nothing happens I have a checkbox that I have to click on there but if a label is set up and you have an ID and the four are at the same thing when you click on this it actually will check your check box and this is the same for any sort of input so if it's a checkbox a radio button anything like that maybe on desktop it's not the most important thing in the world even though it is a good practice but it is really useful to do this on mobile because you know you have fat fingers that sometimes it's hard to click in the little box so you can click anywhere and it will work you can also put an input inside a label but because of how I'm gonna be setting this up I think it might get in our way now to do the custom check box here we can't style this to be a circle and to give it the different colors and all of that so I'm actually going to create a span in here span class is equal to custom check box now normally I don't like having empty spans like this just for styling content I'm gonna do it now we could use a pseudo element for it but I think this is just gonna be a bit more evident I like having a class name on this to say exactly what it's for and what it's doing um and that's my task one so just for now we only have one thing here and so I am just gonna copy this whole thing tasks and also to make my life easier let's comment this closed task one and we can copy my whole task okay there we go so I've just come through and created three tasks here so we have my three tasks that all working I've set up manually for now the IDS and the four on this but I'm Kyle will make it so that automatically happens so you don't have to worry you know I'm just wanted to do it like this now for styling purposes to make sure that it looks good with more than one task in there because that could you could always style something up and it looks fine with one but then as you start adding more stuff it doesn't look so fantastic now we need to create recreate this here pretty much so actually what I'm going to do is I'm going to come up to where we created that where I have this form here I'm gonna copy that whole form and I'm gonna come and drop that form inside my new task creator over here like that the only thing is instead of having new list name so we can come list name list name here will be new task name and this on my area label create a new task and my button here will be button task so all of that will be changed my class is a little bit different on the button because you can see the colors of them are different and last but not least now we can come down here to my delete stuff and in here I need two buttons so it's just do button button button times two and on both of these buttons will give them a class of BTN and we'll just call it delete and in here we can say actually these aren't the same so we'll have clear completed tasks as my first button and my second button here will be delete list so if we come and look so everything is now in place and now it's time to start styling it and doing some fun stuff with it so let's jump over to my CSS file now you'll notice this is an S CSS file I'm gonna be writing regular CSS here it's just because of the way I have my build set up it automatically will compile my s CSS and update the browser when I'm working in a CSS file but there's nothing s CSS that will be going on in this video and so the very first thing I'm going to do is I'm actually gonna come here on my body and again if you haven't used custom properties you'll probably be able to follow along pretty easily but if you do want to watch the video on those that I have you can so here are my background color will be my VAR color primary so that's going to take the color that I had up there and it's going to set that as my background and then my color itself will be var color light all right so that's looking pretty good so the next thing we do is a display of grid and let's go and look at what I want this grid to look like and you could probably set this up with flexbox but the easiest way to do it would be to have a parent on here to just do a display flex and then you'd have to set widths on these or some flex basis and play around with stuff whereas I like grid because I find you write less code with it in general and putting it on the body what I'm going to do is one row here which will go all the way across and then my second row will be split up into a few different things so to do that I'm gonna be using the grid shorthand because it's the fastest way to do it again I'm this could all be on one line but I'm just gonna do it on multiple lines so you can see exactly what I'm doing and I'm gonna do something like this and I'll explain what this is so basically I'm saying this is my first row in my grid and if my row is gonna be split into four columns and all of those columns are going to be used for my header so I'm saying this the first row of my content will just be all used for my header like that and the height of that roll will be Auto which means just fit the content that's inside of it now my second row is going to be blank and you could do this usually you'll see demos really just put in one dot like this but I just like doing dots all the way across because it helps balance it out a little bit so you can really visualize what each column is the second column here will be lists because it's my main lists the next one will be my active because it's my active list and then the last one will be again blank so this here this empty space here and this empty space here are this and this these blank areas and once again the height can be auto so I've defined my two rows of content and now what I'm gonna do is a forward slash and now I can define what the columns are so I've said this is my row which would be made up of four headers or my header goes all the way across and then this is my next row which has my lists and my active now how big is each one of these columns as we look down at it so the first columnist we knew 1fr which is a fraction which is just pretty much used the available space it's one of my thing favorite things with grid and the other is min max min Max min Max and 1f are so the fr is just whatever available space whatever is leftover just throw into the two sides here and because they're both set up to be one they should be equal spacing min max lets you have a minimum maximum size on something my other one favorite another one of my favorite things with grid so I'm going to say the minimum here is 100 pixels and the maximum on here is 300 and on this one here I'm going to say the minimum is 250 pixels and the maximum is 500 pixels this isn't gonna be completely responsive I'm not gonna do it for mobile devices where they should probably stack one on top of each other you could always put this inside of a media query or something if you really wanted to push it to that level so if we look at what we have now it's looking like that but when I save this everything should get all screwy with because it doesn't know where to place these things on the grid and this is where the real magic of grid comes in so I had my title the I had my all all tasks and I had my to-do list so those were the three divs that the three like parent dams pretty much that we have on there my title is just my title so my title on this a grid area is header and when I save that you're gonna see right away it goes and takes up that whole top area my all tasks here so this is my list this is this part right on the left this one has a grid area of lists and then my to-do list here as a grid area of active because it's the active list so now when we check out what's happened in there now you can start seeing it is getting placed on the grid like I want and if we want to visualize the grid a little bit in Firefox if you're using Firefox you have the under layout once you have a grid you can either click and toggle it on and off here or you can come on the side here and toggle it off in the layout section so if I put that on you can now see it's broken it up now these numbers are all the numbers for my list let's change the color of this alright I think that's a bit easier to see I'm so we've header header header so you can see that my header is taking up all this space this is blank there's nothing in there because I use my dots here's my list my give box and then that other one there and because we did set that up with a min/max they will grow and shrink but they have maximum sizes on them so never get bigger than the 100 pixels and the sorry they'll never get bigger than 300 and 500 pixels respectively so if you are using grid strongly recommend that you do use Firefox as you're developing browser great so that is pretty much done for my body and how all that is set up now my header is looking pretty good but I do want it to look a little bit nicer so it's coming here on my title and set that up a little bit nicer so the text align we can just do a text align of Center on there font size let's make it bigger I'm gonna do a calc because I'm gonna use a viewport let's try 7 viewport width plus a like to REM so the two REM sets a minimum size on it it can never be smaller than that but it can definitely get bigger I think my font weight I actually want to be 900 instead of 700 there we go and I'm just going to do a color of rgba 0 0 0.1 I don't I want to be pretty light there's this one annoying thing if with a font is if it's overlapping and you do have lower opacity on it you'll see it overlaps and you see that let's just add a little bit of letter spacing of like 1 pixel there we go so that goes away so with this 7 viewport width if my screen gets bigger it will grow with my screen but if my screen gets smaller it will shrink but just using viewport units means if you're on a really small device that font can get a boob or small like insanely small so hey I wouldn't do this if it wasn't a really big title and be like so body text please don't do that um and if you are setting it up for a really big title this you probably be safe anyway but the by putting it in a calc you're sort of giving yourself some safety room or a safety net there to make sure the font size never gets too small that you can't read it from an accessibility point of view too small that you can't read it I did put this at super low opacity which makes it really hard to read but um anyway yeah um I do want it to be up higher on the screen too so let's do a margin on this of I don't know negative 0.5 M 0 and point 5m or something just to keep some space that's too much point too I sort of want yeah that's pretty good I want it almost stuck to the top maybe I could even be a point three there we go um so for my all tasks I don't think we have any extra styling we want to do in there it's just setting up everything we want it to be but so we can come down here and so let's set up our task list so for my task list itself let's see I'm gonna start with just the line height on here of like a 1.7 or something to space them out because they're really closely stuck together so just a visually space them button again this task list is the UL itself here so you could go onto the l eyes and use margins on those but yeah and save having to also style the li is this will work and even if it ends up being multiple lines I don't think it would be too too bad I'm also gonna play with the padding a little bit because I find it's sticking out I don't really like where its position and the font size could be smaller because this is a little bit less important that we're doing over here so the font size on here let's switch that down font size like 1.2 r m if you just so we know on the body itself I have put a font size of 1.5 m and so the font size will be a little bit smaller for my task list here if you're not sure why I'm using R M sometimes and I'm using M s for other things like my margin here I do have two videos actually where I explore that so you can always check those there'll be a link to those in the description below so there that will look a little bit nicer now the bullet I find is kind of too much so let's change the list style to list style to circle in serve Cole I always fell circle wrong it's weird just to make it I want to still have that it's a bullet list I don't feel like custom you know we could put in a custom image or something but I think that works just fine and we want our active list to be a font weight of 700 so it'll be a bold and stand out a little bit more I'm not doing 900 which I also had that's what I'm using up here just because it's so bold and it's a smaller font size it could actually make it a little bit harder to read if you do have a really bold font size on text try also increasing the letter spacing just by like one pixel it will make it easier to read because sometimes what happens with this really bold text on small font sizes they start getting stuck together a little bit because you know even in this II like the shapes and things start disappearing a little bit so it just helps raise readability and I think I'd mentioned I want to change the spacing a little so the padding laughs let's try the one point one let me go to move it over sort of lines everything up instead of having that giant indent it just sort of cleans things up a little bit like that overall I think that is looking pretty good but now we want to style this and these are both going to sort of get styled at the same time because they almost have the same name I have this one as and this input is my new list and this one over here is my the new task so what I'm gonna do is all tasks tasks list so here I'm going to do when mi new so if something is just new which is both of these maybe should add a new input that name by itself is sort of bothering me a little bit but anyway we're gonna stick with it cuz it's what I decided on um the very first thing to do is background on these will be transparent just so the background on it disappears I'm gonna do a border of zero which will remove the border we're gonna add a border bottom back in so border bottom on these will be one pixel solid and I'm gonna put in current color and on the color here color will be inherit is that gonna work perfect so by default there they were just sticking with black so I'm inheriting this my white color here and then this border bottom is the current color is going to always be the color of the text so if the color here changes so if we just change this to pink that bottom changes along with it so that means when I change the colors here everything here should actually everything over here should change right away let's fix the font size I'm here so font size will be inherit like do that so it's gonna grab the same font size we had and that we were using everywhere else now one thing in Firefox here I'm not getting it but you get that blue glow and that blue glow as outline that's not going to show up pretty much even in chrome because because of the background we have here so I'm actually going to do something here that I wouldn't normally encourage but outline of none this is generally considered really bad practice because we want a visual indicator when something is clicked in because someone might be going by tab but when you tab in I know you get your little flashing icon but now this is selected so we want something it's a really obvious visual indicator and so what we're going to do which isn't the best thing to transition but I'm actually going to do a transition of border bottom and let's do 250 milliseconds on this and just say like an ease in and what we'll do is on my new focus so when it gains focus and so when somebody clicks inside of it the border bottom width will switch from one pixel to let's say three pixels so now if I click in there you can see it grows in size I'm actually going to make this like 150 milliseconds I want to be pretty fast there you go so it's just a little visual indicator that we are in there and the other thing I'm actually going to do as well is in my new focus place holder opacity is going to drop down opacity is going to become like point two it's already lowered but now you can see when I click in that it so we have two visual indicators coming now we have the the placeholders disappearing a bit and the underline is increasing to let people know that we are in there so cool that is good now one thing you might have also noticed is that what I've done in is I've put my button after my input just because it makes a lot more sense it you're creating a list you might go like my new list and then you might hit tab and then hit enter to create it whereas if my button is first if you're tabbing through you'd select your button first and then you'd select this second and that doesn't make much sense now visually I'd much rather have this here and set it up this way because I think visually it makes more sense but from a markup perspective it's broken if you set up the button first and the second and someone's tabbing through you're not functional so what I want to do is come on here if we look in this wearing my all tasks and then it's in my form so what I'm gonna do is I think it's all my forms actually because I have that one and I have this one I might cheat a little bit and just make all I'm gonna keep it close I'm gonna bring it up to here and say form is display flex and then what I can do is on my new here I can actually give this a order of two and it's going to switch them around because this is defaulting to one and that's going to the two so it's setting up the order of these a little bit better now another thing that's bothering me is the font size here is kind of small but this one is bigger so use the inherent font size on that so what I think I'm gonna leave that because it is working and if ever we had other tasks it would work as well but what I'm going to do this is my new I'm gonna do it after that so we had that is my new and it was list so my new list will be a font size of was at 1.2 I used I think so 1.2 to shrink that down a little bit I might even make that a little bit smaller 1.1 let's see what that looks like whoops I just realized both of them are getting smaller because I copied and pasted it before so that means when I did this create new where's my class new list this should be new tasks here not new list so that one should stay there we go that one's staying big but this one is nice and small perfect so let's go back to my CSS so that's looking up right let's go to my button now because my buttons need some serious work um I'm gonna keep my buttons here with my forum just because I think it I like doing that so it's BTN is so button should control what all of these are looking like we have some Universal styles and we'll have some individual styles on different ones so the first thing is my cursor should be a pointer on all of these to show that it's interactable font size and font weight I'm not sure I'm going to worry about background though let's set just a quick hint if you put background 0 instead of red any transparent it just sort of like it defaults it off so the same as border 0 zero we just want to get rid of a whole bunch of stuff that is on there as a default the color we can also inherit inherit so there we go the colors are working a bit better obviously these colors here will get changed over after the font size will have to be here at font size I'm going to start with one ram and see we might have to go bigger than that as well so maybe I'll just leave that off for the moment and because I think they'll get individualized a little bit more so this one here is my button list mid list button so what we want to do on that is obviously the font size on that one needs to be bigger let's try like a 1.5 Ram and the font weight needs two font weight I want to make it a lot more visually strong so we'll make it thick like that and let's just add a little margin on the right side of it of like 0.25 and just to nudge things over just like that cool and what I want to do is I want to make it when we hover on top of it just to add we have the cursor but let's make it a little bit more obvious that it is interactable so what we can say is my button I'm going to change this button list in a second but hover is opacity of like 0.7 so when we hover it drops the opacity now we could leave it like that or if you want you could come in and put a transition opacity of like 250 milliseconds ease in something like that so when we go we're just getting a nice little ease on that instead of it being super obvious so I think that's looking pretty good and it's looking pretty nice now the problem is both of these buttons are really really similar the main difference is the color of them but I have the color coming through as inherit so I think it's a button list I'm gonna put button which should we changed that to button create we're gonna call it a create button cuz it's a big plus sign so that means in both of these so my button lists them so button create and then I'm gonna come all the way down and this one would be button create as well so if we do that and then I saved my CSS file there we go they are both looking the same and been pretty good since we're doing the buttons I think I'll come back and do those once we've styled this because they'll be a little bit of work to do on that but this one's looking pretty good I can come I can do it hit enter it should work as it's in the form I should be able to click on that and it should work and all of that is done so now we can move on to my main tasks here and the fun part of creating the custom checkbox alright so let's go and look back at my markup on how we did this so right here we had my input which is this here and we had the input which is my check box which actually want to hide because then I am I label my label is the text but we want to use a custom checkbox on that oh so this is the fun part so let's come in and scroll all the way down we can come down to here and I have my to-do list so that's where we want to be and let's do a few things in here so we're in the right grid area let's give this a background of our was a color light and give it a color of our color dark whoops color dark and see what that looks like we're getting there I want to add some padding but I'm gonna be using similar padding over because this top part won't have anything but I'm gonna use it inside of there so I'm actually gonna create a spacer spacer - RAM - Ram and the reason I'm doing that in here is just to show you can create locally scoped custom properties instead of always having them up in the route every demo you ever see will always be up here but I do think there's uses for having ones if this is the only place I'm ever using this spacer unit I might as well just save it down here because it makes it easier for me to find makes it easier for me to know what they are so I don't think there's anything wrong with having locally scoped custom properties as well as globally scoped ones and I actually have an article up in CSS tricks and I'll link to that in the description below where I go into some use cases for having these locally scoped custom properties and the reason I'm saying that is cuz now so now what I can do is on my to do header I can come and give this a background of let's just do a for I didn't create anything for this but in a nice light gray since we're on a white background and obviously my I think I called it a list title I should have been to do title but it made more sense margin of zero on there just so we have that but what I can do now is here I can do my padding is VAR spacer and you might be going okay that's let's just do was it task task count margin of zero as well and then I had my to do body so where the spacer comes in handy now is on this I can also do a padding of our spacer and so I know this space here is the exact same space that I have here and all around and it's all equal spacing and if ever I wanted to change it I can change it in one place and look at that it's changing in both of them all at the same time so I know that everything is always lined up and is always working properly so there we go that's looking good I want my to do my task out here the font size font size must be what if we did like a one rim that looks alright I also I think we'll leave it like that that also means that my to do header should be display flex so that these go next to each other let's do in a line items center so they're lined up that way and let's do a space and let's do a justify content space between so they get spread out there we go fantastic so that should work out just fine this text align Center should mean if it's a really long title this will always just stay right in the middle so we should be fine with that the one thing I'll also add just in case ever you did have a long title and to prevent these from touching is you could definitely come through and do a margin right of like say 1m or something like that just to make sure you always have the gap whoops I put that on the wrong spot that should be on my title so I guess we do 0 1 Ram 0 0 there we go so it just make sure there's always a bit of a gap here and nothing is touching so that's looking good these actually went and sorry I'm coming back to this side I just realized these don't really look like they're interactable right now and they so let's come back and fix those um so yeah to make those interactive I'm going to come over to my index here and let's come back up to those because here we had the allies I'm actually gonna come and give them all a class just to make it a bit easier inside of my markup so it'll be list name do I think that's makes sense so might have my list name on all of them and then this is still my active list that we have there and the reason I want to do that that's my list title let's go up a little bit to do list new new new new task list so my task list in here let's add in list name so we can have a curse or curse or a pointer so the advantage there is it does now look a bit more interactive and I think what we'll also do is my list name hover will be opacity of 0.7 or something like that just so when we you know there's a little bit of interaction going through on those so it you know we can see what we're what we're hovering on I think that'll make it a little bit easier so that's that's a little fix just there sorry about that we can come back to this side now all right so here are we're in my to do body so what I'm gonna do is actually I never gave my checkboxes a class on them if we look do to do I just have my input type checkbox' what I'm gonna do instead of giving them is I'm just going to say anything that has a type of check box we don't actually want to see it so we're gonna say an opacity of zero to hide it and I'm also going to give it a position of absolute so it disappears so by doing the position of absolute it takes it out of the flow of the document so we don't see them anymore the opacity or it takes them out of the flow so you can see everything moved over and the opacity of zero so we don't see them anymore there are other ways of hiding checkboxes but they're still tab labeled this way if we put a display of none they're pretty much gone it's like they don't exist whereas now I can actually still tab through and select them and toggle them which is useful if you want to keep that sort of functionality going so they sort of disappeared so that means what we want do now is come in and create our custom checkbox but let's come and do our custom checkbox and start making some stuff in here so the first thing we're going to do is make this a display:inline-block so we can actually see it and then let's give it a width of I don't know point 7 5 M a height of 0.75 m and actually this is a good time to do another let's call it size can be 0.75 M just because then if I got my size wrong bar is size if I got my size wrong I can change it in one place and I do both at once and that's always a nice thing to do curse or can be pointer and let's give these I guess a border border of two pixels solid current color so we can actually see them there we go border radius of 50% so we have our circle there we go so we're sort of getting somewhere with it the other thing here is I'm gonna do my task label so this is the label if you remember it let's go look at my markup here I have a task and then inside of this task I have my input which is my check box which is now vanished and then we have the label itself and my label itself has the span and it has the the text in there so the reason I want to come in here is actually want to do a display of flex on these and then I can do in a line items center so it should line things up a little bit nicer I think what we'll also add here let's do a margin left margin right margin right of of our size so we can add our the space that we want on that and the other thing I want this little let's go back to the finished version we want these little grey lines that are gonna be coming through on that so let's add those in because that is on my label here so we want my task label but then on this we can put in our or we can put in an after so on that I'm gonna do if you don't know what pseudo elements like to have a video on that as well I have done lots of videos position:absolute which also means this should be pulls this relative so if you're not sure positioning a video on that holy moly I've covered a lot of stuff over these days okay cool I'm position:absolute let's give it a right of zero a left of zero a top I don't know yet let's just give it a height of like two pixels and see what we have I needs a background to your right background can be current color so we can see it it should be a black line there we go so my top let's say top what if I did top a to bottom bottom zero and that's good but we want to move it down so let's say a negative 50% jiù jiù jiù that could work but that just means these will have to do a margin bottom of let's start with 2m and see what happens bit too big 1.5 all right there we go so that is a looking at not too bad but I don't want them to be the current colors making it really really really standout so I'm going to also come in here and just give this an opacity of like point one and I'm gonna drop this height down to one there you go that looks pretty good now what we want to be able to do is actually we're gonna hover on these right so let's come back to our custom checkbox and what we want this to like hover like we come here anywhere we go we want that to actually grow so on my custom check box let's give this a transform scale of 1 so we want it to be the normal size but we'll transition that transition transform over like 200 milliseconds ease in out and then what we want is when we have our task so the whole task anything inside of our task when we hover however we want the custom check box transform scale 1.1 we don't want to grow a lot but now when we go on top did I set that up well there we go 1.2 it's growing enough so now it should be any time we go on a task so when we hover on top of any of them so we hover anywhere on the parent so let's go but look here again any time I hover on this parent anything in it it will highlight the whole thing because I want to say that anything here is clickable I don't want only these to be considered clickable I want anything here so that's sort of just this like visual clue that anything I'm coming on to is clickable awesome so actually I put the cursor on that maybe we'll change the cursor for the entire list item and or the whole task and give it the cursor just to say that this whole area is clickable now another thing the another time so that is good we want that to be able to grow like that and you know what I'm actually gonna change the color of this - let's do color becomes VAR primary so it's really like it's also gonna become blue at the same time now the I don't only want this to happen here there's another time I want this to happen is when we go on one of our original check boxes so I'm gonna say when we have our type check box is focused so when we focus on the check box the I'm gonna have to think here for a second the label that is a so the plus combinator here is saying a label that is next to the check box so it that's the the sibling of so we have my input so the label that comes directly after it our custom check box that's inside of that so we have our label and then our custom check box check box that's inside of that so now if I hover on top you can see that it's actually doing it but if I tab through it's also going through and doing it I'll shift tab to go backwards through there so you can see the tab or the hover are both doing the same the same type of thing so that's pretty cool and because I can actually click on this and it's checked that box off so when I push or it's selected you know when I click on this because my label is set up so because my label here has before this that checkbox has become active so now if I start tabbing or reverse tabbing it is going through those and it's highlighting what we want it to so that's really really cool but now we also want to do something very very similar so let's copy all that and bring it down here but I don't want focus I want it when we gain when it's checked so if it if our checkbox actually gets checked we want to do something to our custom checkbox that we've created here we want it to get like that blue thing in there right so let's first start off by doing just a background on here of our color primary so now if I click on that you can i there we go you can see I've already clicked in a few of them so what's happening is when we click in it the its filling up with blue the problem is the border on there so let's fix the border border will be also of our color primary so the whole thing fills in like that so if you like that and you just want to leave it like that so it's staying big when I click it sting big because it's also selected right so we're also focusing but as soon as I move off to something else it's losing that focus so if you'd like just that bullet point like that you can keep it but I find it it's not super clear so the way we can fix this and this is interesting is you use a box shadow so I'm sure you've used box shadows before so if you do it as let's just say we do 0 0 10 pixels so we have a blur on there to be blocked by default but we can actually do is do an inset shadow so inset so the shadow is coming on to the inside of it so you can see it actually made that a lot darker so let's just make it 2 pixels maybe instead but what if we make this white and then that white is sort of coming in on the inside of the border a little bit so if I'm gonna make this a little bit bigger but I don't want a blur actually if we have a blur it does make it super obvious so if we do actually let's move it back to you here it's defaulting to black so you can see it now right now I have a blur of 10 pixels on there but if I add in another 10 here what it's doing is it's adding a spread so it's saying don't start blurring until you've gotten past 10 pixels and then start the this blur it's interesting that the color of it changes so what I'm actually going to do is what if we do that is zero you sort of get this secondary border on it so that's kind of cool right you get a second border almost for free but what I'm gonna do here is I'm going to change this instead of being like that let's make it a bit smaller so let's try like three pixels so we get a secondary border but I'm gonna do insect at the beginning here and what that's going to do is it's actually to pull that to the inside instead of the outside so what we can do is instead of just using black it looks weird I'm gonna make it white oh I should have made this border color and not border border color so we can keep our border there we go so actually and maybe this should be two instead of three you can play with the size and what you want it to be so now we should be able to click and when we click on and off it looks like it's sort of toggling that and then when we come off the size of it changes there we go it's working like a charm super cool right so it's this custom checkbox that is actually checking the real checkbox our real checkbox is in the background it's when it and we know it's working because this is only getting this custom styling on it when the real checkbox is checked so for a hundred percent it's working now another thing that we want to do is we want that like cross out animation thing going on so for that we do need to do a few different things on this one so what we're going to do is once again whenever I'm gonna grab this our friend here and let's just start with our label and the opacity on this can drop to like a point five or something like that because that'd be a nice visual clue that we've sort of finished with that so we could leave it like that but I sort of like this like we're gonna cross it off at the same time so it not only is that happening but it's being crossed off and so I want to actually use a custom pseudo element on this and might remember we already set one up and I just realized when I created this I made a bit of a mistake because I put this on there and we could create a second one but the problem is it's always gonna cross off too much because it's gonna be stretching this whole thing so I actually think I'm gonna take this bottom and then change this bottom to a zero and I'm gonna put this after directly on the task itself which actually makes a bit more sense anyway which does mean on here I just wanna have a task of poles ition left hip sorry about this so we get those lines that are coming back in and the bottom I guess can still be what I actually had it at which was negative 0.5 M there we go okay so that can stay the same so I'm just putting my position:relative on here and then my task of the the pseudo-element I'm just switching it to be on task itself instead of being on the label because what I want to do is on the tasks label I'm gonna bring it down here for a very specific reason so task label after so once again we do need our content of that we need a position:absolute I'm gonna do a left of 0 and a right of 0 we're going to give it a height of say 3 pixels to start with and a background of current color so we can actually see it there we go so that's our cross off now I don't want it to go all the way to the side here I actually want to stop but I want to stop according to the length of the text itself and that can be tricky but what it means I'm actually gonna do which is something I almost never ever ever do but where I did my label here and I did display flex flex by default is going to be a hundred percent width but we actually have flex in line in line which I almost never use is one of the only times I've ever used this but it means it sort of becomes an inline element which um which will work great but it also who is sort of breaking things a little bit because I can't give it a margin bottom now so we can give that directly and just move that over to here there we go we've spaced things back out super so by doing the inline on this we you can see the line is actually keeping to the right length we just want to position things a little better so left is good right is good closest to a top of 50 percent there we go pretty much all right my height is three pixels so if you really wanted to be perfect here we could do a calc of 50 percent minus 1.5 pixels or you plus there we go - that should work now one problem is this side is actually pretty good but on the left side it's completely completely completely off right like we want this to line up over here so I want to put my left and I actually want my left to be let's just try to M and M might work actually we'll go with 1.5 and there we go so there it's lining up where we need it to cool the only problems we don't always want to see this right so what I'm actually going to do is now put in a transform scale I actually I only want to do a scale X of 0 and what we want now is we're gonna grab all of this again and this is why I kept this down here checked my label after so we just have to come and change this note to it transform scale X of 1 and it's there so when I click you can see it goes through and it crosses it off which is awesome but the problem is we want to animate that so what we can do is do here we can do a trance transition of transform let's say 300 milliseconds ease in out and let's check it out now so it's working it's crossing the note actually this is gonna be a lot faster let's do it like 150 so it is crossing it out but it's crossing it from the middle so we can do a transform origin and say left and now it's gonna shoot from the left but then when we go that way it's gonna go back to where it came from and it's a lot cooler when it goes this way and then it shoots the other way so for that what we want to do is put a right on here and put the left on this side left so when I click it goes that way and when I click off it scratches off the other direction so I think that looks a little bit more fun to do it that way like that so there we go you can see that is working fantastically and it looks really really good cool cool everything is looking fantastic the two things we want to fix are these two bring them underneath here and there's this problem that's coming up here and I don't know why that alignment is off because it should be lining up properly so I'm gonna do an inspect on this to find out what it is and um let's see what might be causing that space why do I have a margin bottom on there doo doo doo doo margin oh this is where my students here this is coming from a task and that's because these are tasks and I called that new task if we look back at the mark-up so each one of these divs was a task but then I was getting smart with my class names and I said I don't usually name stuff like this and you can see it has run into a bit of a problem because of that duty do that was silly of me um but I do want to keep a lot of the other properties that happen to be on there so I'm just I think it's not really the way I like to work and again I don't think I would use this naming convention in the real world but I do know I up higher or was it I did my new list so here I'm just going to do a new task and we'll do a margin bottom of zero that there we go that fixed that and what we're here I'd sort of want this button to be a different color so that one was that's my new task button create hmm these are both button create and I used the color inherit to get it so this is where we could use a second another class name create task type of thing or but that would cause more problems because when we give it the task name again if I'm sticking with this bit of a strange naming convention I could also say inside of my new creator which I don't think I had anywhere so we're drew I'm gonna bring that all of this stuff is in mine a custom checkbox task task to do we're all inside of here so was it task a new task creator or no that's not right anyway I'll move this in a second so if I had my new task creator and then my create whoops great I could do color is var color primary and I get the blue color on there instead I just think it stands out a little more and makes it a bit more obvious what that is for now these two down here we're almost done we're almost done there's a longer video than I anticipated but that's alright I think it's a fun one where we did lots of stuff you can learn from so it's all worth it delete stuff is what we had called that nice name and let's do a display of flecks on there and the reason I want to do this is so I can do a just defy content I could do a space between which you tend to seen see a lot so that would spread them all the way to one side and the other though which I don't really want to do usually see space around but there's also a space evenly which I think has pretty good spousal support now and that fixes the problem that space around had because what space around us is it makes this space equal to like it's a gap here here here and here but see if this is a really long one and this is a really short one so it actually can make things on balanced where a space evenly will just balance things out a little better it doesn't it you know centers them within the space so some of the spaces might be bigger or smaller but that's all good and it ends up working I find a lot better than space around it does but the other thing I want to do is I'm gonna give this a position of app salute so I can move it a little bit we'll have to give it a width of 100% to fix that problem and a left of zero just to make sure it is starting on the left side properly not what I anticipated delete stuff so it delete stuff is inside what's the parent of stuff delete stuffs parent is my to do body so let's go back I think it's just my to do body we'll give this a position relative to keep there we go that looks a little better right I think so and then so what we're doing there when we do position:relative on that it were you know before it was being positioned according to the body or actually probably I guess the body or maybe even the grid areas that are on there or something like that not sure exactly but what I want to do is just make sure the parent here is what is positioning or what it's getting positioned absolutely inside of so that's why that fixes that problem you know we want to move it down so my top no not top bottom the reason you want to use top is if I did like a top zero or even whatever you're aiming always from here at the top of the body here which I don't want to be doing because that just makes it really hard to know how far to push it down so bottom and I don't want it to be zero because it'll be right there so we can do like a negative how much fifty pixels it's probably a bit too much 25mm thirty five and it should be nice and perfect um let's see into the color in here color is var color light and it's a little too in-your-face can I change the font way down here is they're not gonna wear front weight seven hundred I didn't think so because those are my buttons that are inside of there and what did we call those buttons button delete that makes it a little easier so I'll move this up in a second button delete I'll move that up and with all my other buttons in a minute but let's just say font weight is 700 cuz it's in letter spacing we'll try one pixel and let's see what that looks like or it's inch yeah we'll do an opacity opacity of like 0.8 0.7 and make the font size a little bigger font size of like one point but what if I just did one R mu and I'm actually going to take off these two maybe and go back I think I'm gonna leave it like that but what I do want to do is also have my hover State for this so for that it's the only time we're gonna use one of the custom properties that I set up hover and we'll change the color to bar color warning so now it just it darkens the whole thing up and I guess if we really wanted to we could also do a transition color 200 milliseconds I'm not putting an ease on there we don't have to I don't remember it the default is I think it's an ease in by default so let's move this button up to be with the other buttons button button create button create hover so we can put it right here and a few little finishing touches I want to increase the padding a little here because it's really it's a little tight on that so that's my new new new new new task padding we can do this for both of them actually so let's just come up here a new task and my new list will get a padding of like 0.25 M and I think that'd just make it look a little bit nicer and I want the placeholder on here that's the focus I think or I could just do new silly me so let's just grab this will do here did I do padding no I never put any padding so let's put that padding there and we don't need it on that should be exactly the same it looks exactly the same good and then the borders good transition is good I'm just going to change the new placeholder um I'm gonna just do an opacity of like point 5 maybe as ever it already was I already was point five huh didn't know that if we brought that up seven I just want to see what it looks like that's a little too much maybe like a point three and then maybe it drops down to like a 0.15 so it's already kind of subtle this one I like this one might be a bit too late but I think it's okay we'll go up to a point four just to make it a little bit more obvious when it changes and make it a little easier to see as well I realized that contrast ratio is really low I'd get definitely got a warning on that so that is it for my part on this video make sure you check out Kyle's video to see how we can actually make this thing work because that's the real fun part of all of this right so yeah thank you very much for watching I really do hope you enjoyed it I hope you enjoy Kyle's video just as much the link for that is in the description below and massive thank you to my patrons for helping support everything I do here on my channel I wouldn't be able to do it without you guys if you're new here and you enjoyed this video whether you're coming from Kyle's channel or if you're just managed to find this on your own that's really awesome if you liked what you saw and you haven't yet subscribed please consider subscribing and until next week please don't forget to make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 49,273

Rating: 4.9461641 out of 5

Keywords: Kevin Powell, tutorial, html, css, todo, todo list, todo app, todo list app, pseudo-element, custom checkboxes, css custom checkbox, css grid, flexbox

Id: IhmSidOJSeE

Length: 63min 0sec (3780 seconds)

Published: Wed Jul 17 2019