Hello and welcome in this section, we're going to be setting up a grocery list.
Let's start by setting up our HTML.
We need an input.
So this is going to be type text input and this is going to be where we can add new items.
So giving it an idea of add item, we also need to have a button in order to add the items into our
list.
So input and type and this type can be a button giving it an ID of add new and with a value of add item.
Lastly, let's create a diff, give it a class, and this is where our output is going to sit and we're
going to add all of our output dynamically using JavaScript.
So see what this looks like.
And there's not really a whole lot to see quite yet.
We also need to create a few elements as well within our JavaScript and one of them being our main array,
or we're going to use this as let.
So my list and let's add some items into the list.
So these are grocery items so we can have things like bananas and of course, milk, apples, eggs and
have some cake.
So there's our list of items that we want to add in so the default list won't listen for window on load,
which will invoke the function build whenever the window loads.
And this is the function that we're going to use in order to build our initial screen area.
So this is where we're going to be building our table and our initial list not we're going to show you
in the upcoming lesson.
So there's one other thing that I do want to still set up, and that's selecting some of the elements
that we have on our page so that we're ready to make use of them within our JavaScript code.
So we've got a button.
I want to make that button active.
So setting up an object called contest button VTP and I'll just call it button add and then documents
query, selectors were selecting that element object the button, and that's the one with the idea of
add new three using ID this time in order to select that.
And let's make that button clickable by adding an event listener.
So adding an event listener listened for the click and then we've got our function that's going to get
out and vote once that button gets clicked.
And for now what we'll do is will console log out.
And eventually what this will do is this will add new items into our list.
So that is all still yet to come.
And we're going to be adding in all of this functionality in the upcoming lessons.
So this was the basic structure that we needed for our application.
So go ahead and set this up, set up the input fields, set up an output area where we can drop our
content and add our content using JavaScript dynamically.
And then we've got another one that's called OnLoad Window OnLoad, and that's a function called build.
And this is just whenever our document object is ready to go, the construction can begin for our output
of our list.