1
00:00:00,060 --> 00:00:07,560
Hello and welcome this lesson we're setting up the structure for our CSB making application, opening

2
00:00:07,560 --> 00:00:08,310
up the ED.

3
00:00:08,310 --> 00:00:13,890
Let's create a few dips in our HTML, so having a class of output.

4
00:00:14,340 --> 00:00:16,650
So we're going to put some information to the user.

5
00:00:16,980 --> 00:00:23,220
Another one is we need a button to create interaction for the user and this one can just be downloaded

6
00:00:23,220 --> 00:00:24,740
CSFI and that's it.

7
00:00:24,750 --> 00:00:30,450
We don't need a whole lot for this application as there's two interactions that we need with the user.

8
00:00:30,720 --> 00:00:37,090
We need a way to communicate with them as well as a way for them to initiate the download of the application.

9
00:00:37,470 --> 00:00:42,540
So next, let's use JavaScript and setting up connection to the elements.

10
00:00:42,600 --> 00:00:48,780
This one, we can give it a name of output using document query selector selecting the element with

11
00:00:48,780 --> 00:00:52,200
a class of output into an object called output.

12
00:00:52,530 --> 00:00:57,180
Also, we're going to select the button so we can add the event listener to that button using query

13
00:00:57,180 --> 00:00:58,440
selector as well.

14
00:00:58,680 --> 00:01:01,680
We're selecting the element that has a tag of button.

15
00:01:01,830 --> 00:01:02,970
We don't have any other buttons.

16
00:01:03,180 --> 00:01:05,220
If we did, we could be more specific here.

17
00:01:05,220 --> 00:01:11,060
We can give it an ID or a class or any other way to distinguish it from other elements on the page.

18
00:01:11,310 --> 00:01:17,040
So once we've added those in as objects, all we're going to see is download CSV file as well.

19
00:01:17,040 --> 00:01:24,060
Let's make sure that we've got our output available as well as our button element as well available.

20
00:01:24,180 --> 00:01:27,300
Let's also update some of the element contents.

21
00:01:27,720 --> 00:01:34,950
So taking the element style, updating the background color and with CSV files usually like to make

22
00:01:34,950 --> 00:01:43,230
them green, taking the button style, updating its colour and setting that font color to be white.

23
00:01:43,560 --> 00:01:44,940
Also button style.

24
00:01:44,940 --> 00:01:49,920
And there's a number of different style properties and obviously it's easier to do this within the style

25
00:01:49,920 --> 00:01:51,190
tags within CNS.

26
00:01:51,430 --> 00:01:56,880
Of course this is a JavaScript course, so we want to keep it as JavaScript as possible.

27
00:01:56,880 --> 00:02:00,690
So updating the padding and setting that to five pics.

28
00:02:00,930 --> 00:02:06,360
So just as you would any other style properties that you adding and S.O.S, you can update the style

29
00:02:06,360 --> 00:02:09,870
as needed to make this a little bit bigger and button style.

30
00:02:09,900 --> 00:02:10,710
Let's do one more.

31
00:02:11,070 --> 00:02:16,080
So font size and there is a difference between when you're doing it within styling as well as when you're

32
00:02:16,080 --> 00:02:21,660
doing in JavaScript, because of course, we can't have those dashes or spaces within the property names.

33
00:02:21,900 --> 00:02:30,360
So that's how we need to make sure that we are being very specific what the elements and that the object

34
00:02:30,360 --> 00:02:32,840
names don't have any spaces or Dashan.

35
00:02:32,880 --> 00:02:34,220
So let's refresh.

36
00:02:34,230 --> 00:02:37,890
Actually, this should be font size, so make a nice big button.

37
00:02:38,010 --> 00:02:42,030
And that's all we really need for the interaction of the application.

38
00:02:42,420 --> 00:02:46,710
And then the last part is let's add an event listener to the button.

39
00:02:46,980 --> 00:02:51,690
So adding an event listener and the event that we're going to listen for is going to be a click and

40
00:02:51,690 --> 00:02:55,380
we're going evoking a function whenever the button gets whatever the button gets clicked.

41
00:02:55,380 --> 00:02:57,150
This is when the download is going to happen.

42
00:02:57,330 --> 00:03:00,990
And we'll write the code for the download in the upcoming lessons, of course.

43
00:03:00,990 --> 00:03:05,790
But for now, whenever the button gets clicked, we get download being output into the console.

44
00:03:05,820 --> 00:03:10,230
So go ahead and set up the basic structure of your page and going to be ready to move on to the next

45
00:03:10,230 --> 00:03:17,610
part where we are going to be building out and building up an array that we can create a CSV file out

46
00:03:17,610 --> 00:03:17,760
of.

47
00:03:17,940 --> 00:03:18,840
So that's all still to come.