Transcript from the "Calculator HTML & CSS Setup" Lesson
[00:00:00]
>> Brian Holt: I'm gonna do this in my editor over here.
>> Brian Holt: And I'm gonna create a new project.
>> Brian Holt: New Window, there we go.
>> Brian Holt: Okay, and I'm going to save this to my desktop.
>> Brian Holt: New folder, call it calc, and this is gonna be index.html
>> Brian Holt: So I'm just gonna go grab my HTML CSS that I had previously done, cuz we're just going to be worrying about the JavaScript for this particular part.
[00:00:45]
Okay, if you click Raw here, it'll give you just the raw thing here. So I'm just gonna Cmd+A, Cmd+C or Ctrl+C, Ctrl+A, and then I'm just gonna paste that over here into my index.html. Create another file and call this styles.css. Same thing, I'm gonna grab all my CSS out of here.
[00:01:14]
>> Brian Holt: Click the Raw, Cmd copy all of that.
>> Brian Holt: Okay, so let's make sure that all this is yes, style.css. Whatever you call this, just make sure that it's the same link so you could call it calculator.css if you wanted to as well. Okay, and then we're gonna have calculator.js.
[00:01:40]
Make sure that the link's correctly down here, which is, I call it the same thing, so that should work.
>> Brian Holt: So to recap, what I did here is I went and grabbed the index.html, right? Or for you, if you're using your previous one that you built with Jen, just go ahead and work from there, okay?
[00:02:03]
I went and grabbed that HTML and pasted it into a document. I called it index.html, you could call it calculator.html or whatever you want to. Then I went and grabbed the style sheet here, the style.css, I think it's called calculator.css inside the GitHub repo.
>> Brian Holt: Went and grabbed all that CSS that I had on there.
[00:02:30]
>> Brian Holt: Okay?
>> Brian Holt: Made sure that linked correctly here in the header for this stylesheet.
>> Brian Holt: And then down here at the bottom, I linked to a calculator.js, which is what we're about to write.
>> Speaker 2: Is the ./ for the same directory optional?
>> Brian Holt: It is.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, force of habit for me, so this ./ right here.
[00:02:53]
So if you have ../, it means go up a directory, right?
>> Speaker 2: Is it a good habit to have just to keep it so you know it's in the directory when you're looking at the code and not have to go back to your file path?
>> Brian Holt: I don't know.
[00:03:05]
>> Speaker 2: [LAUGH] Okay.
>> Brian Holt: It's equivalent. I really can't think of an advantageous reason why I do this, and that isn't to say I always do it either. [LAUGH]
>> Brian Holt: I think for me, if I'm gonna make some sort of feeble justification of why I do it, I can see that and immediately know that's the path.
[00:03:28]
Whereas if I do this, I kind of have to parse a little bit, is that a path or not? But that's quite feeble, so yeah, do what sounds good to you.
>> Speaker 3: Two dots and a slash would mean it's in the folder above?
>> Brian Holt: Go up one, yep.
[00:03:50]
>> Brian Holt: Yep, dot represents wherever you are, right?
>> Brian Holt: Cool, so just to show you how I wrote the JavaScript here. If you're using your own HTML and CSS, you're gonna have to adapt some of the things I'm doing to how you wrote your HTML, right? So I have a screen class up here, which represents the running total, right?
[00:04:14]
Like that's gonna be where you gonna be displaying, that's the black part at the top. And then I have all these calc buttons down here that have all of the numbers, and divisions, and back spaces, and C's, and stuff like that.
>> Brian Holt: And that's pretty much it. That's for the HTML, the CSS, I mean, you can go check that out later.
[00:04:36]
I don't think I did anything particularly difficult here. I used flexbox because I can write flexbox in my sleep and I can never remember how to write grid. So that's why I use flexbox everywhere.
>> Brian Holt: When it comes to CSS, you should 100% trust Jen over me, for sure.
[00:04:55]
[BLANK AUDIO]