Hello and welcome this lesson, we're going to set up the HTML interface in order to build our kookie
building and controlling application.
So first we need to some inputs.
So setting up just some HTML inputs, they can all be type text.
Also give it a name so we can identify it using our JavaScript so we can call this one.
This is going to be representing the cookie name and I also also set some default values in here.
So test one, creating a few other inputs.
So we're going to need an input for the cookie value.
So we've got a cookie name and this is cookie value and this can be test value.
And I'm also going to change this one to test name so we could distinguish between the two.
And we also need another input.
And this is for the expiry date of the cookie.
So this can be a date input type.
So using H HTML5, so we get a date type and this is this could just be known as Cookie and we're not
setting any default values for that one.
We also are going to need a few buttons.
So let's add the buttons.
And so the giving it a button and these are all just going to be button class one, two, three.
The first one is going to be to set a cookie and this is going to provide the interaction within the
application.
The other one is get cookie.
Or get cookies, so return back all of the cookie values are currently stored.
There's also delete cookie, so to delete the cookie according to the meme.
So just deleting the one cookie.
So this would be actually get Cookie and then we'll do one more to all cookies.
So this one will show all of the available cookies that are available for the website.
And lastly, let's create an output area, give it a class of output so we can provide some output and
messaging for the user to interact with and see.
So the next step we want to do is select our elements as objects.
And so we've got quite a few of them on the page when I add them in as objects.
So going into our inspector, go to the console and I want to add them as usable objects.
Also, I'm going to add in a few line breaks and we can do that with styling.
So selecting the input, add a display property to it and this display is going to be displayed block.
So that will create new lines for those inputs as well.
I'm going to update the font size to make it a little bit bigger so we can select it at one point five
m.
Let's update the width of that element to be seventy five percent so that they're all in line in the
same width.
Coming up next, we're going to set all of these elements as JavaScript objects so that we can utilize
some within the upcoming lessons.
So that is all still to come and you can also style this as needed.
I'm also going to style the buttons so we do the font size for these as well and add a little bit of
power.
So now we've got some bigger buttons, bigger text, bigger input content, and we're ready to add JavaScript
into the project.
So that's coming up next.