This lesson, we're going to be setting up our e-mail in order to build out our scrolling text area.
Let's create some HTML elements.
First of all, Amien containing div, we're going to also need a button.
So creating a button and make that button clickable.
So we're going to use JavaScript in order to attach the click event for that.
Also an input and this is going to be a type number so that we can get a default speed and then we can
also adjust the speed, how fast the content within the element is going to be scrolling, creating
a div.
I'm going to give this one a class of about so we can communicate information to the user as well as
let's create our elements.
I going to use ID so C is going to be for the container element.
And then what's inside the container element where I create another div, give it an ID so that we can
access it with our JavaScript and this is where our contents will go next within JavaScript.
Let's make our selection of our elements that we just created.
So using JavaScript, we're going to access the content in the dorm.
They're going to create a concept called button using a document query selector.
Let's select the element, the button element so we can make this one interactive and add an event listener
to the button.
So adding an event listener to that listener that we're adding is going to be a click event and we're
going to do an anonymous function just inside that click event.
For now, we're just going to console log out, click so we can track any of the clicks on the button.
Let's do a quick refresh, open up our console at the bottom.
And when I click the button, you can see that click gets rendered out.
So we've effectively create that button element.
We've made it interactive.
We also need to load some content into the element area.
So let's make a selection of that element as well.
So using const we've got our C elements sets our container element using document and let's this time
let's do something different.
We'll do get element by ID.
So notice we don't need to prefer it because it's already expecting an element with an ID.
I'll make this bigger as we're selecting out all these elements into usable objects in JavaScript.
So we've got our element using documents and we can also use get element by ID in this case as well.
So we have something a little bit different than always using the query selector.
Let's also get our input.
So this is going to be the speed.
So using document and for this instance I'm going to use query selector.
So we're selecting the input.
We'll have the one input so we can select it just using input.
And also lastly, let's select our output area.
So this is where we can output content and communicate to our users.
So we need to prefect's this because this is a class.
So don't forget to prefix it with the period.
And let's refresh our page and make sure that we actually have all of these elements.
So usually the way that I do that is I just type in the object names within the console just to make
sure that we do have access to all of those elements.
There's no misspellings and everything is ready to go.
So we've got our speed and then lastly, our output.
So we're able to successfully select all of the matching elements on the page.
So we're ready to move on to the next page.
So before the next lesson set up, your HTML create that input area as well as an output area to communicate
with the user click button, as well as adding in some device that can contain the content.
And we've got a button here that's you can also add an event listener to and then selecting all of the
elements that we created.
Bring them into your JavaScript as objects and you'll be ready to move on to the next lesson.