1
00:00:00,120 --> 00:00:05,760
Hello and welcome this lesson, we're going to set up the HTML interface in order to build our kookie

2
00:00:05,940 --> 00:00:08,380
building and controlling application.

3
00:00:08,700 --> 00:00:10,310
So first we need to some inputs.

4
00:00:10,310 --> 00:00:14,850
So setting up just some HTML inputs, they can all be type text.

5
00:00:15,470 --> 00:00:22,330
Also give it a name so we can identify it using our JavaScript so we can call this one.

6
00:00:22,350 --> 00:00:28,440
This is going to be representing the cookie name and I also also set some default values in here.

7
00:00:28,440 --> 00:00:31,900
So test one, creating a few other inputs.

8
00:00:31,900 --> 00:00:34,890
So we're going to need an input for the cookie value.

9
00:00:35,160 --> 00:00:41,010
So we've got a cookie name and this is cookie value and this can be test value.

10
00:00:41,280 --> 00:00:46,020
And I'm also going to change this one to test name so we could distinguish between the two.

11
00:00:46,150 --> 00:00:48,060
And we also need another input.

12
00:00:48,060 --> 00:00:51,120
And this is for the expiry date of the cookie.

13
00:00:51,420 --> 00:00:53,660
So this can be a date input type.

14
00:00:54,060 --> 00:01:01,230
So using H HTML5, so we get a date type and this is this could just be known as Cookie and we're not

15
00:01:01,230 --> 00:01:03,230
setting any default values for that one.

16
00:01:03,990 --> 00:01:05,970
We also are going to need a few buttons.

17
00:01:05,970 --> 00:01:07,140
So let's add the buttons.

18
00:01:07,140 --> 00:01:12,780
And so the giving it a button and these are all just going to be button class one, two, three.

19
00:01:13,080 --> 00:01:18,480
The first one is going to be to set a cookie and this is going to provide the interaction within the

20
00:01:18,480 --> 00:01:19,210
application.

21
00:01:19,620 --> 00:01:22,110
The other one is get cookie.

22
00:01:23,260 --> 00:01:27,680
Or get cookies, so return back all of the cookie values are currently stored.

23
00:01:28,090 --> 00:01:33,060
There's also delete cookie, so to delete the cookie according to the meme.

24
00:01:33,430 --> 00:01:34,750
So just deleting the one cookie.

25
00:01:35,050 --> 00:01:39,900
So this would be actually get Cookie and then we'll do one more to all cookies.

26
00:01:40,540 --> 00:01:45,170
So this one will show all of the available cookies that are available for the website.

27
00:01:45,550 --> 00:01:51,700
And lastly, let's create an output area, give it a class of output so we can provide some output and

28
00:01:51,700 --> 00:01:54,950
messaging for the user to interact with and see.

29
00:01:55,390 --> 00:01:59,800
So the next step we want to do is select our elements as objects.

30
00:02:00,100 --> 00:02:04,930
And so we've got quite a few of them on the page when I add them in as objects.

31
00:02:05,080 --> 00:02:11,980
So going into our inspector, go to the console and I want to add them as usable objects.

32
00:02:12,490 --> 00:02:16,680
Also, I'm going to add in a few line breaks and we can do that with styling.

33
00:02:16,690 --> 00:02:22,870
So selecting the input, add a display property to it and this display is going to be displayed block.

34
00:02:23,110 --> 00:02:26,640
So that will create new lines for those inputs as well.

35
00:02:26,650 --> 00:02:31,470
I'm going to update the font size to make it a little bit bigger so we can select it at one point five

36
00:02:31,480 --> 00:02:31,920
m.

37
00:02:32,230 --> 00:02:37,630
Let's update the width of that element to be seventy five percent so that they're all in line in the

38
00:02:37,630 --> 00:02:38,440
same width.

39
00:02:38,560 --> 00:02:45,140
Coming up next, we're going to set all of these elements as JavaScript objects so that we can utilize

40
00:02:45,140 --> 00:02:47,530
some within the upcoming lessons.

41
00:02:47,740 --> 00:02:51,880
So that is all still to come and you can also style this as needed.

42
00:02:52,000 --> 00:02:57,280
I'm also going to style the buttons so we do the font size for these as well and add a little bit of

43
00:02:57,280 --> 00:02:57,570
power.

44
00:02:57,610 --> 00:03:04,450
So now we've got some bigger buttons, bigger text, bigger input content, and we're ready to add JavaScript

45
00:03:04,450 --> 00:03:05,200
into the project.

46
00:03:05,230 --> 00:03:06,220
So that's coming up next.