1 00:00:00,150 --> 00:00:02,380 Great job on making it through this section. 2 00:00:02,520 --> 00:00:07,080 This is the part where we do a quick code review and a review of the code that we've been working on 3 00:00:07,080 --> 00:00:08,370 in the earlier lessons. 4 00:00:08,640 --> 00:00:13,590 So occasionally what happens with BRAC brackets is it will drop their live preview. 5 00:00:13,770 --> 00:00:18,690 And if you in order to open that up, you have to click that life preview button again or you can go 6 00:00:18,690 --> 00:00:19,470 into brackets. 7 00:00:19,470 --> 00:00:26,670 Life Preview as we do need to be running on an HTP protocol and Brackett's does provide that option 8 00:00:26,670 --> 00:00:27,390 to run it. 9 00:00:27,390 --> 00:00:33,120 Or you could run it with a local machine or on any other Web server where you've got a domain listed. 10 00:00:33,300 --> 00:00:38,190 So you've got to make sure in order to interact with the cookies that you are running within the HTTP 11 00:00:38,190 --> 00:00:43,830 protocol and make sure that you're not running in the final protocol as your cookies won't work. 12 00:00:43,860 --> 00:00:49,230 So going into the code and of course, the JavaScript will still work in the final protocol because 13 00:00:49,230 --> 00:00:50,430 this is all browser based. 14 00:00:50,700 --> 00:00:53,340 So going into the console, let's clean up that. 15 00:00:53,340 --> 00:00:57,960 That's an error that's thrown when it checks to see that there's no icon there. 16 00:00:58,230 --> 00:01:00,960 That's not having to do with our code at all. 17 00:01:01,620 --> 00:01:07,950 So we set up a little bit of styling to make our interface look nice, set up some HTML so we got some 18 00:01:07,950 --> 00:01:14,100 inputs there in order to manipulate, get our cookies, cookie cookies added in some buttons for interaction. 19 00:01:14,220 --> 00:01:19,080 So those are the four actions that we want to take where we do set cookie, get cookie, delete cookie 20 00:01:19,080 --> 00:01:24,720 and list out all the cookies created an element in order to output the content, then went into JavaScript 21 00:01:24,720 --> 00:01:27,830 and selected all the elements as objects and javascript. 22 00:01:28,050 --> 00:01:32,580 So either using query selector, if we only had the one element they're trying to select or query, 23 00:01:32,580 --> 00:01:37,860 select or all, if there was more than one element that we're trying to select and creating a node list. 24 00:01:38,100 --> 00:01:42,840 So that gave us the ability to loop through that node list and we could add event listeners to each 25 00:01:42,840 --> 00:01:49,440 one of the buttons and then using button action in order to handle the retrieval of what the intended 26 00:01:49,440 --> 00:01:52,070 button was and what action the user is trying to take. 27 00:01:52,110 --> 00:01:56,850 Also added in a default way to update that input, the data input. 28 00:01:56,850 --> 00:02:02,280 So it's not just blank and it's automatically set to one week ahead or seven days ahead. 29 00:02:02,610 --> 00:02:11,550 So we used the JavaScript date object and added seven, six, seven days to the get date, which was 30 00:02:11,550 --> 00:02:12,220 the day of the week. 31 00:02:12,270 --> 00:02:17,910 Also, we had to do a quick fix for the date where we made sure that in case the day was coming back 32 00:02:17,910 --> 00:02:20,580 as a single digit, we are adding a zero. 33 00:02:20,580 --> 00:02:23,820 And that's where we're using the JavaScript method slice minus two. 34 00:02:23,970 --> 00:02:29,760 So that always ensures that if the next week is two characters, we're going to return back those two 35 00:02:29,760 --> 00:02:30,330 characters. 36 00:02:30,540 --> 00:02:34,200 But if it's one, it's going to add it to the zero and then we're going to return back. 37 00:02:34,200 --> 00:02:37,500 Both the zero and the character did the same thing for the month. 38 00:02:37,680 --> 00:02:40,710 And with get month, we start at zero. 39 00:02:40,710 --> 00:02:43,710 So we want it actually to start with the month of one. 40 00:02:43,710 --> 00:02:45,570 So that's where we needed to add the one. 41 00:02:45,570 --> 00:02:50,400 And the idea here was the same thing for the slice so that we don't end up with a single character. 42 00:02:50,640 --> 00:02:53,090 The get full year gives us the four digits. 43 00:02:53,250 --> 00:02:54,240 So that was ideal. 44 00:02:54,390 --> 00:03:00,570 And once we had that and we built that, we could set the value using year, month, day and dashes 45 00:03:00,570 --> 00:03:05,970 and that would automatically update that input date to the current date plus seven days. 46 00:03:05,970 --> 00:03:07,440 Then the next part of the code. 47 00:03:07,440 --> 00:03:10,550 And the most important part, of course, was the button interactions. 48 00:03:10,560 --> 00:03:16,480 So this is where we selected that element that had triggered the event. 49 00:03:16,510 --> 00:03:18,000 So he's got the source element. 50 00:03:18,000 --> 00:03:23,550 So it's a JavaScript method that you can use in order to get the source element as well that triggered 51 00:03:23,550 --> 00:03:23,970 the event. 52 00:03:24,000 --> 00:03:25,860 You could also use this object. 53 00:03:26,010 --> 00:03:27,510 So we got the inner text of it. 54 00:03:27,510 --> 00:03:31,890 And we also only want to get the inner text up to the first space. 55 00:03:31,890 --> 00:03:34,560 So we've got set cookie, get cookie, delete cookie. 56 00:03:34,560 --> 00:03:40,590 So there's no need to get the rest of the HTML, the inner texts contained within that button. 57 00:03:40,590 --> 00:03:42,810 So that's where we're breaking it by the spacing. 58 00:03:42,810 --> 00:03:43,800 You don't have to do that. 59 00:03:43,800 --> 00:03:47,910 You could look for the button clicks or you don't have to list these out for the user. 60 00:03:48,150 --> 00:03:50,160 So this is depending on what your preferences. 61 00:03:50,160 --> 00:03:55,380 So we were breaking that and this also gave us a nice option to experiment a little bit more with some 62 00:03:55,380 --> 00:03:57,420 more different JavaScript methods. 63 00:03:57,420 --> 00:04:00,000 And of course, that's the objective of this course. 64 00:04:00,000 --> 00:04:03,870 And the section is to practice more about JavaScript next. 65 00:04:03,870 --> 00:04:09,270 We created a default blank object and this is where all of the input values could go. 66 00:04:09,270 --> 00:04:14,040 And as we loop through the inputs, we get the name, we get the value. 67 00:04:14,040 --> 00:04:18,090 If the value is going to be the cookie expire. 68 00:04:18,090 --> 00:04:22,440 So if it's this input, then we need to treat this separately because this is a date object. 69 00:04:22,440 --> 00:04:25,410 So we want to make sure that we get it as a date value. 70 00:04:25,410 --> 00:04:28,980 So value as date is the way to retrieve that information. 71 00:04:28,980 --> 00:04:34,920 And once we have the temp name and the temp value that we added in as an object, we're outputting that 72 00:04:34,920 --> 00:04:37,530 object that we're submitting into the console. 73 00:04:37,530 --> 00:04:38,730 So we don't need those anymore. 74 00:04:38,760 --> 00:04:44,490 And then next, what we did here is we've got the temp value of the content that's contained within 75 00:04:44,490 --> 00:04:47,160 the button that was triggered, though, that. 76 00:04:47,190 --> 00:04:50,820 So we're checking to see if it's set, get delete or all. 77 00:04:50,820 --> 00:04:56,850 And depending on what it is, we launch the corresponding function and we pass in the object values 78 00:04:56,850 --> 00:04:57,510 that are needed. 79 00:04:57,510 --> 00:04:59,370 So for most of them, it was just cookie name. 80 00:04:59,480 --> 00:05:04,580 That was needed to get delete, just need a cookie name, that cookie needed a few other things where 81 00:05:04,580 --> 00:05:08,560 it needed the name, it needed the value and the cookie expire value. 82 00:05:08,840 --> 00:05:13,790 So that was what those values from that object that we needed in order to set a cookie. 83 00:05:13,820 --> 00:05:16,780 So if we're setting a cookie, we're passing in some parameters. 84 00:05:16,790 --> 00:05:19,430 So, of course, name value and expiry. 85 00:05:19,460 --> 00:05:26,990 And if the value is larger than zero and we should also check maybe the name is larger to zero, that's 86 00:05:26,990 --> 00:05:29,900 another thing that can be added into update and extend on this. 87 00:05:30,170 --> 00:05:35,240 So all we did is get the document cookie object and set a name. 88 00:05:35,240 --> 00:05:40,340 And this parameter it does need to set with be set within this type of format, within the string format. 89 00:05:40,500 --> 00:05:45,050 So it is expecting a name and that's going to equal to and this is where you need to make sure that 90 00:05:45,050 --> 00:05:46,330 you use the end code. 91 00:05:46,340 --> 00:05:47,470 You are a component. 92 00:05:47,480 --> 00:05:51,860 So that gets rid of the spacing and adds that percent twenty four spacing and so on. 93 00:05:51,860 --> 00:05:53,730 So it encodes it properly. 94 00:05:53,750 --> 00:05:56,660 And then of course this is a string that's being set within the cookie. 95 00:05:56,690 --> 00:06:00,010 So we've got a path, we've got expires and then that expires as well. 96 00:06:00,020 --> 00:06:06,280 We were using two UTC string, which is a JavaScript method that converts the date object into a UTC 97 00:06:06,290 --> 00:06:06,980 string value. 98 00:06:06,980 --> 00:06:10,510 And then we were adding into that output what happened. 99 00:06:10,530 --> 00:06:11,900 So user knows what happened. 100 00:06:11,900 --> 00:06:17,030 And if we didn't add the cookie, then also a message back to the user so they know what happened. 101 00:06:17,240 --> 00:06:19,340 And then we created the functions that we had. 102 00:06:19,520 --> 00:06:20,820 We've got to get Cookie. 103 00:06:20,870 --> 00:06:25,910 So this one was where we came in and we got the document cookie object. 104 00:06:26,120 --> 00:06:27,770 We split it by the colon. 105 00:06:27,780 --> 00:06:31,600 So that means that each one, each cookie is separated by the semicolon. 106 00:06:31,610 --> 00:06:34,940 So if we split that, then that gives us access to all the cookies. 107 00:06:35,120 --> 00:06:36,560 Then we loop through the cookies. 108 00:06:36,560 --> 00:06:40,640 We trimmed them because as we saw, there's sometimes spacing that's added in. 109 00:06:41,090 --> 00:06:42,680 So make sure that you do trim those. 110 00:06:42,770 --> 00:06:45,130 Then we split them by the equals sign. 111 00:06:45,320 --> 00:06:48,140 So that gave us the cookie name and the value. 112 00:06:48,260 --> 00:06:53,750 So just as we were setting the name and the value, if we split it by the equals sign that we can get 113 00:06:53,750 --> 00:06:55,070 the name and the value. 114 00:06:55,250 --> 00:06:59,060 So we're checking to see if the cookie name is the one that we've passed in. 115 00:06:59,180 --> 00:07:01,760 And if it is, then we output that it was found. 116 00:07:01,760 --> 00:07:06,410 But if it's not, then we didn't find it and we just get the message. 117 00:07:06,410 --> 00:07:12,890 No cookies found can remove out the console message and that decode UI component superimportant because 118 00:07:12,890 --> 00:07:16,130 that decodes set back into a regular string format. 119 00:07:16,370 --> 00:07:18,530 We had to erase cookies, so erase cookies. 120 00:07:18,530 --> 00:07:22,510 All it required was the name and then the same as when setting a cookie. 121 00:07:22,520 --> 00:07:26,330 But we don't need all of this information because of course we're just removing it. 122 00:07:26,540 --> 00:07:29,900 So if it's already expired, then the cookie is going to get erased. 123 00:07:30,020 --> 00:07:31,400 And that's the idea here. 124 00:07:31,430 --> 00:07:36,140 As long as you're getting a date that's prior to the current date, it's going to remove that cookie 125 00:07:36,350 --> 00:07:37,850 automatically from the browser. 126 00:07:37,850 --> 00:07:42,680 And then we were setting output for the user so the user knows what happened and the listing of the 127 00:07:42,680 --> 00:07:48,790 cookies, this was very similar to the get cookies where we went through and we got cookie object split 128 00:07:48,790 --> 00:07:52,100 up by the semicolon and then created some output content. 129 00:07:52,100 --> 00:07:58,070 So clearing that in case we press the button multiple times so it doesn't keep adding as we are creating 130 00:07:58,070 --> 00:08:03,380 some elements on the fly in this function, looping through all of the cookie objects, doing the same 131 00:08:03,380 --> 00:08:06,890 thing or trimming and then splitting that temp cookie value. 132 00:08:07,040 --> 00:08:11,780 So making sure that the cookie value is has a length greater than zero. 133 00:08:11,780 --> 00:08:17,930 And if it does, that's where we can create the cookie, the create the element dynamically using JavaScript. 134 00:08:18,230 --> 00:08:20,570 So this is were all we were doing is creating it. 135 00:08:20,570 --> 00:08:26,330 And of course we did some additional stuff here that isn't really necessary for the functionality. 136 00:08:26,480 --> 00:08:30,800 We added a class of cookie and we added the same content to the output. 137 00:08:30,890 --> 00:08:32,660 So that's going to be showing up the same way. 138 00:08:32,660 --> 00:08:36,740 But if you want to be more specific on the content, that's output in the cookie, you can do that as 139 00:08:36,740 --> 00:08:40,030 well by setting classes, also adding an event listener. 140 00:08:40,040 --> 00:08:45,200 So this is another option where when you click the cookie as it gets listed out, we run the function 141 00:08:45,200 --> 00:08:46,220 of a race cookie. 142 00:08:46,400 --> 00:08:52,160 And this was more to demonstrate that we can reuse the functionality in JavaScript. 143 00:08:52,160 --> 00:08:57,440 So you reuse it in multiple ways, as we saw here when we've got the event listener. 144 00:08:57,560 --> 00:09:02,330 So again, this one is not essential, but it was just demonstrating more JavaScript functionality that 145 00:09:02,330 --> 00:09:03,010 you could add. 146 00:09:03,020 --> 00:09:09,860 And then lastly, we're setting the text content, so letting the user know what cookie it is and the 147 00:09:09,860 --> 00:09:14,600 value of the cookie and then we are spending that to the output element. 148 00:09:14,750 --> 00:09:18,290 So that's the element with the class of output that we selected. 149 00:09:18,290 --> 00:09:21,260 We in the beginning were outputting that inner content to. 150 00:09:21,260 --> 00:09:25,340 So basically that gave us the ability to build out a list of all of the cookies. 151 00:09:25,520 --> 00:09:30,680 And as you can see in this application, as it's functioning, we get a listing of all of the cookies. 152 00:09:30,680 --> 00:09:36,170 If we set more cookies and we list out all the cookies, you're going to get all of those cookies being 153 00:09:36,170 --> 00:09:36,740 set there. 154 00:09:37,010 --> 00:09:38,420 And we can reset. 155 00:09:38,420 --> 00:09:39,620 We can change the values. 156 00:09:39,620 --> 00:09:42,530 So all that does is that overwrites the value. 157 00:09:42,650 --> 00:09:46,280 So you can see now is the name and that's the value associated with it. 158 00:09:46,280 --> 00:09:53,390 And especially when you have spacing and you set the spacing, when you encode and decode and actually 159 00:09:53,510 --> 00:09:55,310 just click that so it got removed. 160 00:09:55,740 --> 00:09:57,920 So let's set that again and all cookies. 161 00:09:57,950 --> 00:09:59,270 So remember, whenever you're clicking. 162 00:09:59,350 --> 00:10:03,910 Is that they are being removed because we did add in that function, so I hope you had an opportunity 163 00:10:03,910 --> 00:10:08,980 to try the code out for yourself, and if not, the source code has been included as well as if you've 164 00:10:08,980 --> 00:10:09,910 got any questions. 165 00:10:09,910 --> 00:10:14,170 Comments want clarity on any of the content covered within the earlier lessons. 166 00:10:14,380 --> 00:10:16,080 Please feel free to connect with me. 167 00:10:16,090 --> 00:10:21,100 I'm always happy to help answer, clarify content and add additional content into the course. 168 00:10:21,280 --> 00:10:25,900 Thanks again for taking the section and learning more about JavaScript and setting cookies.