1 00:00:00,730 --> 00:00:05,110 We're going to take the element that we created in the last lesson, so that's that one that we gave 2 00:00:05,110 --> 00:00:06,610 it a name of our output. 3 00:00:06,620 --> 00:00:10,360 So it's that object that we've created and we're going to add some inner HTML. 4 00:00:10,360 --> 00:00:15,730 So now that we have it within an object format, it's relatively easy to add these manipulations. 5 00:00:15,970 --> 00:00:17,640 So we're going to add inner turmoil. 6 00:00:17,650 --> 00:00:22,080 You could also do inner text and that will add some content into that element. 7 00:00:23,330 --> 00:00:28,660 I'm going to type click the button so you can see when we render that out. 8 00:00:28,660 --> 00:00:31,150 So minimize that and refresh that. 9 00:00:31,150 --> 00:00:35,110 Now we have an element that has click the button written inside. 10 00:00:35,350 --> 00:00:36,940 So it's not doing anything yet. 11 00:00:36,940 --> 00:00:40,920 But we're adding in some of the functionality into it already. 12 00:00:41,410 --> 00:00:48,970 So we also want to apply some styling and styling is the object and then style and then you've got some 13 00:00:48,970 --> 00:00:50,130 options for styling. 14 00:00:50,140 --> 00:00:57,310 So if you want to adjust the font size, you can do that by using the object value of font size. 15 00:00:57,820 --> 00:01:02,130 So each element that you create, you've got all these options for styling. 16 00:01:02,140 --> 00:01:08,870 So when I refresh it, we see that the font size, so the attribute style now has font size to end. 17 00:01:09,190 --> 00:01:11,890 And you can do that for all the other attributes as well. 18 00:01:11,890 --> 00:01:14,530 So applying style, you can do padding. 19 00:01:14,530 --> 00:01:21,100 If you want to add padding, just as you would with your success, you'd add in whatever styling values 20 00:01:21,100 --> 00:01:23,170 that you wanted to use in that output object. 21 00:01:23,180 --> 00:01:27,010 We can use font family and this isn't an object format. 22 00:01:27,040 --> 00:01:29,470 So notice that it's Camil case. 23 00:01:29,830 --> 00:01:35,890 So instead of with the Cassus properties, it's slightly different where there's no there's no spacing 24 00:01:35,890 --> 00:01:37,270 allowed and no dashes allowed. 25 00:01:37,280 --> 00:01:39,500 So it's all within this type of format. 26 00:01:39,520 --> 00:01:43,080 So now just selecting font font names. 27 00:01:43,080 --> 00:01:48,520 So now it's within a fantasy font and you can also add in classes if you wanted to as well. 28 00:01:48,700 --> 00:01:52,420 So let's say we had a class and we could call it button. 29 00:01:52,690 --> 00:01:58,290 So if we had a message area that we want to output, in particular, we could call it message. 30 00:01:58,300 --> 00:02:01,610 And then lastly, all we have to do is append it to the body. 31 00:02:01,780 --> 00:02:04,420 So this takes care of our message area. 32 00:02:04,540 --> 00:02:08,400 And now that we are saying click the button, we need to create a button as well. 33 00:02:08,410 --> 00:02:10,540 So let's do the same thing that we did earlier. 34 00:02:10,690 --> 00:02:11,740 We're going to create a button. 35 00:02:11,750 --> 00:02:16,390 So give it an object name using document and create element. 36 00:02:16,390 --> 00:02:18,930 We need to specify what type of element we want to create. 37 00:02:19,150 --> 00:02:24,370 And in this case, we want to create a button and then adding some inner HTML to that button. 38 00:02:24,850 --> 00:02:28,730 So we'll type in, click me on the button and I'll show you how that looks. 39 00:02:29,170 --> 00:02:33,760 So now we haven't added it yet to our body. 40 00:02:33,910 --> 00:02:38,610 So the same way that we added the output, we can add a button object as well. 41 00:02:39,130 --> 00:02:40,090 So refreshing. 42 00:02:40,340 --> 00:02:43,030 And so now we've got a button and it's not clickable yet. 43 00:02:43,330 --> 00:02:45,730 So let's add some interaction to that button. 44 00:02:45,730 --> 00:02:48,370 So the button and adding an event listener. 45 00:02:48,380 --> 00:02:54,190 So just as you would if you selected that element object, you could add an event listener to it, selecting 46 00:02:54,190 --> 00:02:57,550 the event that you want to invoke. 47 00:02:57,560 --> 00:02:59,890 So click event and we'll do an anonymous function. 48 00:03:00,020 --> 00:03:03,000 You could also link it out to a named function as well. 49 00:03:03,010 --> 00:03:09,610 And so for now, we'll just type in clicked into it and we'll set up the calculations in the upcoming 50 00:03:09,610 --> 00:03:10,030 lesson. 51 00:03:10,270 --> 00:03:15,700 So if we go into our console, so first of all, within the HTML, you see that we've added in the button 52 00:03:15,700 --> 00:03:16,180 element. 53 00:03:16,480 --> 00:03:20,560 We've also added in some styling to the output element. 54 00:03:20,770 --> 00:03:26,320 And if we go into our console area, you can see when I click the button, that click gets invoked. 55 00:03:26,320 --> 00:03:27,780 So we've added in the event listener. 56 00:03:28,090 --> 00:03:33,730 So now we've got an interactive button that we've added and we've also applied some styling to our message 57 00:03:33,730 --> 00:03:34,180 area. 58 00:03:34,570 --> 00:03:40,360 So that's why I want you to do now is to create another element and create a button element on your 59 00:03:40,360 --> 00:03:43,330 page that's going to be output in your HTML. 60 00:03:43,330 --> 00:03:48,490 And we'll give you a button that you can click and we'll apply some styling and some additional options 61 00:03:48,490 --> 00:03:50,280 to it in the upcoming lesson. 62 00:03:50,530 --> 00:03:57,220 So for now, add in the event listener, add it, append it to the body object and also you can add 63 00:03:57,220 --> 00:04:03,970 in some inner HTML or in our text so that there is some text on the button and also practice and have 64 00:04:03,970 --> 00:04:08,230 some fun with updating the styling of your output object. 65 00:04:08,410 --> 00:04:14,680 And you can also apply some of that same styling that we did out here for the output object into the 66 00:04:14,680 --> 00:04:15,430 button object. 67 00:04:15,430 --> 00:04:17,860 And that's what we're going to be covering in the upcoming lesson. 68 00:04:18,130 --> 00:04:21,250 So try it out, add in some styling to that as well. 69 00:04:21,250 --> 00:04:29,500 So adding in the name of the object and then using the style object value and then selecting the property 70 00:04:29,500 --> 00:04:31,650 that you want to set from success. 71 00:04:31,670 --> 00:04:38,440 So are coming up next, I'll show you how we can complete our project by making this button count and 72 00:04:38,440 --> 00:04:42,670 then also outputting the count contents within the message area. 73 00:04:42,820 --> 00:04:44,620 So that's still coming up in the next lesson.