Hello and welcome this lesson we're setting up the structure for our CSB making application, opening
up the ED.
Let's create a few dips in our HTML, so having a class of output.
So we're going to put some information to the user.
Another one is we need a button to create interaction for the user and this one can just be downloaded
CSFI and that's it.
We don't need a whole lot for this application as there's two interactions that we need with the user.
We need a way to communicate with them as well as a way for them to initiate the download of the application.
So next, let's use JavaScript and setting up connection to the elements.
This one, we can give it a name of output using document query selector selecting the element with
a class of output into an object called output.
Also, we're going to select the button so we can add the event listener to that button using query
selector as well.
We're selecting the element that has a tag of button.
We don't have any other buttons.
If we did, we could be more specific here.
We can give it an ID or a class or any other way to distinguish it from other elements on the page.
So once we've added those in as objects, all we're going to see is download CSV file as well.
Let's make sure that we've got our output available as well as our button element as well available.
Let's also update some of the element contents.
So taking the element style, updating the background color and with CSV files usually like to make
them green, taking the button style, updating its colour and setting that font color to be white.
Also button style.
And there's a number of different style properties and obviously it's easier to do this within the style
tags within CNS.
Of course this is a JavaScript course, so we want to keep it as JavaScript as possible.
So updating the padding and setting that to five pics.
So just as you would any other style properties that you adding and S.O.S, you can update the style
as needed to make this a little bit bigger and button style.
Let's do one more.
So font size and there is a difference between when you're doing it within styling as well as when you're
doing in JavaScript, because of course, we can't have those dashes or spaces within the property names.
So that's how we need to make sure that we are being very specific what the elements and that the object
names don't have any spaces or Dashan.
So let's refresh.
Actually, this should be font size, so make a nice big button.
And that's all we really need for the interaction of the application.
And then the last part is let's add an event listener to the button.
So adding an event listener and the event that we're going to listen for is going to be a click and
we're going evoking a function whenever the button gets whatever the button gets clicked.
This is when the download is going to happen.
And we'll write the code for the download in the upcoming lessons, of course.
But for now, whenever the button gets clicked, we get download being output into the console.
So go ahead and set up the basic structure of your page and going to be ready to move on to the next
part where we are going to be building out and building up an array that we can create a CSV file out
of.
So that's all still to come.