Calculator Setup

[00:00:02]
>> Jen Kramer: So the last thing we're gonna work on is this calculator. In order to get started, make sure you download your Zip, the Zip files here from our instructions up here at the very top of the GitHub page. Go ahead and download this. As you know next week, you're going to need working with JavaScript with Brian Hope, and Brian is going to teach you how to make a fully functional calculator that you can.

[00:00:27]
You're going to coat it with JavaScript. It will do all the adding and subtracting and multiplying and dividing, which is totally awesome. But before you start that calculator and all that programming that goes with it, you actually have to make a calculator, yeah. Okay, so we're gonna do another one of these exercises.

[00:00:45]
We did one with the blog earlier where I gave you the picture and said code the thing. We're gonna do exactly that same kind of exercise here with this calculator. So this is the way the calculator is going to look. You'll see the calculator here. You'll see that at the top it's got sorta the area where the numbers are gonna go.

[00:01:03]
As you click on the numbers and you type them in, they're gonna show up there on the top right, correct? We've got, a row of functions, so we have divide, multiply, subtract, and add. We have an equal sign. We have a backspace key, we have a clear key, and we have some numbers, right?

[00:01:21]
Okay, so, according to the instructions here, as it says, a few things to know about this calculator. Here are some things we need to know. So we are gonna have to first of all look up some symbols for math, okay? Because clearly the divide key and multiply key and so forth, they are not here on your keyboard so we are gonna actually have to look these up and code those symbols.

[00:01:46]
So that's something we are gonna need to do. These calculator buttons, they're going to need to be clickable, right? We need to be able to click those buttons just like a regular calculator in real right life, right? You guys have actually worked with the actual calculator, right?
>> [LAUGH]

[00:02:05]
>> Jen Kramer: Those are still things. Okay, and it was a long time ago. And then there's some colors that are used in the design. Those are all spelled out for you here. I've given you all of the color codes and I told you that the overall width of this calculator is 400 pixels.

[00:02:24]
Okay? So, then I have a suggested approach down here at the bottom.
>> Jen Kramer: And so, what I've suggested is that we create a wrapper with a width of 400 pixels to set up the calculator. And we're going to determine how many rows and columns we need. And so we're gonna work through these instructions.

[00:02:46]
So part of this exercise is trying to get you to think through this type of specification. So this is very typical, the graphic designer has designed this beautiful calculator for us, here it is. And we know that ultimately it's gonna get coded with JavaScript, and the buttons are gonna need to be clickable.

[00:03:06]
We know that, but we haven't been given anything else in terms of how to code it. And we have to figure out all the rest of it on our own.