1
00:00:00,330 --> 00:00:01,050
Welcome back.

2
00:00:01,050 --> 00:00:06,930
In this lesson, we are going to list the cookies, this could be very similar to get Cookie where this

3
00:00:06,930 --> 00:00:09,570
case we're not going to be looking for any specific name.

4
00:00:09,810 --> 00:00:14,780
And instead of just getting a specific one, we want to list out all the available cookies.

5
00:00:14,790 --> 00:00:16,670
So the format is going to be roughly the same.

6
00:00:16,890 --> 00:00:21,960
So let's copy what we did in the last lesson and get cookies and go down to list cookies.

7
00:00:22,350 --> 00:00:24,710
Then we can paste that in and move it over.

8
00:00:24,780 --> 00:00:27,060
So now we've got ability to list cookies.

9
00:00:27,240 --> 00:00:31,200
So the format is the same thing where we get the document cookie object.

10
00:00:31,200 --> 00:00:35,160
We split it by the colon and remember, we're listing all of that out.

11
00:00:35,160 --> 00:00:36,870
So we do list cookies.

12
00:00:37,140 --> 00:00:39,980
We see that we get all of the cookies being listed out.

13
00:00:40,230 --> 00:00:42,100
So these are all the ones that are currently set.

14
00:00:42,600 --> 00:00:45,330
This is all of the cookies that we've got that we found.

15
00:00:45,480 --> 00:00:51,780
So notice it's within a string format and then as we update it so we can get rid of that console message

16
00:00:51,930 --> 00:00:57,690
and as we loop through each one, we do the same thing where we trim, we split, and we don't have

17
00:00:57,690 --> 00:01:00,630
a condition here where we're looking for specific cookie.

18
00:01:00,810 --> 00:01:03,630
We want to build the cookie content out.

19
00:01:05,340 --> 00:01:11,250
So let's do that and using our JavaScript, we're going to create a div using.

20
00:01:12,420 --> 00:01:18,000
And equal that to document create element to JavaScript, way to create elements, we're going to create

21
00:01:18,000 --> 00:01:21,230
a bunch of diffs and place that inside of that output.

22
00:01:21,240 --> 00:01:22,950
So it's nice and neatly formatted.

23
00:01:23,580 --> 00:01:29,720
Let's set some attributes to it so we can add a class name where we can do set attribute.

24
00:01:29,910 --> 00:01:36,060
We don't have any classes quite yet, so we can go ahead and we can add in a class for that and set

25
00:01:36,060 --> 00:01:39,690
up a class of cookie and then adding an event listener as well.

26
00:01:39,700 --> 00:01:41,850
So Divx add event listener.

27
00:01:41,850 --> 00:01:47,280
So whenever one of those gets clicked, then we can show some more information that's contained within

28
00:01:47,280 --> 00:01:47,780
the cookie.

29
00:01:47,790 --> 00:01:49,180
So outputting function.

30
00:01:49,200 --> 00:01:50,370
And this is just additional.

31
00:01:50,370 --> 00:01:57,900
So whenever any of those get clicked, we can output the cookie value so the temp cookie into the console

32
00:01:58,170 --> 00:02:01,000
so that will output that information into the console.

33
00:02:01,590 --> 00:02:09,000
And then lastly, let's output the inner text or text content of the cookie of the div that we're creating.

34
00:02:09,150 --> 00:02:11,100
So let's create some inner text here.

35
00:02:11,250 --> 00:02:15,150
And one of the things we need to do is list out the cookie.

36
00:02:15,180 --> 00:02:18,180
So the cookie name, so that's the name of it.

37
00:02:18,750 --> 00:02:21,230
And then we also want to set a value for it.

38
00:02:21,420 --> 00:02:26,100
So just as we did here where we did the Decode, we can add that line of code in.

39
00:02:26,320 --> 00:02:31,950
So it's going to output the contents and add it into the div that we just created and we can remove

40
00:02:31,950 --> 00:02:33,930
rest that we don't need that information.

41
00:02:34,080 --> 00:02:41,640
And then lastly, what we want to do is take our output element and append a child to it and the child

42
00:02:41,640 --> 00:02:44,660
that we want to pendas this object that we just created.

43
00:02:44,940 --> 00:02:47,730
So let's see what that looks like and do all cookies.

44
00:02:48,030 --> 00:02:50,400
And we see we get a listing of all of the cookies.

45
00:02:50,610 --> 00:02:55,200
So we don't need the no cookies found, of course, so we can clear that.

46
00:02:55,200 --> 00:02:58,290
And all cookies are cookies are cookies.

47
00:02:58,620 --> 00:03:04,320
And actually, instead of not listing anything, let's let's just leave it blank so it clear that out

48
00:03:04,560 --> 00:03:06,420
so that whatever we do are cookies.

49
00:03:06,600 --> 00:03:10,200
And if we set a new cookie with a new name, a new value.

50
00:03:10,350 --> 00:03:11,340
So set cookie.

51
00:03:11,430 --> 00:03:13,860
And now when we list it, we see all of those cookies.

52
00:03:14,040 --> 00:03:17,760
And of course, when we click it, you see that we're listing them out.

53
00:03:18,000 --> 00:03:23,490
So we could also set it to automatically delete the cookie if we wanted to, so we could erase the cookie

54
00:03:23,490 --> 00:03:26,480
by the cookie name because we are passing that in.

55
00:03:26,730 --> 00:03:32,700
So if we wanted a quick and easy way to erase the cookie, we could pass that information into the function

56
00:03:32,700 --> 00:03:33,860
whenever it gets clicked.

57
00:03:34,110 --> 00:03:38,040
So as we click, the elements are the cookies that we created.

58
00:03:38,040 --> 00:03:45,390
When we're listing the cookies, we've got the value of temp cookie and we can remove out the cookie

59
00:03:45,630 --> 00:03:48,070
with the cookie information.

60
00:03:48,270 --> 00:03:52,580
So now we've got a quick and easy way and got a launch that live host again.

61
00:03:52,830 --> 00:03:57,600
So notice sometimes with brackets it will open up and it opens up under another port.

62
00:03:58,110 --> 00:04:03,420
But either way, you still see that you've got all of the cookies there and we can set a new cookie

63
00:04:04,230 --> 00:04:06,030
and then we list out all of the cookies.

64
00:04:06,180 --> 00:04:10,280
And now whenever I click on these, that's going to actually delete and remove the cookie.

65
00:04:10,410 --> 00:04:14,160
So if I do all cookies, it's removed out those new ones that were outputting.

66
00:04:14,790 --> 00:04:20,490
So lastly, let's add in some styling to this, because those are fairly compressed there.

67
00:04:20,610 --> 00:04:23,760
And we did add in a class when we created the cookies.

68
00:04:24,060 --> 00:04:27,030
And you don't have to add in the ability to remove it when you click it.

69
00:04:27,480 --> 00:04:29,220
That's another option that you could have.

70
00:04:29,430 --> 00:04:36,750
So creating a class for the cookie, let's add some padding around that and we can set the font size.

71
00:04:36,960 --> 00:04:40,200
Also, maybe we want to set the font family to distinguish that.

72
00:04:40,410 --> 00:04:42,810
A suit that looks like so do all cookies.

73
00:04:42,810 --> 00:04:45,210
We've got our cookies information.

74
00:04:45,600 --> 00:04:46,710
There's no cookies there.

75
00:04:46,710 --> 00:04:48,240
So we're just getting undefined.

76
00:04:48,720 --> 00:04:56,100
So we can also see that if there is no value for that index, then we can just simply put a value of

77
00:04:56,100 --> 00:04:56,940
blank for it.

78
00:04:57,330 --> 00:05:03,600
So instead of doing get cookie and if there's no value, if we delete it and if we do get cookie, we

79
00:05:03,600 --> 00:05:05,250
see we're getting all of those values.

80
00:05:05,250 --> 00:05:08,190
And now when we do our cookies, we get undefined.

81
00:05:08,190 --> 00:05:10,050
So we might want to take care of that.

82
00:05:10,230 --> 00:05:17,010
And instead of having a listing of all of the cookies that we're trying to output here, we might want

83
00:05:17,010 --> 00:05:21,120
to just simply skip it if there's no value associated with it.

84
00:05:21,390 --> 00:05:22,980
So let's add that in as well.

85
00:05:22,990 --> 00:05:30,090
That's a quick fix where we check to see if temp cookie one has a value length.

86
00:05:30,390 --> 00:05:38,250
So if temp cookie one length is greater than zero, then we know that we can add it into the array.

87
00:05:38,250 --> 00:05:40,020
Otherwise we're just going to skip that part.

88
00:05:40,260 --> 00:05:45,180
So now whenever I refresh and I hit all cookies, if there's nothing there, we don't see anything being

89
00:05:45,180 --> 00:05:45,900
output there.

90
00:05:46,020 --> 00:05:50,070
If I set a cookie and if I delete it and all cookies, it's just going to be blank.

91
00:05:50,400 --> 00:05:52,350
So set a cookie and list it out.

92
00:05:52,350 --> 00:05:54,720
You can see that the output is being output there.

93
00:05:55,290 --> 00:06:02,520
Also, I'm going to update this to be for output so that all the content is looks the same, so all

94
00:06:02,520 --> 00:06:04,110
the messaging looks the same way.

95
00:06:04,650 --> 00:06:07,350
So go ahead and add this final update into your project.

96
00:06:07,500 --> 00:06:09,900
And then coming up next, we'll do a quick code review.

97
00:06:09,990 --> 00:06:10,800
So that's still to come.