In this lesson, we're going to continue to build out the interaction that we set out to last time,
and one of the interactions that we want to create is have the pop up and then the sidebar, have some
input fields here and then have those input fields populate some content on the page.
So let's select the sidebar or the side HTML.
And from here, we can create some inputs that we're going to get some content from and then we can
get the content from the inputs and add it onto our page so we can call this content Oddur.
And then within the functions here, we need to create let's create a div and that div can wrap around
the inputs and then within the inputs we're going to have some parameters that we're going to be asking
for.
So the first input is going to be asking for the.
Title or the heading?
So set up the name.
And we just call it name heading.
And I also set the input type as just regular text type, and I'm going to set a default values so we
don't have to always populate populate it.
And of course, this can be changed as needed.
I'm actually going to use an ID and then for the label so that we can label this and set and connect
to the label.
So the label for heading, so say ad heading and then close off the label tags.
And let's also add one more input and we need to add in a button that will save and populate the content.
So this will be the text that we want to add.
So we're going to be appending some text.
So be for a paragraph, give it an idea for a paragraph.
And actually, instead of having an input, let's have a text area, because for the paragraph, we
probably want to have more space.
So set up a text area and for text area.
We don't need these attributes and this will just have some text area content, and then the last part
is let's add in a button, the button that can be clicked so you can keep this wrapped within a div
as well, so that we can apply styling later on if we want.
Let's add in the button.
And this is just a class.
Of and I just can't give a class of Adam.
And save to doc.
And close off the button.
So what this will do whenever we open the sidebar, we should have some input fields there.
Let's apply some styling to that.
And you can also use Ed, like on your computer and then just do the styling there as well.
So let's select input text area and for labels.
And I'll just do a display block so that they move to the next slide.
And let's see what that looks like.
Of course, you can apply whatever styling that you want as needed, so I'm just going to leave it at
this.
But again, you could play styling as needed maybe to the body.
Want to apply some styling there as well.
And set the color to be white and we'll just set the background and set the background to be kind of
a dark color.
So I just was you can apply whatever styling is necessary to the project as needed, so we want to make
this interactive and we do this with JavaScript and you can as well bring in a file, external file
so you can use the includes, as we saw last time.
Or you can hard code the include function where we're going to be using the HTML service and create
HTML output from file and then we can select our JavaScript file.
So aside, Chase, there's going to be the file name and then we just want to render it the content
and save.
So let's create the style JS file.
Side well.
And so what this this one will be doing, so don't forget the script.
Tighes So opening and closing the script as this just could be JavaScript and maybe in the console we
can log some information just to make sure that the file is connected and then afterwards we can add
in the script for that.
So close that and this is running in the browser so we can open up the code inspector the developer
tools and that will output whatever content we've got here and we'll see that we do have the ready there.
So that's working and that's connected.
And that means that we can also apply some JavaScript where we can select some content from there.
And if we want to select the element with a class of atter and make the button clickable.
So let's do that where we're select the button object and using the document query selector.
Let's select the elements with a class of going back, just make sure that we do get the class properly
so it's the class of atter and then to the button.
So adding an event listener.
So we're listening for the event of a click.
And the click is going to invoke a function, and on this function, we'll just logout clicked just
to make sure that again that everything is working.
And let's update that to query selector and hit the sidebar, clear the console.
And now when we click it, we do get the word clicked there in the console.
So that's what we want.
We've got the functionality now.
We've got the selection.
And let's also add in these values.
So we're going to have the text area and the heading and add them in as objects so that we can select
the content that's contained within it.
And then we're going to move on to updating the model.
So content header.
And using the same method document selector, we're going to select the header, the element with the
header ID.
And just double check, make sure that we do have the elements, so it's porra is the other one and
this is going to be the content paragraph.
So we're selecting the two elements and let's double check and just make sure that we're not throwing
any errors in the JavaScript code.
So everything looked like it's working properly and now we're ready to update the dialog.
So within the dialogue, we'll do something similar for the dialogue.
But in this case, what we're going to do is we're going to list out all of the elements on the page
and the content from the page, and we'll output that in the output area.
So this one will just have one button function in that button.
We'll just run some code to add and list out all of the content.
So let's select the button, add it to the dialog and creating another element, class of output.
So this is where we can output all of the content that we're going to be constructing.
And this is all going to come from the document object.
So it's going to list out all of the page elements within the dock.
And just as we did with side, we're going to link to the G.S. file.
So within the dialogue and if you want to repurpose the JavaScript files, you can repurpose them in
this case are going to make a separate one.
But we can also link to the same one as well, if needed, sort of selecting that.
And let's just make a copy of it and I'll call it dialogues and save that and what this one will do.
We'll select the element for output as an object named output, so selecting the element with a class
of output and then we'll take the button as it's clicked and we'll output that element onto the page.
So let's try the dialog and just see if it works.
Keep your dev tools open so that we can check the JavaScript that it's running properly.
So we want to list out the page elements and that's allowing us to select the dialogue that we have.
So we want to do for this function.
It's going to list out the content from the dock.
So coming up next, we'll continue to build out the interaction to this project.