Create a hand made calculator with HTML, CSS and JavaScript

1. Course Introduction: hello and welcome to creating a calculator by hand Here on skill share dot com. In this course, we're going to create a brand new calculator from scratch using HTML, CSS and JavaScript. We're going to be writing modern HTML, CSS and JavaScript, and your project throughout this course is to basically create a brand new calculator, just like what you see here. But, you know, make yours look a little different, little nicer, probably. And add the interactivity in here so you can click any of these numbers and you do all sorts of math if you wanted to. This course is perfect for Front and developers who are learning html, CSS and JavaScript and you want a little more hands on practice, creating something a little more really life than just a hello world application or a to do list. If this looks very interesting to you, feel free to join this course and we will start right away 2. Setting Up The Project: hello and welcome to the very first lesson on creating a calculator from scratch or by hand . In this course, we're going to be using HTML CSS along with some JavaScript. Now, nothing is going to get too complicated, But you should already know Basic HTML basics. CSS. And if you don't know what the javascript part, that's okay, I can walk you through that part when we get there as well. Now, first things first. I have created a file called index dot html and I'm using V s Codas, my editor. So I'm going to type html Colon five and then hit tab, and this just automatically fills a bunch of magic stuff for me. This is what you need to get your regular html Web page set up anyways, So I'm just going to throw a title in here called Calculator at an HTML. If you want to change the tab title, you just changes text in here. Now I'm gonna flip over to Firefox, and I can go up to file open file, and I can select this HTML file wherever you save that. So if it's on your desk top, you're going to want to go to your desktop in open this HTML file. I always call it index dot html because that is a good naming convention for websites anyways. So let's go ahead and open this and we should see pretty much nothing we can see up here. It says Calculator. That's all we've added now to demonstrate that this page is working. We can't say inside of our body where we're supposed to be able to write text and add HTML and all sorts of stuff in there. We can have an H one tag, and this H one tag is a header one. So it's large text. And if I just save that file and flip on over to fire Fox and then refresh this page, you can see it says large text here. And regular sized text is like in a paragraph with the P tag. And I could feel that with some Laura Ipsum text in there. So I'll say that again. Flip on over to Firefox and let's just hit Refresh. And so this is a regular sized Texan. This is large text. Nothing about this is fantastic. This is the most basic version of a website. You could possibly create, but it's really important to have this base set up. So what we're saying here is use DOC type HTML. This is the HTML five tag. Then we have an HTML element, and the default Lang is English. Technically, you don't actually need that. V s coaches automatically filled that for me. We said the character said his utf eight. So we can have Japanese characters, Korean characters, Arabic characters, English characters, all sorts of stuff in here. And our page is not going to look funny. All the characters are going to render as they regularly would. Then we said, Vieux port, this is basically going to make our website responsive. So if you were to load this page up on, let's say your mobile device, this will actually work the way it's supposed to work and you can write CSS media queries. Then we added a title. That title is the tight tab title up here, and that's sort of all that goes in the head and in the body is where we put all of our actual content. And then we put all of that inside of our HTML elements and basically what we're saying, Here is everything from here to hear all that stuff on the inside is ht no moving forward. We're going to be putting all of our actual content inside of this section in here, and we're going to be writing some CSS right in here with the physical internal CSS. So we're going to writing CSS right inside of this document and at the end of this course will clean this up and make sure that it goes into its proper file so that we're following best practices. So first things first, we needed to get this file sort of figured out. We need to get it structured. We needed to stub it out the way it looks now, once you have something like this, you can actually start creating your Web page. But it's not until we actually have some of this set up that we can create a proper Web page. So the next last what we're going to do is we're going to write some html and it's going to look totally gross. But then we're going to add some CSS and is going to look really, really nice 3. Stubbing Out The HTML: all right. First things first. We need to stop out some HTML. Now, this part is honestly not the most exciting. But html is the skeleton behind every single website, every web app. It is the key to telling Javascript and CSS how weaken style and interact with our page. Now we're going to create a calculator, and we're just going to use HTML to begin with, so this is going to look pretty gross. But what we can do is create a div where all of our calculator content can live. And if we wanted to, we could also give this class of calculator. Now, once we get into some of the CSS, I'll describe what classes and what ideas are and things like that s o A div is just a standard divider element. It really doesn't do anything. It's just a dummy element. It's just for sort of creating general purpose stuff. But inside of here, we also want another div. And this is where our results are going to go. So this is where the top of the calculator is. Where you put one plus two is equal to three. That's where that's going to go then we're going to create and a Nordling list with all of our list items in here. And so let's just take a look at what we currently have. Someone's gonna write out test there. They save this file and let's go over to Firefox and hit, Refresh, and we can see this. I'm just doing in here so you can see up here. Met 300%. Doesn't look very good, does it? Well, we need to add clear multiply, divide numbers one through 10 or zero through nine, rather and equal sign in all sorts of stuff. So let's go ahead and add that in here. And then in the next video, we can make the CSS actually touch this up the way we want it to sort of look. But right now we need to create a calculator with some buttons. Now, you don't have to use an UN ordered list, which is what I'm using here on ordered list. With a list item inside of it, you can use buttons as well. You can use links, you can use anything you like. I'm just going to use an A nordle ist because it sort of keeps the HTML really, really simple. So I I'm going to just copy this over a few times and not sure if that's enough, but we'll find out near the end. So the 1st 1 is going to be C for clear. Then let's add a an asterisk. That's the multiplication symbol and divide symbol lets out a decimal in there. It's do seven, 89 and so basically, how in planning this out is this is going to be the top four and then we've got a set of three numbers in here. Then we'll have another set of three numbers and another set of three numbers, and the way I organize this may or may not totally be correct. We might have to change some of these, but that's okay. The way we're going to create this is going to be completely flexible. It was at a plus sign in there and then let's do 45 and six Jones at a minus, sign 12 and three and this is going to look really bizarre just until we get this sort of all sorted out, then an equal sign. Let's put a zero in there as well and again. If we need to address this, we can adjust this later. Later. That's totally fine. So our HTML looks something like this. And lastly, let's not just create a regular calculator, but let's also make sure that this is something you can use in your portfolio. So let's create another DIV in here with a class and I move that down. Let's call it signature, and this is where you can put your signature when you're done your project. And I'll just call this a nice calculator by your name. And last but not least, let's go ahead. Refresh us and nothing fancy, literally the most boring page we can think of. But in the next lesson, we're going to start applying some CSS, and this is going to look incredible right away. 4. Styling The Page: okay, So far, we have this really ugly page. This is no way to live your life. This isn't 1995 anymore. We can make this look really, really nice. And we actually don't have to do that much work. So this is where we get into CSS, and we're going to write our CSS in here just for the time being on. And then we can move us out into its own file a little bit later. So first things first. I think we need to set some details on our body, our background, this entire pager where all this white is. Let's go ahead and change some of that so we can change the entire body. That's the entire body element here by simply typing body. And that matches here. So it's the exact element name. Then we have these opening and closing curly braces. And in here we can just say background color, and then we can give it hex color. We could give it a name so we could give it a name like aqua, and this is going to look terrible. But hey, look, now we have aqua, so you know we're not 1995 anymore. We now have a 1997 website. Let's go ahead and add a hex color, though of 999 And this is just a shade of gray. And my V s code thinks I'm using a Django template, but I'm not. I'm using an HTML template. And if I hover over this long enough, you can actually see that V s code is nice enough to give me a color picker and you can choose any color you like. So by no means you have to end up using the same colors I use. I'm just going to use something sort of generic. Ah, and you can customize it the way you like. Let's go ahead and save that and refresh our page ones more. And OK, you know, it doesn't look as tacky as 1997. So maybe we're in 1999 right now. Let's do a quantum leap here. Let's go ahead and add a Grady int back here. So Grady INTs in CSS could be kind of tricky. And what I like to do is use a service called Color Zilla and I want to use the ultimate Grady int generator here and what I'm going to do is just grab these and drag them down. And then let's use a radio and let's change these colors. So what should the inside color be now we can poke around in here. We can use sort of any color we want. I have one in mind already, though. 70 77 c So it's gray. And again my calculator is going to be pretty great. Yours could be super colorful and the outside color here. What do I want this color to be? Black, maybe? Yeah, I like that. And then all we have to do is click copy. And so this is our little preview. And again, I'll just make that bigger here. And this is our little preview here, and this is all the code that it generates for us. This is regular CSS. We don't have to worry about what this is. We know that this is going to work, so I just click copy, go back to our code here, and I'm literally just going to paste it in here and I will fix up some of the inventing. Let's go ahead and save that. Let's go back to our calculator and refresh. Okay, not bad, not bad. We could actually see that the Grady into sort of repeating itself a little bit. So we have to sort of adjust that if we want this to sort of stretch all the way from the top to the bottom. Now, in CSS, we have this cool little life hack that's not really a life act. It's not even really hack it all. All we're going to say is the HTML and the body. The entire HTML element, along with the entire body, should take up 100% of your browser height. And so we're going to select the HTML element and the body elements separated by a comma, and we're simply going to say height 100%. And when I refresh the page here, we're going to see that this actually sort of fixes itself So we don't see a little repeating Grady int at the bottom there. Just like that, we can't really see her text, but that's okay. We don't really need to do that right now. Next, let's go ahead and make this calculate calculator look a little, you know, let's block and more like Woo. So we need to create a class near called Calculator Calculate Whore, and I'm selecting this element by its class name using the DOT selector. So dot means class and then we just match this name with this name in here and then weaken style it. Let's go ahead and give this a background. Uh, I guess we could do a background color, but let's do a regular background of 353535 And that's just a darker gray. Let's give this a with of something like 300 pixels. And maybe let's give this some padding as well, patting of like 15 pixels. Let's see what this looks like so far. Okay, at least we can read it. So you know that's a step in the right direction. Let's go ahead and center this as well. So it's do position. Absolute top 50% left 50%. Now, this is not actually going to properly, uh, center. This is gonna take this corner up here, and it's gonna place it right in the centre. Right? Words, lightest just like that. So that's not quite center, but we can offset it by half of the with and half of the height, so we can sort of actually bump it into the center with a declaration called Transform and we say translate the X access by minus 50%. 50% of the elements with and the UAE access also bumped that up by 50% of the height. Don't save that and refresh here and now it's actually centered, and when I zoom own, it will always stay centered. It's now we're getting somewhere. Last but not least, let's go ahead and give us a little bit of rounding, maybe a box shadow. And let's send her all of our text to be Let's align all of our text to be centered s So we're just going to do some final touches on our calculator in this lesson, and then the next one we're actually going to make the calculator look like a calculator with buttons and everything. So text align, center and all that's going to do is make sure that all of our text is in. The center will adjust that later. We can overwrite that later. Let's give us ah border radius of something like five pixels someone we go back here and refresh you can see is actually rounded up here like an actual calculator in real life. And let's go ahead and give this a box shadow. So we're going to say the box shadow on the X access should be nothing on the why Access up and down should be six pixels. There should be no blur. And the color should be. I'm gonna say a one. A one a one. Is that look OK? Yeah. This is about where do you go? This is about the color that I want right up here. So that's the first box shattered the second box shadow. I'm gonna add. I do that with a comma here. The 2nd 1 is going to be ex access zero. Why access eight pixels? The blur is going to be 10 pixels were going to give this an RGB a value. So that's a red green blue Alfa value. And that's going to be 00 new 000 So that's the color black in RGB. It's the absence of color, so it doesn't have any value at all. That's why we give it zeroes on. Then let's say it has to be 0.75%. Pay city and let's see what this looks like. And now we just have this little Yes, it looks like a a border at the bottom. It's rounded and it has a shadow, so it actually sort of looks like it's popping off the screen just a little bit. The next lesson. Let's go ahead and style, the results and the buttons and maybe your signature as well if we have enough time. 5. Styling The Buttons: Hello. Welcome back in this lesson. Let's go ahead and style the results section that style all the buttons, basically all at once. And then let's if we have enough time in this lesson. If we don't weaken, push this into the next lesson. But if we have time, let's also style the signature. So first things first, let's do the results section and we need to be able to target this Div. Now if we targeted a Div like we targeted, our body is going to select every single dip. We've got one here, and we have one here and one in our signature, so we don't want to do that. We want to style just this particular one. So now I can give this a class of just call it result and by default is going to have zero in there Now. This isn't going to actually do anything until we write some CSS so I can write dot results and remember that DOT means class and then opening and closing curly braces. And let's make this really ugly. Let's give us a background color of red. Let's give this a color of blue. That's going to be our text color. The width is going to be somewhere around 90% ish again. You can adjust this as much as you need. When you're creating your own calculator as well. Give us a margin. So this is going to be the padding around the element. So the padding around here and we're going to say on the top eight pixels on the right is zero pixels on the bottom, 20 pixels and on the left, 10 pixels. And let's just see what we're working with right now. Okay? So it actually looks like a bar. So, you know, not bad. Let's go ahead and change that text. Align though textile line is going to be to the right. Maybe let's give us a height of, like, 50 not 50% 50 pixels ish. Maybe give us a line height of somewhere around 50 pixels as well, just so that our text is going to stay centered. Yep. Okay. It's coming together. We need that fund to be bigger, though, so let's make the fund bigger. And then we'll change the background color and things like that as well. So that fond I'm just gonna guess with this one at, uh, I don't know, 36 pixels somewhere around there. Let's see what this does. Hey, not bad. Maybe maybe 35. Yeah, barely made a difference. Our number is hugging that far right border where that red sort of meets the great. Let's go ahead and give that a patting, so there's going to be some spacing to the right. 10 pixels. There we go. That's looking a little better now. I think we need three more things in your What if this number gets really, really long. If this number is really, really, really, really, really, really, really, really, really long, is going to sort of just fall out, we don't want that. So let's give us an overflow of Hidden and that Just make sure that our number always, you know, stays within the physical limits of a real world calculator. And maybe, let's, ah, change the background color. Let's get rid of red and let's do like C E C F A C Somewhere on there. What's that gonna look like? Yeah, that looks like tacky old green calculator and the text color. Let's make this somewhere around. Three B three b the three b 32 out of something like that. And again, that color is just this darkish, grayish brownish color. That's refreshing. This is going to start to look a little better. OK, okay, not bad. Maybe. Let's change the font and let's change the box shadow are at a Bach shadows. So the font family. Let's say this phone family has to be digital. You can change this fund as well if you wanted to. If you have the fund digital, it's going to load it. I apparently don't so it's not going to load it, so I'm actually gonna get rid of that. But you can change that phone to whatever you like. Ariel Times New Roman Something custom will actually add a custom front a little bit later . Down the road on Last Thing was at a box shadowy box shadow. And let's say this box shadow has to be on the inside. We're gonna say it's an insect. 00 and eight pixels is going to be the blur and is going to be RGB a so red green blue Alfa 000 that's going to be black and a 0.5 is 50% as a decimal. It's also had one more in here and in set zero picks, those two pixels zero and then maybe let's just to register. We can take a look at what we're building here. See how this looks. Oh, yeah. Okay, so we've got that inside shadow there. Just It's very faint, but it looks pretty good on. Then. We've got the red up top and we don't necessarily want that to be read. We want that to be a color that's going to look like we give it some depth. And we really just need a darker color for this, like a one a one a one? No, that's that's not bad. Let's go ahead and add some numbers in here. Let's go ahead and style this on, then. Yeah, we're not gonna have time for this one in this video, but the signature we can do in the next video. So the nice thing about all of these is weaken style, all of these all at once. So let's go ahead and select this one ordered element by its elements. Name ul. Let's give it a padding of zero and a margin of zero. And let's just see what that does. Okay, that sort of squishes things together. That's good. That's what we want. Next. We want to select that same UL and then all the list item elements underneath it. So this is our parent element. That's this fellow right here. And then all the Children elements called Al. I was gonna grab that one and that one and that one all the way down. So first things first. Let's get rid of this list style. We want to make sure that this doesn't really look like a list. There we go, no more bullet points. Next, let's give this a background color of Let's just say register so we know what we're working with That is just obnoxious. But every button should also have a little bit of padding. We can say the width of each one is going to be somewhere around 15%. We can adjust these down the road if any of these are incorrect, by the way, and we're also going to use this thing called Float now in Modern sees us, you can use flex box, and you can also use grid. We're going to stick with float and float is just an easier way to sort of deal with these buttons because we want them to all sort of hug side by side. And we don't necessarily want to get into the complexities of flex box or grid because it's just a calculator. We just want to keep this simple. So let's refresh our page. And would you look at that right away? This takes shape as a calculator, and actually, I think I got all these in the right order to so clear multiplication divide. That's our period 789 plus 456 minus 123 equals. And then zero will probably end up making the zero take up spot below one below two and below three. And then the equal sign is going to go down as well. So we're almost there with the buttons. Let's change the color to like a white. So that's the hex symbol for White. Is number signed F f f or you could just type white. These should all have a margin, and the reason we want that is because we don't want these all to be so side by side that it actually looks like one big button. We want these to be separate. So if I save this and refresh, you'll see that these buttons actually separate into buttons. And that's because of our margin here. Now we need to add a cursor because currently, if you just put your mouse over, it doesn't look like a button. Your mouth doesn't change. But if we refresh with the cursor, the most actually changed. It looks like you can click it. That's good for user experience. Let's give us, like a fun size of maybe 20 pixels. Something like that textile line is going to be center. I don't think we actually to set that text line. No, we don't that's already set. Let's also give these a border radius so the buttons aren't super hard and pointy on the corners. Let's give us aboard a radius of I'm gonna guess four pixels might maybe not be enough. That's four pixels. Okay, what about five pixels? Be as go with five pixels. For now, we also need to change the font, which we're not going to have time for. In this video. We'll do it that in another video. Ah, and we'll a just a bunch of other stuff in here as well. What are we missing right now? So the background color is red. Maybe let's change the background color or something that looks more like a button. So it's not so obnoxious and in your face loud on. Let's also add a box shadow so that underneath here, just like what we have down here, it actually looks like we have some sort of shadow or or some sort of elevation off of the calculator. So first of all, that background color really needs to go That can't be read anymore. 45 for five for five. Not bad. What if we did 40. 44 e. Yeah, let's go with that one little lighter. A little easier to work with, in my opinion, But again, that's totally up to you. Lastly, let's go ahead and add this box a shadow we're going to add to shadows in here, so the 1st 1 is going to be on the X axis. Don't move anywhere on the why access move down five pixels and the blue is going to be zero. And then we're going to say that this should be a five. A 585 And that gives us this nice little bump down there, so this actually starts to look like a calculator. It's also at a secondary, but in your and in the set button, not a keep saying button. I meant to say, Box shadow. Let's have an inside box shadow and we're going to add a second shadow with a comma in there on the X axis, moving zero on the Y access moving down two pixels. The blur should be zero pixels. And let's give this a somewhat of a darker color. I guess that's not really dark. Isn't no? That's a pretty standard gray and leads refresh. Okay, okay, I can live with that. I think that is good for this particular lesson in the next lesson. Let's, um well, I said, we're going to do this. Eso Let's style that up a little bit. We might actually come back to that a second time around on, and then we'll do a little more with the buttons 6. Your Signature: in the last video, I said, We're going to work on the signature. I probably shouldn't have made that promise, but we're going to stick with it anyways because that's what I said. We're going to do so in our signature. Let's go ahead and just copy this class. The class name, signature and weaken target that because it's a class we can use the dot so dot signature and we can give this some sort of color. So maybe white. We might adjust this a little bit later as well. Ah, the font family could be something totally different. Maybe. Let's comment that out for the time being. And that's just a CSS comment here. The font size. Let's see, use not pixels. Let's use realms. So 0.75 relative Mm says yes, could actually tell me what that is. That would be great if it does. For scalable forest, the font size is a scale factor applied to the E. M. Unit of front. And basically this is a relative e M units. So one is your regular font size and 0.75 is about 3/4 of your regular font size. Whatever that is going to be again. We can change that down the road. If we decide that maybe rooms aren't the way we want to go. Let's say the text a line is going to be to the right. And just so we know where we're working, A sea border, one pixel solid red because we're using a lot of floats in here. This might not actually just be a div writing here. This might be taking up some extra space, and sure enough, you can actually see that this is the entire signature. We don't want that at all. So what we need to do here is position relative, and this is going to allow us to set a SET index. And zed Index is like, you know, when you're painting on a canvas and you paint layer on top of layer on top of layer, that's what this is as that indexes saying we could put it in front of other layers were behind other layers and hours. That index, in this case is going to be minus one. We want to put it behind other layers, and now it already looks like it's doing that, but we just want to make sure. Now let's ditch that red border. And for the time being, I think this is going to be okay. We actually need to move this over a little bit, and it is a little bit tight up there. So I'm expecting that could be a little bit of a problem. So I was just talking about this corner here and how the Texas basically touching one of the top buttons. So because we're already using position relative, we can say Move that from the top. I mean, I guess, and something like four pixels can weaken. Adjust that later, and let's move it from the right off the right wall by five pixels. And so this is just going to bump this down into the left just a tiny bit. Hey, that's not bad, but we might have to come back to that a little bit later in the next last. Let's go ahead and add a custom. Forints or buttons actually look a little nicer, and maybe we'll apply that for that same fund to our signature in here before we continue working on the styling of the buttons. Because right now, if we click it literally, nothing happens. It doesn't move up, doesn't look down, doesn't do anything 7. Custom Font: Okay, Doke. Let's go and look for a custom fun, so we're going to go too far. It's dot google dot com because they can give us access to pretty much every fund that I know of for free. Or if we wanted to, we could pay for one. I'm not gonna pay for one. I'm just going to use a free one now. Have one in mind already called share? No, that's the custom wording share, and it's going to look like this. Let's just add a bunch of numbers in here. Does that kind of look like what we want? I think so. You know, if not, we can always change that, too. That's the nice thing about Web development is if we don't like this, we can swap that out for any other fund. So I'm gonna just like this style and click in bed up here, and there's two ways we can do this. We can add a style sheet using link, or we can use the at import command, and we are going to use the at Import command here. Has to copy this. Let's head on over to the top of our style here and paste. Now, this isn't going to do anything right off the bat. We actually to add a font family of share, and then curse of weird, that falls back to cursive, But Okay, so I'm going to copy that. And where did I want to change that? I wanted to change out on all of my buttons, and I wanted to change that in the signature. So I'm gonna save that page, go back to our calculator and refreshing. Okay. I like it. I can live with that. Can you live with that? I can live with that. If not, if you don't like that, you can always use a different fund. 8. Button Movements: okay, We have these buttons. They will. They look like buttons. We know they're actually list elements. So we've sort of tricked the user a little bit there. That's OK, but when we click it, nothing happens. So we need to add some sort of styling in here That happened that basically, when we click this, it looks like it's moving down. So all of our buttons, our allies and we're selecting the UN ordered list and then the list items. So let's also work right off of that. Let's create a U L L I was going to select all of the on ordered lists and then all of the ally elements underneath it. We're going to say when it's active, and that means when you're clicking and holding it, what is it going to dio? We're gonna give us a position of relative I'm gonna say Bump it down by five pixels. We're also going to change that box shadow as well. And then box shadow how we get rid of that from last video. That box shadow. I just commented out, and we'll deal with that in just a sec. I just want to take a peek here. Okay, it's moving, right. If we actually just that box shadow the box shadow moves up or basically we sort of get rid of it for the most part. Now the more I look at this, the more I don't like that top shadow on those eso. Let's just go ahead and edit that, cause that's gonna drive me nuts on the more I look at it, the more it just doesn't seem quite right. So we have. Yeah, we've got her button here. That's our ally Box Shadow X zero. Why? Moving down five pixels. Zero blur A 58585 OK, maybe let's not use the exact same one that we were using up here. Let's try changing this. Let's try doing zero pixels on the X axis that's left. And right now, let's maybe do two pixels down. That's top and bottom. Let's see why Access and a five pixel blur with an RGB a red green blue alfa of Yeah, that's the one we want right there. And let's just see how that turns out. Hey, that looks way better. Okay? We still have the whole thing moving down, which is the current problem, but we fixed that weirdness that we originally had. I'm so much happier with that right now. So now let's go back to our ally. And when you're pressing and holding on one of those buttons, what is the shadow going to dio? We're going to give this an insect So the shadows going to be on the inside. Let's try X x zero. Why access one pixel to pixel blur and rgb a red green blue Alfa on this is going to be black as well as your 0.4 again. If you're looking at this new like, Hey, Caleb, this is cool. But, you know, I just want to let you know this is a really gray, boring calculator. Feel free to spruce this up at a background image instead of a radiant. You can change us to look more like wood or plastic or anything like that. And you? Is that what I want? Yeah, that's what I want because that looks pretty much flattened. Now we have Oh, okay. We have to change this because we have one too many buttons here. So let's make this zero stretch to here and here. And let's make this equal sign stretch to the bottom. How do we target this equal sign? This equal sign is going to be a tricky when I think so. This is the second last one. We're going to use an 10th child. Selectors, this is a little more advanced CSS. Basically, what we're going to say is zero one, 23456789 10 11 12 All the way down to this one. And we're going to select that specific one using just CSS. And we can do that with UL Ally and child Number of child 16. And let's give this a border two picks a solid white. And let's just make sure we're targeting the right one here. And yet we are talking the right one. So we're just going to ignore this because this is just going to sort of move wherever we want because everything else is floating. We want to make sure that the floating elements are with ones we work with. Eso this is the one we want. So that was a good guess. So let's make this twice the height. It usually is. So if you're wondering, Hey, what is the height. Let's let's go back here. Click on this one. Inspect element. And if I click on any one of these or hover over them, you can see that in my document object model. It's up here, the visual representation of it. Each one of these is 65 by 43. And if we drag this little layout guy there, we can actually see. But on the inside, 45 pixels by 22 pixels. Men's got 10 up top 10. At the bottom are this is almost 23 pixels for a total of 42. Now, that may not be entirely accurate because we're doing some extra stuff. So I mean, I'm honestly just going to guess, uh, let's see 37 pixels. We're going to change his height and see what happens. I made it pretty big. And if we take a look at this, just that equal sign that's the one we're looking at here. Just the equal sign that height is No. 37 plus 10 on the top and bottom. So I'm I'm just gonna eyeball this one. I'm gonna say 75 pixels and let's go ahead and get rid of the border because that's going to sort of mess us up as well on and think I can live with that. I'm gonna live with that. I'm gonna make this work, and then we need to sort of move this one here. Now, this is already floating. So this is an interesting one because we have to select this button in particular and bump it back up and then stretch it out to the right. Let's go ahead and grab that element. So Ul Ally. And which one is that? I think it was the last element. Rain? Yes. This one is an easy one to grab with CSS, we can just say last child, and that's to margin top of like minus 45 pixels. Again, I'm just eyeballing us and a width of like 70% And think we need to actually move that margin up a little bit because these don't line up and that with this a little too much eso what we can do instead of writing, saving, refreshing. We can actually just change that in here. So what I did was right. Click inspect Element and I selected the one I want to edit. So I'm on the zero and in here. There it is. Minus 48 is the one we wanted, and I'm just changing this value right here. And the width. Let's make that smaller. Minus 65 are not minus 65 just 65%. So the height No wrong one. The emergent top is minus 48 pixels, and the width was, I believe I said 65%. So let's go ahead and refresh this and it stays the way it's supposed to. Perfect. That's looking pretty good. And then you know what? Let's touch up this equal sign. Let's make that equal sign. Be right in the middle There. We want to do a line height, not the last child run one line height of 75 pixels. Let's see what that does, and this is just our equal sign. That's the one that we give extra height, too. Yeah, looks pretty good, Pretty good. I am happy with that. So for the time being, I think we can leave this where it is, and we can start working with some of the JavaScript. Now there's going to be all sorts of weird edge cases with JavaScript because that's human mathematics, where you know you can't divide a number by zero. What happens when we do that? We're going to deal with all sorts of that stuff in there. So the next lesson let's jump into the JavaScript world. 9. Button Actions: Okay, We're making so much progress here. Currently, though, when you click one of these buttons I mean, it looks like it's doing something, but it actually doesn't. So when we click the number five, number five should appear up here When you click Divide, it should save five divided by. So let's go ahead and make that actually work. First things first. We need to get rid of these random numbers. What number does the calculator usually start on? Either nothing or zero. Yeah, let's start with zero Now. We might do this over several videos here, and the first thing we want to do is we want to select all of these and then add an event listener. So whenever you click nine or one or clear, it's going to do something. So we write this in our JavaScript at the very bottom of her page. We write script opening and closing tag, and then we can grab a list of all of our allies. So we're saying constant because this list is not going to change allies of that just portal for Ally is equal to document dot query selector. Uh, and we're going to get all of the UL ally elements. Now, if you're ever wondering, how do we know what I'm doing? Because it sort of seems like I'm coding in the dark. What you can do is right. Click, inspect on your page, Go to your console and you can write this out. I just copied and pasted that in there. And when I type allies and hit enter, you get this thing called a note a list and I have 17 items in your and you can see that when I hover over each one. It actually tells me which one is which, which is pretty cool. So essentially, this is an array or a list of every l I that I have on this page. Now that I have that I can loop through each one and add an event listener. So I'm going to loop through each one with allies dot for each. And this is modern javascript as well, when we're going to use a fat aero function in here. So instead of writing function like we usually would with our old way of writing javascript , we're not going to do that. We're just going to say don't use functional just passed through whatever the note is. And that node, each one of these is called a node. So pass through that note and then with that node, we can say no dot add event listener. And what happens when you do something? So we're gonna say most down and then this one, we're actually going to give a proper function and let's not call it e because that is not intuitive. If you're sort of new to JavaScript, we're gonna pass in an event into this particular function. And first things first, we're going to say event dot, prevent default, and the next we're going to get the value of whatever is inside of this ally. So it's a constant value is equal to, and then whatever this particular note is, So let's grab this one here. That's the asterisk. And if we scroll down to inner inner, inner inter text, we can get this value right there. We do that with any of the other ones, too, because these are all the exact same. They just have a different number or letter in there. So this one is No, Let's not do that. Let's do the number nine So it's the six item in our list. However, it is the number nine up here, and if we look down, we look down. Inner text is nine. That's what we want. So we have a node value dot inner text and then just in case there are spaces around it. So maybe you wrote your HTML like this trim is just going to get rid of that extra space for you, and then we can console dot log that value now. This still is not really going to do anything useful or valuable. Let's refresh our page. And when I click seven, it says seven and you can actually see that every time I click a button, it shows up down here now. One thing to note here is when you're using event dot prevent default, it's going to try to stop everything from doing what it normally does. Now, if you're using links instead of a list item, you're probably going to need that, which means your animations aren't going to work. The more I click this, nothing happens. My button doesn't move down anymore. So if I delete this, save that file, go back here. Refresh now it says five. Now it says eight. And now the buttons are actually moving down as well. So just be aware of that. If you're using this items like I am, you have nothing to worry about. You can pretty much ignore the last minute of what I was talking about. Next, we want to actually get the result up here. That's too big. We want to get this result, and we want to put that number in there. So let's go ahead and grab that result as well. So corns result, and I'm using a dollar sign here just as an example. You don't have to, but as an example, the dollar sign usually means you're grabbing something from the document object model, which means we should use one here and here as well. The result is going to be document dot query selector, and then we just want to grab that result. And I think we called it class results. Right class results. Yep. And what we can do is just overwrite that result text. It's now we can say result dot inner text is equal to value. Let's get out of that console log and refresh your page, and this will say seven and then five and then nine and then zero, and then so on and so on and so on. We can keep doing this all we like. No, I think that's about enough for this particular video in the next one. Let's go ahead and actually add some logic where we can say eight, divided by nine or zero plus four instead of just having one character at a time show up. 10. Operational Calculator: all right. Where we left off was Every time we press a button, it removes whatever value was in there and shows the new value up there, which is sort of what we want. But we actually onto a pendant. So if I hit one and then to the number 12 should draw not one and then two, we also want to figure out how to use the equal sign and all these other things and make sure that if someone hits the sea, that it just clears the answer out. So we're going to add all of that in this particular video. Now, in the last video, we said the result dot inter tax is going to be the value. Let's get rid of that because that's just going to change the number over and over and over again. It's actually going toe override it every time. We don't want that. What we want instead is to grab the result text. So whatever is in here, we need to grab that now. We don't know if there's going to be spaces or not, so we're going to have to trim that as well. So it's to const Result text is equal to the result of dot inner text dot trim and all that's going to do is grab this result here that query selector. It's going to grab this and going to grab the the value in there. So if it was Space five space, that would still show up as just the number five for us, that's what we want. Now let's start by adding some simple logic whenever we have something that can happen through numerous paths. If I said you could go left straight or right, you could take three actions in your life. If you were driving down a road or walking down a path calculators no different. The events could be clear. You could have some sort of actual mathematical application in here. You could be saying whatever I put in there, converted to actual answers or a solution. Or maybe you're just adding a number to the result texting here. So you're a pending that number. Let's start with most simple form. I start with clear, clear whenever we hit the clear button. All that supposed to do is make the screen go blank. So now we can say if the result text is equal to see and I'm getting that see from here, which is also right here. If it is equal to see what are we going to dio? We're going to change that resulted dot inner text to I am cleared because it is an obnoxious calculator, Apparently, and then we're going to return True. And all that return does is because this is a function. Whenever function runs, code is going to go from top to bottom. And when it hits this return, keyword is going to say, Hey, if there's anything below it like this, don't execute any of that stuff. It's saying You hit the return key word quit running everything below. It's just exit over the functional together. That's what we want. So this is going to be a very strange example. I just hit refresh, So if I hit eight, we see nothing happens because we got rid of that part where it says I think like a button puts the number in here. But if we click clear, nothing is gonna happen. And actually I don't let's go over this real quick. I made a logic mistake. Summer result text. That's what I'm looking for what we want, actually, is the value of the button. This is the button that were pressing, so it's supposed to be value on. Let's make sure that we're always comparing it. So if you write a lower Casey or an upper Casey, this will still work for you. Value dot to lower case Let's make sure this is a lower case, so it's going to take the Capital Letter C making a lower case. And if it is equal to a lower case, then it will change the result in her text. Here we go. Here's a better example. So whenever I refresh and clear says I am cleared now that's obnoxious. We just want to clear it, clear that value Damn refresh Bam, bam! Just like that. Now that's the clear button. But if we do eight divided by five, nothing is showing up in here. So we need to make sure that that shows up. So what we can do is we can grab this result and just a reminder that this right here we can grab that existing result and we can upend something to it. We can upend the value. So what we're saying here is a pen, the value. Unless it's a letter C. So I'm going to go from top to bottom. If it's a letter C is going to return true, it's not going to do anything. If it's anything else, then it's going to take that result and is going to add the value to it. Eight Divided by five is going to be a divided by five in our result areas. Let's go ahead and save that and demonstrate this eight divided by five. Now you can see that we have a starting zero in there, so that was a little bit of a problem. But you can see that our numbers are all showing up side by side now. And this is good news. This is what we want. We want something like this in here. This means we can actually start doing some math. So if we cleared that and we did seven times seven and eventually we hit equals what's gonna happen? Okay, well, now we have another edge case. We have another path to go down when every hit equals. Equals should not show up in there. It should actually do the math for you. Let's go ahead and add that in there. So now we can say if that same value is equal to an equal sign. We can now say the result dot inner text is equal to a solution of some, some some type of solution. We don't what that is yet. Let's go ahead and create that solution, though. So it's to let solution because eventually we might maybe changes. So we've been using Const so far. Counts means you cannot change that value in the variable. Let means you can. So that's change it. And that solution is going to be evil. Whatever the result dot inner text dot no html inter text dot trim is going to be, so it's going to grab that result. Whatever is currently in the results section right up here, it's going to grab that inner text. It's gonna trim it. Now here's the thing is can actually see we've written this one's already. We just type result text. That's the power of variables. We don't have to type same thing two or three times. We can type it once and use it again. Lastly, we need to return true and the reason for That is because if we don't, we're gonna have the equal sign it's going to do seven times. Seven. It'll show. Show us 49 on, then is going to append that equal sign. We don't want that. We want it to never show the equal sign. Just do the math. So now if we do seven times seven Well, we've got a 07 in there, but that's okay we can deal with that later. Is equal to 49 is equal to now. We're super close, but we do have a problem. Whenever we start over instead of zero, it says 07 And whenever we multiply, we have unequal sign at the end, says Tackle those, And that will be enough for this particular lesson. So let's go ahead and get rid of that zero. So we can say if the result text is equal to zero. Change the results dot inter text to nothing. Now we're not going to say return here because we simply just want to override it and let everything else happen. Let's save that and refresh, and now because it's going to start with zero, I'm going to hit seven. It's going to you go through here, say, Oh, you hit 70 that number that's currently in there is zero. So erase it and then it's going to try to do these condition ALS. They're not going to be a match, and then it's going to add whatever number I wanted to are appended to back here. So when I hit seven, it doesn't say 07 anymore, which is really, really nice. So that's one issue solved. The next one is if I did seven times eight, we had that equal sign job. However, this may have already solved itself because we were cleaning up our code. And because we're doing proper math now, this is going to start working the way we want it. Teoh. So in the next lesson, let's go ahead and add some more logic in here, because what happens if I clear this out? And I did 10 divided by zero? What do you think is going to show up? We're going to need to handle that scenario 11. The Finished Calculator: all right, leaving off from the last lesson. I sort of left you on a cliffhanger, and I said, What happens when you do 10 Divided by zero. In real life, you cannot do 10 divided by zero. What happens, you get infinity. That's actually in JavaScript. That is a data type, but also that's not wrong. Now the problem is, if I type five or eight or anything like that, it keeps saying infinity, We don't want that. What if we clear this and hit equals? We also get undefined. We don't want that either, because our logic is not looking for it. It's not looking for the word undefined or infinity. So what we need to do is check to see if the result taxes zero. If it's undefined or if it is infinity, just reset it back to being blank. So we can say that very easily by giving an or conditional in here so or so. The result. Taxes equal to zero, or that's the two pipes. The result text is equal to undefined, or that's the two pipes or the result text is equal to infinity and that had a capital I. It's going to take whatever that result in her text is, and it's just going to reset it to nothing. That's what we want. Let's go ahead and give this a shot now. And if I just hit equals nothing happens if I hit, Clear gives me undefined. What about Hey, look at that. It goes away now. I can also do 10. Divided by zero is equal to infinity. And if I click, I don't know five. Well, that still shows up Infinity. That probably means I made a type of somewhere infinity nailed it. Know thy self. I know when I make typos, I make them all the time. Let's try that again. 10 divided by zero is equal to infinity and then hit five. There we go. Now we have a working calculator. We can also use decimal points. We haven't explored this yet, so we could do 12.5 plus 15.5 is equal to 28 So decimal points are automatically working for us as well. All right. And that is how you create a calculator so we can now handle all sorts of situations we can handle. Clear, multiply, divide decimal numbers plus equals and subtraction. We do all of that stuff within. Or is that 1 19 to 1 45? So somewhere around 25 ish lines of code, we made a calculator in JavaScript, and the last thing we really need to do is move these into their own files because right now you know there's actually nothing wrong with what we're doing. But as a best practice, we should move the CSS NZ JavaScript into their own files. So in the next video, let's go ahead and do that. 12. Code Cleanup: Okay, Dokey. We have a bunch of code in here. We've got HTML CSS and JavaScript, and the way we're writing it is not wrong. But we can do this in a better way. So all of our CSS, what I'm going to do is grab that from line eight all the way down the line 88 I'm going to cut that right over here. And let's get rid of that stuff housing back in so we can see this. And we need to create a new element in here called Link. And the relationship is going to be a style sheet. And we're going to link this using H ref to a file called style dot CSS. And that rhymed a file called Style. That was unintentional. But stick with it cause I like it. Now we need to create a file called style dot CSS. First things first. This tricks a lot of people. So this does not exist on my computer right now, So if I go back here, refresh, you can actually see that all the CSS went away. Okay, so if I just open in my browser, I just refreshed it there and you can see my styles are no longer applied. That's okay. And if you go into your consul here and you see, uh, sometimes there's going to in depending on the browser, of course. But sometimes you'll see like a 404 It will say that style that CSS does not exist if that's the case, but it does exist. Chances are your style that CSS just is not in the same folder as your index dot html. Now, in my case, nothing shows up. And if I go over to network and just hit refresh, absolutely nothing happens. There's nothing in here whatsoever toe load. And that in itself is actually a problem. It's saying that there is no style she trying to load at all. So what I'm gonna do here is just create a new file and paste what I had in there, and I'm gonna save this as style on dot CSS and I have these two files side by side. So in the same folder, I have index dot html. I have style dot CSS. Now, if I go back here and refresh your page should be styled the way that you expected to be styled, But also, you should see some stuff in here with within your network tab and you can actually see that expected known you were l or filter function but found pro Gee, I d. That's actually OK. That's because we're supporting Microsoft Radiance for I E 69 which we could actually get rid of because pretty much known in the world to supporting Internet Explorer 69 anymore. So that's basically our CSS and an external file. Now we need to go into our index dot html and grab this script all of this stuff. Let's go from line 37 down to 62 and cut. And this one can be script sources equal to, and we call this script dot Js and let's put these on the same line. Now when I refresh this, nothing is going to happen. It's because we took all of our javascript out, and when we refresh our page here, we can actually see. Firefox says. Loading failed for script with source of and then script dot Js. So if you ever see something like this with your jazz or your CSS, it means it's simply can't find the right path. And so we just want to make sure that Script Js is in the same folder as our as our index dot html. So it's create a new file. Let's pay star code in here and we can save this as script dot Js. And when we go back here, Firefox will stop complaining because it's loading perfectly. And I were calculator continues toe work. And with all of that, we now have made a calculator with HTML in less than 40 lines of code 39 lines of code. Excluding this and this like that 37 lines of HTML code. We have a calculator in less than let's get rid of that net and that and that and that was like five spaces in there and in like, 22 ish actual lines of code. We have a functional JavaScript calculator and in about 80 lines of CSS, we have a really, really nice looking calculator. So the end of the day, this is actually not very much code, and we've made something really, really nice 13. Summary: my dearest front end developer. First of all, thank you for taking this course on skill share. You do have a project and every skill share project. Every skill share course has a little project section in which you can actually create a proper project. You can share screenshots, or you can put all of this code into a code pen dot io and you can share that embed link. Either way, just make sure that you add your skill share project. Ah, but I don't want you to just use the source code that I have. Don't make a boring great calculator like this. Try using something that's a little more interesting. So instead of like a gray radial background, maybe put it on a desk instead of a gray looking calculator. Maybe it looks more like plastic or uses a background image that looks like repeating plastic or something. You can change the way that your buttons act and how they look a swell last but not least, Whatever you do to modify your calculator, make sure you sign your name on it because that will be your work. Once you have your final project, don't forget to share it in your skill share sort of section on, and I can take a look at it and I can give you feedback and all sorts of stuff. And last but not least, if you like my teaching style, don't forget you can always follow me on skill share. Check out some of my other courses. If you want to learn more about HTML or CSS or JavaScript or anything you've seen in this particular course, you can also go to my profile. I have an HTML masterclass or, uh, it's called the ultimate HTML Developer have a CSS masterclass called the CSS masterclass and JavaScript for beginners and JavaScript, from novice to ninja courses. So if you're ever wondering about modern JavaScript, if some of this didn't make sense and you want to learn about it, I've got your back. If you don't know about let's say radial Grady INTs or box shadows box, that was a good one, because that's ah, really weird CSS declaration to work with. If you're sort of interested in learning about things like that, you can check out the CSS masterclass courses. But I have several other courses on other subjects as well, such as Python. But of course, and as always, there's no pressure to go and learn all of that stuff right away. Html. CSS and JavaScript They've been around for well over 20 years, and they're not going to disappear any time soon. So don't forget to create your skill share project. Go ahead, throw that in your skill share project so I can take a look at it. Ah, and also you can share it with the community and look at other people's projects and get some inspiration to see what you like and what you don't like. Thanks again for taking this course, and I'll see you in another one.