1
00:00:00,570 --> 00:00:05,940
Welcome in this lesson, we're going to be setting up our HTML and success in preparation of building

2
00:00:05,940 --> 00:00:08,610
out a calculator using JavaScript.

3
00:00:08,820 --> 00:00:14,360
Now, of course, we're going to keep all of the HTML and access to an absolute minimum.

4
00:00:14,820 --> 00:00:21,570
So setting up a basic container for our calculator to be able to place that in there.

5
00:00:21,780 --> 00:00:27,160
And then also a little bit of styling to update the look and feel of the calculator itself.

6
00:00:27,510 --> 00:00:31,740
So we are going to be generating most of this dynamically using JavaScript.

7
00:00:31,950 --> 00:00:36,440
So you're not going to see a whole lot of out output right in the beginning.

8
00:00:36,450 --> 00:00:40,260
So let's set up a width and we're going to have predefined widths for this.

9
00:00:40,560 --> 00:00:47,830
So 350 picks and we'll also make the height 350 picks and then background color.

10
00:00:47,850 --> 00:00:49,460
And let's do the background color.

11
00:00:49,470 --> 00:00:53,670
We'll do it a dim gray color and then add in a little bit of padding.

12
00:00:53,670 --> 00:00:55,230
So five picks of padding.

13
00:00:55,260 --> 00:00:59,010
So when we refresh, there's our basic calculator structure.

14
00:00:59,010 --> 00:01:03,390
And I can make this a little bit smaller as well, because we can have a little bit more space here

15
00:01:03,570 --> 00:01:07,860
on the left hand side as we're building the application out so it's more visible.

16
00:01:08,280 --> 00:01:10,740
The other thing that we need is we need an output area.

17
00:01:10,740 --> 00:01:16,920
So this is going to be the screen area of the calculator and we can set a line height for this one.

18
00:01:16,950 --> 00:01:23,550
So how about we do 40 picks and a background color for this and we can set a background color of white

19
00:01:23,550 --> 00:01:27,450
and the text color can be black or green, whatever you prefer.

20
00:01:27,540 --> 00:01:29,820
Height of it is going to be 40 pixels.

21
00:01:29,820 --> 00:01:31,290
So it's the same as the line height.

22
00:01:31,290 --> 00:01:38,550
And we can also set a margin at the bottom so that the buttons there's some spacing between the screen

23
00:01:38,550 --> 00:01:41,370
and the buttons setting up font size.

24
00:01:41,560 --> 00:01:46,170
What we do on point for M for the font size we text align.

25
00:01:46,180 --> 00:01:50,670
So within the calculator, typically the text is aligned to the right hand side.

26
00:01:50,670 --> 00:01:54,270
So text aligned to the right and selecting a font family.

27
00:01:54,480 --> 00:02:01,230
And how about we do Monov space so we have more of a digital type of text output and podding and we

28
00:02:01,230 --> 00:02:03,960
can do eight picks for the left and the right.

29
00:02:03,990 --> 00:02:06,270
So we're obviously not going to see the output quite yet.

30
00:02:06,270 --> 00:02:10,450
And this is one of the things that we're going to be using in our JavaScript up and coming.

31
00:02:10,680 --> 00:02:12,330
We also need to have buttons.

32
00:02:12,330 --> 00:02:16,860
So these are going to be the buttons that are going to be used on the calculator.

33
00:02:17,130 --> 00:02:19,870
So let's do some quick styling on these.

34
00:02:19,890 --> 00:02:24,720
And of course, if you want to see the way these are going to look, you can always add the elements

35
00:02:24,720 --> 00:02:30,690
in on the page and we can remove them afterwards once we create the JavaScript or you can just trust

36
00:02:30,690 --> 00:02:35,840
me and that this is fairly decent format for the buttons.

37
00:02:35,850 --> 00:02:38,640
And of course, you can adjust them as needed as well.

38
00:02:39,160 --> 00:02:40,680
Set a background color.

39
00:02:40,710 --> 00:02:44,700
And so this is the button color so we can do kind of an off-White there.

40
00:02:44,700 --> 00:02:47,900
Their Isar text line can be center.

41
00:02:48,010 --> 00:02:49,410
We want to set the cursor.

42
00:02:49,560 --> 00:02:54,330
So whenever we're on top of it, we get the pointer icon and vertical a line.

43
00:02:54,330 --> 00:02:56,480
We'll get a middle a line that vertical.

44
00:02:56,640 --> 00:03:01,110
And that means that we need to set a line height so that our button has its text.

45
00:03:01,110 --> 00:03:01,800
Exactly.

46
00:03:01,800 --> 00:03:02,310
Center.

47
00:03:02,340 --> 00:03:07,110
So essentially there's all of the HTML and success that we're going to need.

48
00:03:07,350 --> 00:03:10,290
And the rest of the course, of course, is JavaScript.

49
00:03:10,500 --> 00:03:12,780
Where are we going to build this calculator out?

50
00:03:12,930 --> 00:03:18,500
And we're going to use apply these classes to the elements that we're going to be creating using JavaScript.

51
00:03:18,510 --> 00:03:19,650
And that's coming up next.

52
00:03:19,660 --> 00:03:25,890
So go ahead and set up a basic container to add your calculator in and you can create some of the styling

53
00:03:25,890 --> 00:03:27,890
and you can also do that at a later point as well.