Complete Intro to Web Development, v2 Complete Intro to Web Development, v2

JavaScript, HTML, and CSS Solution, Part 1

Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "JavaScript, HTML, and CSS Solution, Part 1" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian begins the walk through the solution to the JavaScript, HTML, and CSS Exercise by building out the look and feel of the calculator with HTML and CSS. Brian takes questions from students.

Get Free Access Now

Transcript from the "JavaScript, HTML, and CSS Solution, Part 1" Lesson

[00:00:00]
>> Brian Holt: We are gonna do a Java Scripts, HTML, CSS project. The calculator, this is difficult by the way, this is not an easy thing to do. I purposely gave you something that was a little difficult, working through a calculator involves thinking through how a calculator works. So, you have this object, you've used it in your entire life, and now you have to deconstruct it.

[00:00:24] What is actually happening, how is this like mechanically-logically working? So that's on purpose, it's a useful exercise, so definitely make sure you give it a shot. So first let's do the HTML, and CSS, and JavaScript, parts of it. So I'm gonna close that.
>> Brian Holt: And we're gonna open a new file.

[00:00:52] So a new folder. It's gonna be called calculator. And I'm gonna open this with VS Code.
>> Brian Holt: Okay, first thing I need to do, is I need an index.html.
>> Brian Holt: Inside of calculator, index.html. Okay I'm gonna do html:5, cuz I'm lazy.
>> Brian Holt: And this is going to be a calculator, something like that, okay?

[00:01:34] So, let's see how I. I actually do it just have it up here because, there's no way I can write this from memory. So, first thing I'm gonna do up here is I'm gonna write a link tag to get ./calculator.css. I'm gonna do just a div for the whole thing called calc.

[00:01:59] So that's gonna be, everything's gonna be inside of this. I'm gonna do a section for the screen.
>> Brian Holt: Okay, I'm just gonna make that 0 to start out with. Then I'm gonna do a section for the calc buttons
>> Brian Holt: I'm gonna do three different, or, how many rows do I have here, four?

[00:02:29] Five rows, so inside of here I'm gonna do .calc row, I'm gonna do four of them. And inside that, well, let's just do that, times 4. Well, this actually would be very useful. So, with this Emmet shorthand that I'm showing you, you can actually put things inside of it as well.

[00:02:56] So if you put the arrow, remember how we did the Lawren Epson text before. Inside of that I'm gonna put some buttons with a calc-button. And I'm gonna put four of those in each row as well.
>> Brian Holt: So you can see here this generates quite a bit of HTML for you.

[00:03:14] It's really nice that I don't have to keep copying and pasting this over and over again. You do not have to learn Emmet, but for me this is really fast cuz I can generate a bunch of stuff really quickly. The top row only needs three buttons. And the bottom row only needs two buttons.

[00:03:36] The reason being, if you remember, where is my screen. Right, three buttons for this one, this is a double. And three buttons for that one.
>> Brian Holt: So, let's go over here. So the first one on this one's gonna be a double. And this one on the bottom is a triple.

[00:03:58] Yeah, call that one a triple. Okay, we'll go through each one of these. And just do, that's a capital C for clear. If you hit, on Mac, at least, Ctrl+Command+Space, it'll bring up a selector thing so you can select what you need. I need the left arrow, right?

[00:04:23] I need a left arrow.
>> Brian Holt: So I'm gonna scroll and find the left arrow. And I double click on that, and it inserts that here into my HTML, so now I have a left arrow. And this is gonna be a divide sign, so I need to get a divide sign.

[00:04:41] Or a division sign, rather. So there's a division sign. 7, 8, 9, and then a multiplication sign, which you could just put an x there. That's actually not a real multiplication sign. That is a real multiplication sign, so we're going to put that in there.
>> Brian Holt: Then 4, 5, 6.

[00:05:07] 4, 5, 6, and then a minus. And then lastly we wanna put 0 as the triple button, and then an equal sign.
>> Brian Holt: So that's all of our HTML. If we go, and let's open this and open calculator index.html. Pretty cool little calculator. Little tiny thing up there.

[00:05:40] So let's go do some HTML and CSS, see what that looks like. We can bring in the CSS here.
>> Brian Holt: So, leave that up and come over here. Make a new file. Calculator.css.
>> Brian Holt: And, first thing we do, I'm gonna put that box size in border-box. That's gonna be really helpful in this particular case.

[00:06:07] Border-box, then I'm gonna do body, then I'm gonna do padding:0; and margin:0;. Body by default has some padding against the side, and didn't really want that, so we are getting rid of that. For .calc I made it width 400 pixels, and just had a fixed width. Background color.

[00:06:31] Just made that a straight black. And color, white, okay? So that's gonna cover all of our font needs. For the screen, font size 40 pixels. Some size. You could probably make it even a little bit bigger if you wanted to. Font-family. I'm going to just use one of them that the VS Code has for me.

[00:07:00] There's one that it has with Courier New. So the top one here. So it's going to be Courier New, Courier, and if it doesn't find that either, it's just gonna give up and do monospace
>> Brian Holt: So there's three or four of them that you can guarantee the browser has, for sure.

[00:07:17] There's font-family, there's serif, it will definitely have a serif font. There's sans-serif, monospace,
>> Brian Holt: Cursive.
>> Brian Holt: I can't remember, there might be a couple more. Really, it's monospace, serif, and sans serif. Those are the ones you have to care about.
>> Brian Holt: Text-align, right. Cuz you want it to be right-aligned, right?

[00:07:49] If that makes sense. Padding, I want 20 pixels on top and 5 pixels on the side. So, that will be good for the screen. So let's see how we are at so far.
>> Brian Holt: Getting there, right?
>> Brian Holt: This looks correct.
>> Brian Holt: Okay, now we do the calc buttons.

[00:08:18]
>> Brian Holt: Calc-button,
>> Brian Holt: background-color.
>> Brian Holt: I just grabbed something off the internet of how it is actually d8d9db.
>> Brian Holt: Is that correct? d8d9db that's what I got, okay. color: black; height: 100px; width: 24.5%; the reason why we're doing 24.5% is we want that little, tiny black gutter.
>> Brian Holt: border: none, you have to remove borders from buttons.

[00:09:05]
>> Brian Holt: border-radius, we also change that to 0, border-radius is rounding corners. If you give it like a 5 pixels, it will have like a 5 pixel radius at the corners. Buttons by default, have a little bit of rounding at the top of it, and we're trying to get rid of that, cuz we want it to be nice and square.

[00:09:26]
>> Brian Holt: font-size: 40px;, cursor: pointer;. So let's show you what that is, okay, this looks nice. So, notice this has no random corner and notice my miles when I over the button it changes to a pointer. That's how you let people know this is a clickable thing, right, and that's what you want.

[00:09:50] You want people to think like, you want them to look at that and say, I can click on that. And so that pointer is just like little indication with over is like, okay, cool, yeah I can click on that. So just a little helpful thing for people to recognize that they can click on it.

[00:10:06]
>> Brian Holt: Okay, calc-button:hover.
>> Brian Holt: So we're just gonna change the background color a little bit color. When people hover over things, you make it just a little bit lighter as well.
>> Brian Holt: And this will as well make them think that they can click on it, right? That's probably really subtle and a little hard for you to see on the projector but I guarantee you it is changing colors here, at least decently enough that I can tell.

[00:10:39]
>> Brian Holt: Okay calc button:active, active is what happens when it's pushed down. You wanna make it darker so people know that they're pushing something down.
>> Brian Holt: bbbcbe.
>> Brian Holt: Okay, so now if I come over here and push, maybe I'll see that it gets a little bit that it gets darker.

[00:11:16]
>> Brian Holt: So something like this, you wanna be really careful that you choose colors with high contrast, right? So if I do came in here and say color white, just to make an example.
>> Brian Holt: You can't see that, at all, can you?
>> Speaker 2: No.
>> Brian Holt: Okay, I can see it a little bit, to the point that it's mostly readable on my screen right here, but this is an excellent example of why having high contrast is very important because on that screen, you really can't tell.

[00:11:48] So there's a standard called AA, it's put out by the government of Ontario if I'm not mistaking. But pretty much the whole internet adheres to the systemic cuz it's really good. You wanna have a certain amount of contrast between your colors so that people that have some sort of disability with color can still see it.

[00:12:07] So, there's plenty of things on the Internet they say like I said, just search for like, AA access, or A11Y so, colors. A11Y stands for accessibility, the reason why it's that is there is A then eleven letters and Y. I don't wanna write accessibility cuz I spell it wrong every time.

[00:12:29] So that's why they write A11Y, so color contrast checker, this one works fine.
>> Brian Holt: And then so you can see here for normal text, blue on white passes but if I go too light, so you can see that it fails right about there.
>> Brian Holt: So this right here, believe it or not fails accessibility, it's pretty readable even right there, right?

[00:12:53] But someone that had certain types of, like, color blindness might not be able to read that very well, so that's why. There's triple A, triple A is a little bit more strict than double A, for the most part, most people do not do triple A, usually double A is plenty.

[00:13:14] And notice that this still passes, so if we had this color and it was large text, it still passes. So you get a little bit more leeway the larger the text is, just so you know.
>> Brian Holt: Always check this, always do this, it's the responsible, ethical thing to do.

[00:13:33]
>> Brian Holt: So this is not responsible nor ethical. [LAUGH]
>> Brian Holt: So let's go back to black.
>> Brian Holt: Now you might say like well the change from hover is not really that big of a difference, someone that's colorblind might not be able to see that, that's like more okay.
>> Brian Holt: Yeah, it's not gonna prevent someone from using the site.

[00:14:01] Someone not being able to read something, that prevents someone from reading the site or using the site rather.
>> Brian Holt: Okay, double,
>> Brian Holt: I did some guessing and checking I'm gonna save you that process, but this width ends up being 49.7% to get the right kind of margins. And then triple ended up being width 74.8%, 74.8%

[00:14:42]
>> Brian Holt: Okay.
>> Brian Holt: So now we need to get these so that they're on the same line.
>> Brian Holt: Where's my flex on this?
>> Brian Holt: That's down further.
>> Brian Holt: So, let's just put that on right now, we're gonna put,
>> Brian Holt: calc-button-raw, and this is gonna be display: flex. align-content: stretch, cuz we want them to be the same height.

[00:15:24] That's actually not gonna do anything cuz they all have heights anyway but, nonetheless we're gonna do stretch. justify content: space-between, right? Because we want it to go all the way to the edges and then have all the gutters in the middle.
>> Brian Holt: And margin-bottom to be about 0.5%.

[00:15:54]
>> Brian Holt: calc-row is what I called it, I'm sorry.
>> Brian Holt: Okay that got a little bit more dense, it's what we wanted. It's starting to look more and more what we want it to look like.
>> Brian Holt: We did that, we did that. So the last thing that we're gonna do up here where we did all the colors, this one right here.

[00:16:17] [COUGH] So we want to change calc-button, but we wanna change the last one of them, right? The last one in the row to be orange, right? So, how is this nice effect of everything being orange on this last row. And so we're gonna use last-child, right? We want that background color to be more of an orangey color.

[00:16:43] So, that's gonna be df974c, and that's a nice orange color.
>> Brian Holt: Cool, right? Just so you know, this does have a color picker, how do you get it to come up? I think you just hover it, yeah, there you go. So you can actually just mess with the color picker right here.

[00:17:07] This is something that's built into code but that's really nice, right?
>> Brian Holt: Something else is you can combine these pseudo elements or pseudo classes rather. So a calc-button:last-child, and then I can do :hover as well, to get the hover effect. And I'm just gonna make that a little bit lighter for the same reasons.

[00:17:27] So background color dfb07e, hit that pound. We also wanted to make the color white here, color, white. And gonna give it a darker one as well for calc-button:last child:active. And that background color, it's gonna be a little bit darker. It's gonna be dd8d37.
>> Brian Holt: So refreshing, now if you hover, you can probably see that it gets a little bit lighter.

[00:18:14] If you push on it, it gets darker.
>> Brian Holt: Cool, right? Another note on accessibility. Notice when I click on this, there's a little blue glow around it. People try to remove this, there is a CSS property to remove, this is called appearance. Don't and never, never do that.

[00:18:35] The reason why is because when people are tabbing around your site. So I'm hitting tab right now and moving, you can see the blue outline moving. People that can't use mice have to do it this way. This is how they move around the site. And so if you say appearance none, they can't tell where they are, right?

[00:18:51] So even though you find that like it doesn't fill in with your aesthetic or whatever, you should never, never remove it. And if anyone tells you to remove it, throw your laptop at them. That's effective.
>> Speaker 2: [LAUGH]
>> Brian Holt: So yeah, that's effective.
>> Brian Holt: Okay, so now we have this nicely laid out calculator.

[00:19:15] With all the gutters are looking nice. It's kinda well spaced out, everything kinda fits together, and nothing I showedyou here is revolutionary, right? It's all just a combination of various things that I've taught you already. Now, if it wasn't immediately apparent to you how to solve this problem, that's okay.

[00:19:37] Because I've shown you a bunch of different tools, and I really haven't much shown you how all the tools work together yet. This is very much a bunch of properties working together to create this synthetic hole. And that just comes from doing it lots of times, okay? So this is just practice.

[00:19:54] But, if I'm you in your position, it's pretty cool you can sit there and think as I have the tools, I know how to do there, I can get this. I just have to do a little bit more experience before I figure out how I can put the things that I know together to get this sort of things.

[00:20:13] Okay, so that's it for our CSS.
>> Brian Holt: So what we're gonna do now is we're going to come in and do the JavaScripts.
>> Speaker 3: Can I ask a question really quick?
>> Brian Holt: Please.
>> Speaker 3: What part of the calculator does the double and the triple affect with the percentages, what can you do?

[00:20:38]
>> Brian Holt: This one's a double right, so it's a double wide button, and this is triple wide.
>> Speaker 3: Okay and then, okay so you just instead of, is there a way to tell it to say hey, wherever the 6 ends for example, that's where we want the 0 to end?

[00:20:56] Or is this we can do here?
>> Brian Holt: Yes, that's called grid. And so that's the new technique that you can basically say I have this grid that's that would be like a four by four grid, right, four by four? Four by four grid, right? And inside of that grid I want this one to take up 2 at the top left, and you just kind of laid out how you would lay out a spreadsheet, pretty much.

[00:21:25] And then, it will just kind of lay itself out like a rigid grid. So that's how I would definitely use a grid for that. For using Flex, you can also try and use the Flex number system that I was showing you before. It's hard to get that to line out on a hard grid like this.

[00:21:44] It's really important that these gutters line up, otherwise it looks really strange. So that's why I'm using hard percentages of width. Does that answer your question?
>> Speaker 3: Mm-hm.
>> Brian Holt: Okay, cool. That's a good question.