Great job on making it through this section.
This is the part where we do a quick code review and a review of the code that we've been working on
in the earlier lessons.
So occasionally what happens with BRAC brackets is it will drop their live preview.
And if you in order to open that up, you have to click that life preview button again or you can go
into brackets.
Life Preview as we do need to be running on an HTP protocol and Brackett's does provide that option
to run it.
Or you could run it with a local machine or on any other Web server where you've got a domain listed.
So you've got to make sure in order to interact with the cookies that you are running within the HTTP
protocol and make sure that you're not running in the final protocol as your cookies won't work.
So going into the code and of course, the JavaScript will still work in the final protocol because
this is all browser based.
So going into the console, let's clean up that.
That's an error that's thrown when it checks to see that there's no icon there.
That's not having to do with our code at all.
So we set up a little bit of styling to make our interface look nice, set up some HTML so we got some
inputs there in order to manipulate, get our cookies, cookie cookies added in some buttons for interaction.
So those are the four actions that we want to take where we do set cookie, get cookie, delete cookie
and list out all the cookies created an element in order to output the content, then went into JavaScript
and selected all the elements as objects and javascript.
So either using query selector, if we only had the one element they're trying to select or query,
select or all, if there was more than one element that we're trying to select and creating a node list.
So that gave us the ability to loop through that node list and we could add event listeners to each
one of the buttons and then using button action in order to handle the retrieval of what the intended
button was and what action the user is trying to take.
Also added in a default way to update that input, the data input.
So it's not just blank and it's automatically set to one week ahead or seven days ahead.
So we used the JavaScript date object and added seven, six, seven days to the get date, which was
the day of the week.
Also, we had to do a quick fix for the date where we made sure that in case the day was coming back
as a single digit, we are adding a zero.
And that's where we're using the JavaScript method slice minus two.
So that always ensures that if the next week is two characters, we're going to return back those two
characters.
But if it's one, it's going to add it to the zero and then we're going to return back.
Both the zero and the character did the same thing for the month.
And with get month, we start at zero.
So we want it actually to start with the month of one.
So that's where we needed to add the one.
And the idea here was the same thing for the slice so that we don't end up with a single character.
The get full year gives us the four digits.
So that was ideal.
And once we had that and we built that, we could set the value using year, month, day and dashes
and that would automatically update that input date to the current date plus seven days.
Then the next part of the code.
And the most important part, of course, was the button interactions.
So this is where we selected that element that had triggered the event.
So he's got the source element.
So it's a JavaScript method that you can use in order to get the source element as well that triggered
the event.
You could also use this object.
So we got the inner text of it.
And we also only want to get the inner text up to the first space.
So we've got set cookie, get cookie, delete cookie.
So there's no need to get the rest of the HTML, the inner texts contained within that button.
So that's where we're breaking it by the spacing.
You don't have to do that.
You could look for the button clicks or you don't have to list these out for the user.
So this is depending on what your preferences.
So we were breaking that and this also gave us a nice option to experiment a little bit more with some
more different JavaScript methods.
And of course, that's the objective of this course.
And the section is to practice more about JavaScript next.
We created a default blank object and this is where all of the input values could go.
And as we loop through the inputs, we get the name, we get the value.
If the value is going to be the cookie expire.
So if it's this input, then we need to treat this separately because this is a date object.
So we want to make sure that we get it as a date value.
So value as date is the way to retrieve that information.
And once we have the temp name and the temp value that we added in as an object, we're outputting that
object that we're submitting into the console.
So we don't need those anymore.
And then next, what we did here is we've got the temp value of the content that's contained within
the button that was triggered, though, that.
So we're checking to see if it's set, get delete or all.
And depending on what it is, we launch the corresponding function and we pass in the object values
that are needed.
So for most of them, it was just cookie name.
That was needed to get delete, just need a cookie name, that cookie needed a few other things where
it needed the name, it needed the value and the cookie expire value.
So that was what those values from that object that we needed in order to set a cookie.
So if we're setting a cookie, we're passing in some parameters.
So, of course, name value and expiry.
And if the value is larger than zero and we should also check maybe the name is larger to zero, that's
another thing that can be added into update and extend on this.
So all we did is get the document cookie object and set a name.
And this parameter it does need to set with be set within this type of format, within the string format.
So it is expecting a name and that's going to equal to and this is where you need to make sure that
you use the end code.
You are a component.
So that gets rid of the spacing and adds that percent twenty four spacing and so on.
So it encodes it properly.
And then of course this is a string that's being set within the cookie.
So we've got a path, we've got expires and then that expires as well.
We were using two UTC string, which is a JavaScript method that converts the date object into a UTC
string value.
And then we were adding into that output what happened.
So user knows what happened.
And if we didn't add the cookie, then also a message back to the user so they know what happened.
And then we created the functions that we had.
We've got to get Cookie.
So this one was where we came in and we got the document cookie object.
We split it by the colon.
So that means that each one, each cookie is separated by the semicolon.
So if we split that, then that gives us access to all the cookies.
Then we loop through the cookies.
We trimmed them because as we saw, there's sometimes spacing that's added in.
So make sure that you do trim those.
Then we split them by the equals sign.
So that gave us the cookie name and the value.
So just as we were setting the name and the value, if we split it by the equals sign that we can get
the name and the value.
So we're checking to see if the cookie name is the one that we've passed in.
And if it is, then we output that it was found.
But if it's not, then we didn't find it and we just get the message.
No cookies found can remove out the console message and that decode UI component superimportant because
that decodes set back into a regular string format.
We had to erase cookies, so erase cookies.
All it required was the name and then the same as when setting a cookie.
But we don't need all of this information because of course we're just removing it.
So if it's already expired, then the cookie is going to get erased.
And that's the idea here.
As long as you're getting a date that's prior to the current date, it's going to remove that cookie
automatically from the browser.
And then we were setting output for the user so the user knows what happened and the listing of the
cookies, this was very similar to the get cookies where we went through and we got cookie object split
up by the semicolon and then created some output content.
So clearing that in case we press the button multiple times so it doesn't keep adding as we are creating
some elements on the fly in this function, looping through all of the cookie objects, doing the same
thing or trimming and then splitting that temp cookie value.
So making sure that the cookie value is has a length greater than zero.
And if it does, that's where we can create the cookie, the create the element dynamically using JavaScript.
So this is were all we were doing is creating it.
And of course we did some additional stuff here that isn't really necessary for the functionality.
We added a class of cookie and we added the same content to the output.
So that's going to be showing up the same way.
But if you want to be more specific on the content, that's output in the cookie, you can do that as
well by setting classes, also adding an event listener.
So this is another option where when you click the cookie as it gets listed out, we run the function
of a race cookie.
And this was more to demonstrate that we can reuse the functionality in JavaScript.
So you reuse it in multiple ways, as we saw here when we've got the event listener.
So again, this one is not essential, but it was just demonstrating more JavaScript functionality that
you could add.
And then lastly, we're setting the text content, so letting the user know what cookie it is and the
value of the cookie and then we are spending that to the output element.
So that's the element with the class of output that we selected.
We in the beginning were outputting that inner content to.
So basically that gave us the ability to build out a list of all of the cookies.
And as you can see in this application, as it's functioning, we get a listing of all of the cookies.
If we set more cookies and we list out all the cookies, you're going to get all of those cookies being
set there.
And we can reset.
We can change the values.
So all that does is that overwrites the value.
So you can see now is the name and that's the value associated with it.
And especially when you have spacing and you set the spacing, when you encode and decode and actually
just click that so it got removed.
So let's set that again and all cookies.
So remember, whenever you're clicking.
Is that they are being removed because we did add in that function, so I hope you had an opportunity
to try the code out for yourself, and if not, the source code has been included as well as if you've
got any questions.
Comments want clarity on any of the content covered within the earlier lessons.
Please feel free to connect with me.
I'm always happy to help answer, clarify content and add additional content into the course.
Thanks again for taking the section and learning more about JavaScript and setting cookies.