Create a Calculator with HTML, CSS, and Vanilla JavaScript | The HTML & CSS

Key Takeaways

all right hi everybody and welcome i hope uh thank you for joining us this evening and you can see here i am here with a zelda if you don't know him he is is a bit of a javascript master and so he's uh coming to join us to build a live calculator uh here in uh yeah well we're gonna be building it right here you can see on my screen and uh yeah zell if you want to say anything as we get started on this before we get started welcome back joining us this evening and you can see here i am here with you i can hear you coming through on my end he's a bit of a javascript master and so he's uh coming to join us to build in one second i'll give a bit of a run down there just as zell fixes his audio um yeah i've one sec guy sorry i just muted you so don't worry i'll talk a little bit um so anyway here is uh just to let you know a little bit more about zelle he is uh the genius behind learn javascript which is a really in-depth javascript course and i know a lot of you guys are been talking to me about wanting to learn a little bit more javascript and dive into it so i thought who else then to join in this i've done zell's course um i joined it a long time ago now and uh really in depth and i can't say enough good things about it so i have put links to all of zel's stuff in the description below if anybody does want to check them out there's his blog there's the learn javascript link and a couple of other things in there as well and this is we are going to be building one of the components from here let's see if i can find it really quick calculate tour oops how to spell things right uh so you can see we are going to be building out the calculator whoops did i go too far anyway here's some of the there's the calculator we will be building out and you can see there's a bunch of other components that he does build out in his course right there so yeah so that's what we'll be focusing on for this one now in this part of the stream we're going to be just focusing on the html and css so it's sort of me who's going to be taking the lead for today and then we're going to come back on thursday at the same time and zell is going to go in and do the javascript magic stuff i'm just going to make it we're going to get it on the screen today and then it's going to actually become functional on the stream on thursday yep i see a few people in the chat i just want to say thank you guys for joining there's a lot of people in here so thank you very much for coming to hang with us a few people mentioning that they're not watching the debate tonight so yeah thank you for either putting it on the side or or what have you hopefully we're going to be more entertaining than what's going on there if you're joining us from the states i see people coming in from nigeria sweden so thank you guys so much for joining us in uh fuzzy weasel are we going to be looking at event bubbling 2 zell are we going to be taking a look at that at all we are going to look at event bubbling uh on thursday it's it's friday my time is not a little bit yes yeah the times are a little off yeah sir so yeah let's let's stick to the u.s time zone at this point so yeah we're gonna look at event bubbling and if you have any questions that i'm calling feel free to ask but that's on two days later not not today kevin is gonna work on the html and css only yeah awesome and i just have to figure out how the next scene so people can actually see my code um there we go okay let's transition that over and so some people are asking about the code so here we don't have much code yet we're starting off with a blank slate and a blank screen so in the html right now we have nothing going on at all really we just have a container and a div class of calculator where we're going to build everything out and if we come and take a look at the styles um just we have some stuff that is set up here already because it would be really boring to watch me make a whole bunch of custom properties here um and then we just have a little bit of basic stuff set up here um setting the font size body display flex just to get the calculator it's going to be right in the middle of the page and a box shadow that's on there so so far we have absolutely nothing and i see a question about it will it be recorded this is going to be recorded and you'll be able to watch it back later there's no problem at that whatsoever and so the very first thing we're going to do is just to build out the calculator itself which um we need obviously we have our div here of the calculator and actually i just realized that's okay i'm going to go there's two are actually if i jump back to here if we look here at the calculator working you can see that we have this area at the top which is going to be our display and then we have all the keys down here at the bottom so those are the first two things we're going to put together so i'm just going to do a div class of calculate to calculator display uh which is that black part at the top and then a calculator keys right there and nothing too complicated the display we can put the number zero in there for now and just like that you can see that it has come up so we know that everything is working if you have any questions by the way as we're going through this you can see zell is in the the chat so if you want to ask him anything as i'm going through in the chat he'll be keeping an eye on it and i'll be i'll try and keep my on in a bit but i'm going to be going through the code a little bit more than i will be looking at the the chat um so for the keys themselves we just we need to get a key for all of our operators up here at the top all the numbers and the equal the clear and all of that so for that we need them to be something that's going to be interactable with you know we have to click the buttons and actually make something happen on them so because there's something that someone's clicking on and we're getting you know an interactive behavior from it we're gonna make them all buttons so it'll be a button and we need a whole bunch of them so i am using emmett here it does make my life a little bit easier and i forgot how many we need i think it's like one two three four five six seven eight nine 10 11 12 13 14 15 16 17. so i can just do button times 17 and if i hit tab on my keyboard it gives me 17 of them if you're using vs code emmett is pre-installed on there so it does make your life a little bit easier and in here we just need to actually populate these so this might be a little bit boring but we're going to come through plus minus i need the times which i think we just need to do times like that um times true drew what else do we have the divide i have that off screen i'm just going to grab that i don't know what the short one is for that so we can put it in uh and then we just need a one so sorry this isn't the most exciting part but oops seven eight nine zero uh after the zero what do we need we need the dot and we need the clear except i think yeah that's fine uh zero the dot and here is just a c that we can bring in our ac um for our clear button and did i not do enough we need the equals button of equals on there like that i'll hit save and we have some stuff coming in i think you did uh uh greater than equals two rather than equal over there kevin oh where is that uh here oh yep did i i think we're okay yeah it's okay now okay super and i just i think i just wanted to jump in and say that um notice that we're using and times instead of the x uh character inside the button that's because of accessibility because if we do use x the screen reader will say x instead of like times that's an awesome point um so yeah he's just you know if i didn't you can do an x the other thing is like this it really looks like an x whereas you know see the difference there one of them looks like the times or you can do a lowercase but it's not going to look the same but the screen reader for accessibility purposes obviously we wanted to actually read out the right thing so like that we get everything in place that we need um so that is pretty much all we need on the html side it's not too complicated there where the fun does start is more with the css and what we want to do with the css um let's start just by coming in and we'll give a bit of styling calculate now it's a word i have trouble spelling calculator display and on this one we need it just to get that dark gray background so i'll start with that so we can see it so we'll give it a background color and we did set up the custom properties and nice thing with vs code actually if you just type double hyphen you can access all your custom properties right away sadly it doesn't do this in sas files but it does it in regular css so that makes it really easy to get what you're after and so color here too we can set it up so we can actually see it which we want it to be the lightest color that we have um actually my calculator itself do i want or we can put the width here width of 16.25 m just so we have i'll do a ram so we have a size on there and i'm wondering if i should i'm going to keep going but i feel like i oh i see someone just mentioning something in the chat did i skip ah that's why my buttons didn't work out i skipped one there we go thanks jody for mentioning that in the chat um so let's keep going here uh obviously we want it to look a little bit better so we'll add a bit of padding on there so in general with padding it's not always the case but in general if you do a little bit more on the left and the right than the top and the bottom it tends to look a little bit more balanced um so just a little bit less on there if it's a button you can even do like smaller amounts on the top and the bottom but if you want something to be balanced it generally needs to be a bit more on the left and the right uh we can do a text align on the right a line on the right like that because we want the text to be over there and font size should be bigger font size um there's different ways you can come up with font sizes um i am taking this from uh how zell had built it out for his app so when in there he was using a font scale so if any of you know about font scales um you can use calc in a really good way for that and just multiply by numbers and so we can do 1.2 times 1.2 um to get to the size we want so if you are using a font scale for something um the easiest way to do it like this would be you have your one rem then you're multiplying and multiplying if you wanted it another step up you do another 1.2 and then you'd get the next size up on your font scale it can end up being kind of long but you do need that multiplication over and over again to be following the scale like that so we can set that up right there and i think that's all we need on there cool so we'll keep on going did i do i need a width on the calculator itself or am i going to put that on the keys as well i just want to see how i set that up i have the display in the keys we'll come and put our display grid and we'll see what happens here um so i'm going to be using grid for the keys so calculator keys and for now i'm just going to put a background down here so we can see what we're working on and i'll take that off after but there's the area that has all my keys in it and then we have all the individual keys in there um so for this i do want to do a display of grid which should completely change what this looks like there we go so when we do display grid what's happening is it's automatically assuming we only have one column and then it's just automatically making rows for everything that's in there so there's no grid defined yet but everything is living within a grid cell already i see somebody mentioning that this isn't twitch yeah uh this is since we're since i'm doing a bit of a special live stream here with zel we decided to uh come over here on youtube uh so for today and the one on thursday we will be here on youtube and i'll be back over on twitch after that so if anybody does want to follow my live streams i am twice a week over on twitch but uh different hours this is kind of fun that uh me and zell got to do this at this hour because we're 12 hours apart so it's kind of hard to coordinate um but it does make it nice that a bit of a different crowd can come and visit than i usually have on my live streams yeah i think we are i think it's about 9 00 pm over there and it's 9 a.m over here right yeah um so we got display grid on there so with the grid then what we can do is our grid template columns so since um it has no columns yet but when we come in with our grid template columns um one of the the best things with it is just doing a repeat and how many columns do you want for um if you did four i could say like 100 pixels and then it's going to be each or i'll do it 200 pixels just so we can see it a bit better so now each one is 200 pixels so it's made a grid that has four columns each of 200 pixels uh but i mean that's not always the best thing to do setting a solid value like that um obviously it's not fantastic just like before though it is still making the rows automatically so it does four and then it just wraps the content around but for this we can just do an auto and that means it's automatically going to calculate how big each one should be so we don't you don't have to give it an actual size if you just want it to automatically make four columns that fit in the space that's provided um i think we want to oh sorry kevin my if it's on youtube do you like like sharing your your server with me because at this point but at this point i'm looking at you for the next like eight seconds and i have a bit of a there's a bit of a dissonance with what you're doing and what i'm saying on youtube and it's oh sorry about that i can't help you whoops i need to bop anything i completely forgot to share the server with you i apologize [Music] cool all right let's see now okay good sorry about that zepperoni you're here at 3am welcome make sure you get some sleep after this um now the other thing that i've done with the calculator now because we use the grid template columns or the grid display grid on here everything's lined up but the only problem is the buttons are all in the wrong place now we're starting with a one here and we're go you know we're going one to four or five we're going across that way a real calculator is set up like this where it's seven eight nine four five six one two three and a zero over here um and what we can do to do that one of the beauty one of the beautiful things about grid is grid template areas and i used to not use grid template areas too much i found the setup of it was a bit too long to do um but then the more i've been using grid the more i've fallen in love with grid template areas um and whoops and there's something i use if i'm using grid unless it's a really quick or simple grid i tend to use it um i am going to do four dots at the top and i'll explain that in a second i'll explain this whole thing in a second but we need seven eight nine and then i want my equal button the next one whoops i misspelled seven the next one after that will be a four five six and we want the equal as well and all i'm doing now is naming everything and i am in firefox we're going to be able to see this really well in just a second and then my zero decimal clear equal and i'll hit save on that and let's go and i'm just going to open my i'll do an inspect element and because i'm in firefox and i know grid is in a grid chrome has introduced a something i think a lot that can look at this but i haven't really been using it yet uh whoops wrong one so here container in my container i have my calculator and then here you can see it has grid so if i click on that it's actually whoops wrong it's actually going to show the it's going to show my grid showing up here and i can actually say display the area names so you can see it set up all those area names across there and one thing i also did here is on the top we just put dots so by putting those dots across the top it just means they're unnamed areas so that's why up here there's no name showing up because the dot is an unnamed area things can still use those cells but they're just don't those cells don't actually have a name on them so uh yeah that can be really useful i do use if you are using grid um i would suggest using firefox devtools just because it makes your life so much easier um if you're just if you don't set up grid template areas just seeing the line numbers um is a lifesaver so that can be really really useful uh in the long run and when you set up a grid template area like that one thing it does take now is a little bit of time to position the keys on there and i have no way of selecting them properly now so i'm just going to come on here and give these classes uh whoops i should just do one second i think there's a faster way to just move the cursor all the way down but i don't know the shortcut and actually zell i'm just going to ask you something really fast while i do this with grid template areas like right now i'm going to be using it to move things around and i know it can be really useful but there are some accessibility concerns obviously if you're using grid or even if you're using like flex and changing the order of things um there's always some worry so like in this case why why wouldn't we put just the number nine at the top like why would we order them this way and then switch it around with grid template areas well the thing with uh grid template areas and accessibility is if you put nine at the top and if you listen to a screen reader talk it talk the the things through screen readers usually go with the source order which means whatever order is in html and you'll hear like seven eight nine four five six one two three which is not exactly the way how we would envision like running numbers so let's say we go with one two three four five six seven eight nine or alternatively if you really wanna make it um uh how do i say it if you wanna make it really strict you can start with zero but i don't think that's uh that's needed because we're doing but we're dealing with calculators now and if people here one to nine in sequence they will probably understand anyway on the keyboard zero is all the way to the right anyway so it's kind of like a given thing on that one awesome thank you if you hold shift one second i just want to try something someone mentioned something oh shift alt there we go that's what i was i knew there was a shortcut to do that faster than what i did so if you hold shift alt in vs code you can just drag your cursor and place it at a whole bunch of places i was clicking for each one so alternatively what you can do is uh what i normally do is i will do like command d and then command d selects one item right and if you do command d again it's like more of the same item uh there you go so as i click command d you can see my cursor is being placed down yeah so you can select them all together and do whatever you want i'm i'm so not a vs code power user it's embarrassing for someone who uses it every day i'm not i'm it's yeah it's a little sad um so here we've set everything up so i have all my classes now so here just uh i'll do my i'll do it in order so this might again take a little bit but r1 and then i can say my grid template template area and area is one and as soon as i save that you can did i messed that up zero should be there one should be down there do i have to oh not template area grid area silly cabin so you can see the one is now moved down to here because i told that it has to live in that cell at the moment everything else has shifted around automatically just to fill the empty space so it goes oh well if the ones going down there the two can shift over to here so it does mean that i want to come through and do it for all of these so here i have my one my two can go to two and it moves down to there and we just have to keep going with that so for something like this it is whoops that should be a three for something like this it is a little bit tedious just because we're setting something up where it's all individual like this but normally uh it's a little bit you know if you're not building a calculator this can be a little bit faster uh if you're just worrying about layout if you do use if you use set you can use a for loop i think yes that's right your status loop would be very useful right now eight nine ten or nine zero zero and then i have my decimal clear and equal and i'll do the uh so nine decimal whoops clear and i won't do the equal one right away i'm just gonna hit save and you can see my equals sitting in the middle i guess i might have made a typo somewhere along the way uh or did i not do five oh i made a mistake there there we go um so my equals sitting right here um and we want it to stretch this whole size down so when i set up my grid template area you can see i did equal equal equal and if i open up my dev tools again and i put that on and you can see like equals running the whole way down the side here so and it's it's a bit hard to see but there's like here it's like really thick lines um showing that that it's like one cell this is one big cell now where it's it's we're spanning four rows by the way we've set this up so on that one if i come down and if my uh we do equal i'm having trouble spelling it's too late at night for me uh so if i have equal on both of those and i hit save i should have turned off my grid template areas [Music] let's just turn that off so we can see everything and now you can see that the equal one is actually stretching the whole size that we have there so that's really useful another really nice thing with grid is that we can do things like that um another thing that we want to do now is i'm just trying to think uh the color of that one should be different too actually so the color on that one should be my orange orange 400. you need oh background too yeah it is too late for me i'm not used to doing work and this should be a variable yeah bar there we go that looks a little bit better um do we have any other ones that are the orange no okay uh nope i think the the i think i didn't style the the plus minus times the bike thing a little bit differently but remember often what they look like uh so we'll do those really fast i have it off screen um [Music] let me just do a quick think here let's just try uh so is plus minus whoops minus times divide now this i'm making separate classes like i made all separate classes for this it would have you know if all of these are going to be styled the same and all of these are going to be styled the same it would probably make sense to have a single class um so you have the different classes that are separating them but here just do let's just do a background var color oh it's not color that's how i name my stuff um i think it was the gray one hundred or two hundred and the other ones are a bit lighter right those are like that yeah the operator buttons uh i think it's 100 100 yeah thank you um and the other one should be white yeah remember the hover and focus dates so for the this one here we could do a hover and a focus on that one for the equal start there uh so we want the hover and focus uh if ever you're doing a hover state where we you know as developers we're not out we're on our desktop usually and so we're always worrying about the hover states and not always focus states so it is important for accessibility reasons to always make sure you have the focus state in there as well just so there's a visual clue if somebody's using their keyboard to navigate something like this so there we go i think that's looking all right now we need some on here too i just want to look at the original one that we had that was lighter i'm wondering here i'm just going to run down on all these classes here whoops starting here on these ones i'm just going to put a number i know these two aren't numbers so we might change that after but just so i can style them all at the same time and even these ones i should probably put um operator i forgot this one operator just because like this is what they're minus do i have times divide there we go um so this is like the individual classes but here i can treat them all as one so here instead of having to select four classes i could just do my operator and sell it that way and then i could do the dot number background on those can be my gray 50 i think isn't it oh it's 0.50 i think it's a 0.50 or probably not even a background at all maybe it's white no remember all right let me just open up my code again there we go you disclosed it uh i think we had a color on there but that's all right i can leave it like that and then what we could do is come in and say that my number uh hover and the focus it was 100 for keeps for the 100 for operators as well so it's the same color gray 100 it's the same color in the end just let me check okay i think so um you can spell uh oh gray with an e whoops i was gonna say you could spell gray either way that's why i misspelled gray before that might be why it didn't work uh you can spell it either way if you're using the keyword i see lewis asking me what i'm using for the web server right now i'm just using vs codes it's an extension called live server i use it on for demos and stuff like that just because it's so easy it's one click it runs a local host so really really simple uh kevin it's uh 50 on the numbers and 100 on the cover perfect on the on the operators on hover is 200 for opera for all oh okay sorry say that again on the operators it's on operators is 100 normally 200 on hover perfect okay on the numbers it's nothing on hover but on focus it's 200 200 okay yeah and that's there and then these ones hover and whoops or whatever operator focus gray 200. so now you can see if i tab through we can see that it is working now it is going in that order because that's the order that it is in the dom so we can see that how it goes through but we can tab through and shift tab our way through the keyboard and see what we're highlighting as we go through there and there we go so that is set up now one thing there's a few more things to do here i think one thing i want to look at is also just really fast is setting up on the calculator itself um and i think zelda did this a little differently but i was playing with it um so on the calculator itself we had a border radius of 0.5 rem um so if i put a border radius i have 0.5 m on this it doesn't actually show up and the reason if i do that and can i it's not showing up because what's happening is the buttons right now i'm pretty sure actually i have before but overflow hidden there we go and now there now we can see the the border radius that's coming on there this can happen with things like buttons or with images where you might give a border radius on something and then you don't see it because the button itself has the square edge to it still so um it's the same as you know if you have an image that's too big for its parent you put in a really big image and you don't have a max width on it or something it spills out the side you can do whatever you want with the parent if the image is bigger it's going like that so it's the same idea here so if you have a border radius you can do that just to make sure that it respects the border radius everywhere all right um for the i see yeah we could have done that here i got a little bit messy uh because all of like here all of this is using setting up for the same color i could have all done this on one selector too uh whoops sorry since they're all switching over to the same color we can just clean up the css a little bit there and have it all focused on the same same one because there's no reason not to and i feel like i did something wrong because we're missing what do you think we're missing um i'm wondering if on i'm just thinking the buttons there i did i never styled the default state of the button that's why i was having a bit of trouble with the background color not coming through um but i think overall it's actually looking pretty good considering that and because of that though the one thing that was driving me nuts a little bit is you can see the border of like the default border of the buttons coming through which doesn't look so nice uh see we could say here now you could because this is an isolated calculator like there's nothing else on this page we could just do a button and just select them all but i do think it does make sense to say uh calculator keys and the buttons inside like if ever this was going to be brought out somewhere else you wouldn't necessarily want to style all the buttons the same way so a button the border of zero on there now this does create a problem well you might like that look but it's a little bit strange that everything is stuck together um so i do think we could come in with a really small grid gap of say two pixels and then you start getting it to show through so in this case the grid gap which is putting two pixels between every cell it just looks a little bit nicer than that default order that was coming on you also get a bit more consistency between your browsers with something like that we could also i mean on here we could put some padding and some other things on it but it's not that far off uh what the final output should be so i don't know if you're happy with that i think we're not too far off i think we can we can go ahead with whatever we wanted to go ahead with i guess yeah um i see someone mentioning cursor pointer the third column width is bugging me is the third oh it is a little y oh it's because of the ac okay we'll switch that we'll make a i'll make the switch on the fly here and just make it a c so they're all the same um what's your what's your opinion on using cursor pointer cursor pointer i do not have a strict opinion on it but i read that for buttons you should use the normal mouse pointer instead of the cursor pointer because the cursor pointer points to links and you want to emphasize that link but let's say for example if you go into safari or anywhere on your mac any button is still going to be the normal because not the normal mouse pointer which is why in this case i think i would prefer having the mouse pointer rather than a cursor pointer cool sounds good to me i think it's uh i've read that somewhere too i think we must have read the same article um and it's even like if you're coming up to here like you know um all these interactive elements in firefox that are buttons effectively um you can see that it's not changing to a mouse cursor or it's not changing to the pointer cursor i should say um so it's sort of what what zell's talking about there where um it's sort of a native for all operating systems not to do something like that so uh i i have i i mentioned it one of my videos and some people were very opinionated on the matter but i do think if you're coming on here and you're showing that there's a hover state like you know it is pretty clear that it can be clicked on and if somebody's coming through and you know we have um we have that coming through um kevin i think there's only one point that i would make at this point but so like if you if you move your mouse around the the one to nine the hover state shows up immediately and that's that's a bit disturbing because like you don't really expect the button to be clicked or nor highlighted for some reason that at least that's in my mind like having that harder state follow me around it's really disturbing it feels like i'm clicking the button but i'm not i see what you mean yeah so instead of just removing the harvard state and when you do a click on the active state then that's perfectly fine so if it was just a focus then so if you click it's gonna activate it so when we click on things it gets activated but if not we're just something like that i think it's called the active stage we have the active too yeah so the only if it's active uh it's a good question actually if i switch both these to active i just want to see what happens uh okay yeah so something like that so if i click it doesn't stay selected uh would you do it as an act if in that case it would probably make sense to also have operator focus as well though right because if somebody's not using their mouse they need to see what's actually selected um which would be oops i didn't do the number there we go so if we're keyboard navigating you can actually see where you're at but here it's just like that but if we click on we can see that it's being it's being activated oh actually if we do the focus and the active it's going to be similar to because it gains focus when i click on it right so it's going to stay highlighted it actually doesn't if you remove focus and you try clicking on it i i don't think if it's only active it won't so if we do that it'll flash if it's active it does if it's only focus it it doesn't so would you in this case would you maybe suggest a different focus state so just to make it clear if somebody is keyboard navigating well um i would not actually create a different focus state because if you do a keyboard navigating uh the blue outline should show up unless you decide to to remove it for some reason in that case then you need to create something else for it have you seen the new they changed it now on chrome eh it's a black box there's it's a black box now on chrome yeah i'm in firefox actually and that's the issue now and then firefox we can release in firefox is is a black box for sure it's a it's a dotted like started blackbox very obvious like i i i'm always a fan of creating my own outlines yeah let's see if i can oops i mean if you want to create one you can do one with box shadow mm-hmm but the problem is using block shadow for that would be you know you did an overflow hidden on the calculator right yeah so the buttons like zero the dot the decimal and c and probably equal when you have false shadow it doesn't show over it or you can do outlines it will be easier on the code itself as well right yeah i don't want to do cool so yeah can you see my screen now which screen are you talking about the i in the live stream uh i can see your screen but i can't see where your mouse is pointing because oh just you where my number where my number three is right now that's the new default uh focus state in um in chrome uh i should probably open this up in chrome as well yeah they switch they they change the the thing that's nice about the chrome one is it's it looks better than the glow used to but it's also um like it's black but if it's on a dark background it'll switch to white oh yeah it's it's uh the default focus stating chrome is actually okay i like it yeah i like it more than the old glowy wish thingy that this focus but not focus at the same time i think i was ranting about it in article and also in the talk yeah one of the issues with um and somebody mentioned in the chat that'd be cool to recreate it for firefox um focus and focus one of the issues with the uh they use it's an outline that's being used solid i'll just put black for now so we can see it uh one of the issues with it it looks i mean it's close enough now it's almost but by doing that we've actually oh you lost your view of zelda oh sorry about that guys there we go hi he's back i didn't realize sorry about that thank you for letting me know i had the live stream up there instead um the only thing that's really cool about the chrome one is it does have a like a border radius on it which is chrome just doing their chrome magic behind the scenes because we can't put a border radius on an outline uh and the other nice thing with it is as i mentioned it will switch base it's um it switches based on the background automatically so if you have a dark background it automatically makes the focus white um which we can't really do easily here i think there's some cool stuff you can do potentially with some other stuff but there's some sass stuff you could do if you know the background color already but yeah if you want to create like custom focus styles it's really not that hard i actually i had an article about it uh somewhere on my blog i'm just going to paste that article in the link in the chat so we do that i'm just going to check the chat out quickly i see tomo's saying it's the first time that they're seeing what grid is capable of doing so yeah grid is is wild it's insanely popular i'm really looking forward to in subgrid becomes a thing firefox supports it but no one else has jumped on it yet uh and i'm really really looking forward to when when firefox finally supports or anyone outside of firefox supports it but me too i'm waiting for subgrid so badly i do not want to install anything at all right i know i'm in the same thing i want to redo my homepage and i'm like i can't do it right now because i wait i want subgrid and i played around with it a bit and now even when i'm just using the regular grid i'm like nope this i can't do it now that i know it's what's going to be possible there was this one point where i had to fake subgrids just for the things i was trying to do but it wasn't exactly subjects upgrade and i even had to write an article about this specs upgrade that i created which says we inherited the the grid template columns or something it was really confident i don't do that now okay i think we are pretty much done with this right oh one one thing the the equal on hover or the equal on focus which one would it uh i did i've made it get darker uh we have it here do you want to oh just make it uh the active there as well active yeah perfect there we go cool and at least now when we click equal you really know you click the button and that that tactile sense that you get back from me is really important it's gonna get really irritating once you start trying to you know click around the calculator on on the next live stream like on thursday and it it's stuck on the focus that you'll be like what yeah i tried that trust me on that so yeah i believe you yeah [Laughter] i had so much pain creating this one yeah awesome so yeah for today guys we're i guess going to be wrapping it up here um just really quick again if you don't know or haven't been following zell i'd really recommend that you do especially if you want to step up your javascript stuff he is as i said a bit of a wizard for it but also a really good teacher um one of the he changed a bit of a bit he changed a lot of how i approached javascript um and what i really appreciated about his teaching was it goes a lot into the mindset it's not just like hear some code and follow this um he goes into the mindset of thinking properly for you know writing javascript and he it's all about actually making stuff it's there's no like fizz buzzes going on or anything like that um which for me really clicked and so if you are looking at that um his course is closed right now but you can sign up so you'll get notified and i also put there's a java the js roadmap that i link down below um that is i think that's opened right now if anyone wants to sign up for it so the gs roadmap is simply a email course where i walk you through how to not be so overwhelmed with this whole javascript thing because javascript is so big right and many people feel overwhelmed when they look at oh my god what's the whole ecosystem do i have to learn what pack do i have to learn react to have to learn view and all that stuff when you're starting out with javascript so in that roadmap i guide you through the different mindsets that you can approach javascript and how many people are just going like they're just overloading themselves like if you learn react or view without having a javascript background you're trying to drive an f1 car without actually having a driver's license because you don't even know the basics of like okay what's the steering wheel going to do what how when i step on the accelerator what's what is it going to do that that kind of stuff so if you are confused or overwhelmed with javascript you do want to take your time in learning the basics and in there i created different stages and and i created uh i created steps for you to follow link out the articles that you want to you may want to read and i also linked up to some of the very basic articles that i put out on my blog as well like what is a variable what's a function if you're confused with that you can check that out as well and i think the most valuable thing i would say in that roadmap is in each phase of the growing up in javascript land as i call it i do give you a series of questions for you to check your own understanding and yeah if you can answer all the questions move on move on something like that yeah awesome thank you and if any i i mean i'm assuming if people are here they already they know me but if you don't know i am working on a course as well uh it's not out yet but it's the css demystified so i'll be diving into css it should be out within a month of now ish but you can sign up here on the page uh if you want to follow along or line up learn more about it so that's css demystified i don't know if i put that the links to all of zell's stuff are in the description of the video and if you want css demystified you can learn more there about it where um i go into i will be learning about how to start writing it with more confidence a little bit like what zelda did actually with the js road map where we're sort of breaking down more the thought process and thinking rather than like here's how to use flexbox um you know here's the different properties and all that it's a bit uh we're sort of rethinking things a little bit in there on how to approach thinking about css in a lot of in a lot of ways so it should be a lot of fun and i'm working hard on that as we speak or uh so yeah it should be within a month i think and yeah thank you everybody who has been hanging out here i hope you enjoyed this um [Music] i see deb morton to our live thanks for hanging out i didn't see you in here earlier thanks for coming uh solomon thank you for being here jody brooks looking forward to thursday i'm looking forward to seeing all of you guys too uh do you want to talk just a little bit about what you know uh we're not just doing some basic functionality we're gonna be doing a little bit more on thursday with the javascript oh yeah we're gonna be doing something cool like for thursday for javascript we'll be doing the basic functionality like what we'll be doing okay example we have one plus one equals and how you how does it show up on a calculator and that would be what i call the happy path or what people call the happy path like the basic the most basic way to get it started and then we're gonna do some testing on the calculator but you know like people tend to use test runners when you start writing tests but for the calculator if you do not test it is going to be really really painful because i know when i when i called it many times before and i re i got frustrated at the point where i we started and rebuild the calculator and add a test to it the really cool thing is we you do not need to use test runners like moca or jest or anything like that to even start testing uh front-end stuff what we're gonna do is use console assert which is what many people don't really think about so that's something we can try i think it will be cool and look forward to seeing on thursday and if time permits i don't know how long we're going to run that for we might be able to dive into some of the more difficult age cases like for example if we do one plus one minus equals what's going to happen or one plus one times nine divide divide times minus plus you know that kind of weird combinations with users can press those are what i call age cases and we'll see how much time we have and how much we can dive into on thursday awesome i'm looking forward to it i think it's gonna be a lot of fun so yeah thank you guys this will be you know i won't be doing that that's gonna be zell taking over the code and we'll we'll see him work his magic uh well he does that on thursday so it'll be the i see a few people asking in the chat so the exact same time so to be for me it's nine o'clock local but same time we started this one uh but it'd be on for me it's thursday if you're in unzel side of the world it will be friday morning yeah if you're anywhere past utc it'll be friday if you're anywhere minus utc will be thursday awesome so thank you guys all for hanging out i'm gonna find out how i can end my stream i've lost my window that has my my streaming on it all right thank you for hanging out with us i think it's it's fun i hope you had fun too as well all right thanks guys bye