1
00:00:00,390 --> 00:00:07,270
This lesson, we're going to be setting up our e-mail in order to build out our scrolling text area.

2
00:00:07,320 --> 00:00:09,720
Let's create some HTML elements.

3
00:00:09,720 --> 00:00:13,350
First of all, Amien containing div, we're going to also need a button.

4
00:00:13,680 --> 00:00:16,300
So creating a button and make that button clickable.

5
00:00:16,350 --> 00:00:20,130
So we're going to use JavaScript in order to attach the click event for that.

6
00:00:20,260 --> 00:00:27,960
Also an input and this is going to be a type number so that we can get a default speed and then we can

7
00:00:27,960 --> 00:00:34,470
also adjust the speed, how fast the content within the element is going to be scrolling, creating

8
00:00:34,470 --> 00:00:35,010
a div.

9
00:00:35,010 --> 00:00:43,050
I'm going to give this one a class of about so we can communicate information to the user as well as

10
00:00:43,050 --> 00:00:44,880
let's create our elements.

11
00:00:45,700 --> 00:00:50,490
I going to use ID so C is going to be for the container element.

12
00:00:51,240 --> 00:00:57,060
And then what's inside the container element where I create another div, give it an ID so that we can

13
00:00:57,060 --> 00:01:04,580
access it with our JavaScript and this is where our contents will go next within JavaScript.

14
00:01:04,830 --> 00:01:08,700
Let's make our selection of our elements that we just created.

15
00:01:09,720 --> 00:01:13,320
So using JavaScript, we're going to access the content in the dorm.

16
00:01:13,320 --> 00:01:18,990
They're going to create a concept called button using a document query selector.

17
00:01:19,560 --> 00:01:25,740
Let's select the element, the button element so we can make this one interactive and add an event listener

18
00:01:25,740 --> 00:01:26,370
to the button.

19
00:01:26,620 --> 00:01:31,920
So adding an event listener to that listener that we're adding is going to be a click event and we're

20
00:01:31,920 --> 00:01:35,410
going to do an anonymous function just inside that click event.

21
00:01:35,430 --> 00:01:40,340
For now, we're just going to console log out, click so we can track any of the clicks on the button.

22
00:01:40,620 --> 00:01:44,790
Let's do a quick refresh, open up our console at the bottom.

23
00:01:44,790 --> 00:01:47,790
And when I click the button, you can see that click gets rendered out.

24
00:01:48,090 --> 00:01:51,060
So we've effectively create that button element.

25
00:01:51,060 --> 00:01:52,290
We've made it interactive.

26
00:01:52,320 --> 00:01:55,850
We also need to load some content into the element area.

27
00:01:56,280 --> 00:01:59,110
So let's make a selection of that element as well.

28
00:01:59,130 --> 00:02:06,930
So using const we've got our C elements sets our container element using document and let's this time

29
00:02:06,930 --> 00:02:07,890
let's do something different.

30
00:02:07,890 --> 00:02:09,570
We'll do get element by ID.

31
00:02:09,840 --> 00:02:14,420
So notice we don't need to prefer it because it's already expecting an element with an ID.

32
00:02:14,820 --> 00:02:20,220
I'll make this bigger as we're selecting out all these elements into usable objects in JavaScript.

33
00:02:20,250 --> 00:02:26,930
So we've got our element using documents and we can also use get element by ID in this case as well.

34
00:02:27,180 --> 00:02:30,850
So we have something a little bit different than always using the query selector.

35
00:02:30,900 --> 00:02:32,810
Let's also get our input.

36
00:02:32,820 --> 00:02:34,550
So this is going to be the speed.

37
00:02:34,610 --> 00:02:38,490
So using document and for this instance I'm going to use query selector.

38
00:02:38,490 --> 00:02:40,200
So we're selecting the input.

39
00:02:40,800 --> 00:02:43,620
We'll have the one input so we can select it just using input.

40
00:02:43,770 --> 00:02:47,640
And also lastly, let's select our output area.

41
00:02:47,790 --> 00:02:52,920
So this is where we can output content and communicate to our users.

42
00:02:53,220 --> 00:02:55,890
So we need to prefect's this because this is a class.

43
00:02:56,760 --> 00:03:00,090
So don't forget to prefix it with the period.

44
00:03:00,090 --> 00:03:05,010
And let's refresh our page and make sure that we actually have all of these elements.

45
00:03:05,520 --> 00:03:11,850
So usually the way that I do that is I just type in the object names within the console just to make

46
00:03:11,850 --> 00:03:14,940
sure that we do have access to all of those elements.

47
00:03:15,120 --> 00:03:18,680
There's no misspellings and everything is ready to go.

48
00:03:19,050 --> 00:03:22,020
So we've got our speed and then lastly, our output.

49
00:03:22,440 --> 00:03:26,910
So we're able to successfully select all of the matching elements on the page.

50
00:03:27,090 --> 00:03:28,980
So we're ready to move on to the next page.

51
00:03:29,100 --> 00:03:36,330
So before the next lesson set up, your HTML create that input area as well as an output area to communicate

52
00:03:36,330 --> 00:03:42,180
with the user click button, as well as adding in some device that can contain the content.

53
00:03:42,420 --> 00:03:47,730
And we've got a button here that's you can also add an event listener to and then selecting all of the

54
00:03:47,730 --> 00:03:48,960
elements that we created.

55
00:03:49,110 --> 00:03:53,850
Bring them into your JavaScript as objects and you'll be ready to move on to the next lesson.