1 00:00:01,550 --> 00:00:07,100 This lesson, we're going to go do a quick code review of all of the content that we've covered in the 2 00:00:07,100 --> 00:00:15,500 earlier lessons, and just to show you that whatever content you have here within your HTML will get 3 00:00:15,500 --> 00:00:16,250 duplicated. 4 00:00:16,260 --> 00:00:20,150 So anything that's contained within this element will get duplicated. 5 00:00:20,180 --> 00:00:21,590 I'm going to add in an image. 6 00:00:21,950 --> 00:00:29,080 So coming from placeholder dot com, you can get generic images as placeholder images. 7 00:00:29,270 --> 00:00:31,820 You can also set colors on those images as well. 8 00:00:31,850 --> 00:00:35,600 So I'm just getting a quick image there and we'll do a refresh. 9 00:00:36,140 --> 00:00:38,210 And so now we see we've got an image there. 10 00:00:38,330 --> 00:00:43,580 So even everything that's contained within that element gets duplicated out. 11 00:00:44,120 --> 00:00:50,960 Also, I want to update that overflow and I want to hide any of the overflow so we don't have these 12 00:00:51,200 --> 00:00:53,660 overhanging pieces of content. 13 00:00:53,670 --> 00:00:57,530 So we've got images and we could do some really neat things here. 14 00:00:57,530 --> 00:01:00,260 We can update any of the HTML we have here. 15 00:01:00,270 --> 00:01:05,660 So even if we have some H1 tags, you're going to see that this is as well getting duplicated. 16 00:01:07,050 --> 00:01:12,630 So now this one is a large one and and so on, so there's a lot of different things that you can do 17 00:01:12,780 --> 00:01:17,970 and you can really play around with this and have some fun with it and get really used to working with 18 00:01:17,970 --> 00:01:21,090 the dorm, creating elements and generating elements. 19 00:01:21,270 --> 00:01:25,490 So let's do a quick code review of our current code that we have here for the application. 20 00:01:26,100 --> 00:01:29,130 So we've got some styling that we've applied. 21 00:01:29,850 --> 00:01:33,330 We've got some classes that we apply dynamically within JavaScript. 22 00:01:33,600 --> 00:01:38,060 We set up a whole set of elements, so tried to make them as different as possible. 23 00:01:38,280 --> 00:01:44,400 So whenever you have any elements fully dynamic, so if you have even more elements with that, copy 24 00:01:44,400 --> 00:01:44,730 me. 25 00:01:45,060 --> 00:01:50,200 You can see that these are also going to get output on the page so you can have as many as you want. 26 00:01:50,550 --> 00:01:53,950 We also create an elements with an idea of garbage. 27 00:01:54,180 --> 00:01:57,870 So this is going to serve as our garbage to get rid of existing elements. 28 00:01:58,290 --> 00:02:04,860 We use JavaScript to create objects out of the elements so that we can easily connect with them as we 29 00:02:04,860 --> 00:02:11,700 progress through our code, set up a default holding objects so that we have somewhere to place a variable 30 00:02:11,700 --> 00:02:12,480 that we can use. 31 00:02:12,480 --> 00:02:14,700 That's a global variable that we can access. 32 00:02:15,720 --> 00:02:21,900 Looping through all of the elements with a class of copy me, we're looping through. 33 00:02:21,900 --> 00:02:29,340 We're getting the element as well as its index value, which we're using as the element gets clicked 34 00:02:29,700 --> 00:02:36,350 where invoking click function, so setting a bunch of styles and properties, adding classes. 35 00:02:36,540 --> 00:02:43,500 So this is really to get really familiar with updating elements that are existing on the page and also 36 00:02:43,500 --> 00:02:47,130 adding in objects and values into those elements. 37 00:02:47,380 --> 00:02:53,790 So you see that these elements are just like any other object in JavaScript and you can extend on the 38 00:02:53,790 --> 00:02:56,700 existing values within this object. 39 00:02:56,710 --> 00:03:02,610 So there's already existing methods and also different properties and values that are already existing. 40 00:03:02,610 --> 00:03:08,640 And you can extend that and add in your own so that each one of these objects now contains all of this 41 00:03:08,640 --> 00:03:09,540 information. 42 00:03:09,660 --> 00:03:15,410 And then you can use that information within your within your application. 43 00:03:15,690 --> 00:03:22,620 So we saw that we created these dynamically and they each contain their own X Y moves IMT. 44 00:03:22,830 --> 00:03:28,500 So they each have their intervals and they're each running this function of mover on a set interval 45 00:03:28,830 --> 00:03:32,190 and when it runs out then it just clears that interval out. 46 00:03:32,610 --> 00:03:38,220 And you see that we're setting a whole bunch of these values here as well as we're moving out. 47 00:03:38,250 --> 00:03:41,690 So this is giving us that animation of our elements. 48 00:03:41,970 --> 00:03:46,260 So that's another thing that we learned within the last lessons, how to animate elements. 49 00:03:46,470 --> 00:03:51,920 And you can use this type of functionality to animate your elements by setting an interval. 50 00:03:52,260 --> 00:03:54,710 Don't forget to have a way out of your intervals. 51 00:03:54,710 --> 00:04:01,230 So make sure that you do have something that will clear that interval so that you don't have indefinite 52 00:04:01,230 --> 00:04:03,030 movement of that element. 53 00:04:03,300 --> 00:04:11,100 And then lastly, we added into the body, you could also add it into if you had another object within 54 00:04:11,100 --> 00:04:14,160 another element object, you could add it in there as well. 55 00:04:14,340 --> 00:04:18,780 But in this case, you just simply add it to the body because they're all absolute position. 56 00:04:18,780 --> 00:04:21,350 Anyway, I going to get rid of the console message. 57 00:04:21,630 --> 00:04:28,770 And then lastly, before we we finished up, we added the ability to drag that element by creating a 58 00:04:28,770 --> 00:04:29,940 function called Draga. 59 00:04:30,720 --> 00:04:36,840 And then we also updated the position of our existing elements because originally we didn't have any 60 00:04:37,080 --> 00:04:39,690 different positions here within Kopi Mi. 61 00:04:39,810 --> 00:04:42,000 So they were all one on top of each other. 62 00:04:42,000 --> 00:04:49,110 And as we iterated through them, this is a great time to update those parent elements as well as well 63 00:04:49,110 --> 00:04:50,910 as adding an event listener, of course. 64 00:04:51,970 --> 00:04:57,880 We created a function to generate random color because they were all the same color and we want to bring 65 00:04:57,880 --> 00:05:03,990 some color into our lives, so we generated a random background color so that they all can look different. 66 00:05:04,480 --> 00:05:08,200 Then additionally, we created a function called Draga. 67 00:05:08,470 --> 00:05:15,880 So what Draga does is that any element that we pass into Draga, we can then move around and you can 68 00:05:15,880 --> 00:05:18,910 utilize this function in a number of different ways. 69 00:05:19,360 --> 00:05:22,000 So it doesn't have to be these dynamically created elements. 70 00:05:22,120 --> 00:05:28,150 You can also select an element and pass it into drugger so you can do document, query, selector and 71 00:05:28,150 --> 00:05:32,890 select any element on your page and make a dragonball and pass it into this Draga object. 72 00:05:33,190 --> 00:05:38,170 That's the nice thing about having these functions, is that you can utilize them in a number of different 73 00:05:38,200 --> 00:05:38,560 ways. 74 00:05:38,560 --> 00:05:45,610 Is whenever the on most down event is triggered, we do a drag of the mouse function. 75 00:05:45,910 --> 00:05:47,910 So that's sitting within the Draga function. 76 00:05:48,490 --> 00:05:54,520 We're getting that initial position of where the mouse is located and we're also checking to see if 77 00:05:54,520 --> 00:05:58,900 mouse is up and if Mouse is up, then we don't want to move the mouse anymore. 78 00:05:58,900 --> 00:06:02,630 So we want to essentially drop our element wherever it is. 79 00:06:03,130 --> 00:06:06,520 So this is the way that's working is we're on top of the element. 80 00:06:06,790 --> 00:06:11,560 We click down and that's where we can drag it around. 81 00:06:11,620 --> 00:06:17,670 And once we lift up the mouse that we want to null any of the movement of that element. 82 00:06:17,920 --> 00:06:21,130 So we essentially drop it wherever the last position update was. 83 00:06:21,790 --> 00:06:23,840 We've got our mouse move function. 84 00:06:23,860 --> 00:06:29,410 So if we are moving our mouse, we are going to be invoking this code here. 85 00:06:29,420 --> 00:06:37,600 So when we're moving it around, so as long as mouse up hasn't gone off and as long as we're clicking 86 00:06:37,600 --> 00:06:40,990 down on the mouse button, that means that we can move it around. 87 00:06:41,260 --> 00:06:42,430 So we're moving it around. 88 00:06:42,430 --> 00:06:47,890 We're setting the horizontal movement as well as the vertical movement. 89 00:06:48,190 --> 00:06:54,040 So we're subtracting that initial position of where the mouse was located with the current position 90 00:06:54,280 --> 00:06:56,380 as well as for the y axis. 91 00:06:56,680 --> 00:07:02,380 And that's giving us a value of what's moved on that on that axis. 92 00:07:02,740 --> 00:07:10,090 And then we're updating again so we can reuse them again, the position of X and Y of the mouse. 93 00:07:10,480 --> 00:07:12,730 We're checking to see if a collision has taken place. 94 00:07:12,970 --> 00:07:18,870 And if it has, then we remove that element and we'll check the collision function afterwards. 95 00:07:19,390 --> 00:07:23,650 And then lastly, what we're doing is we're allowing the movement. 96 00:07:23,670 --> 00:07:31,030 So we're resetting the style properties of top and left to correspond with the movement on the y axis 97 00:07:31,030 --> 00:07:32,230 and on the x axis. 98 00:07:32,470 --> 00:07:38,350 So we're getting that current element offset top value and this is numeric value. 99 00:07:38,350 --> 00:07:39,910 So it's not with the pics. 100 00:07:39,910 --> 00:07:43,880 So we don't have to turn it into a number and also with the left as well. 101 00:07:44,410 --> 00:07:46,960 And then lastly, we have our Cleide function. 102 00:07:46,970 --> 00:07:53,860 So this is another one of those really useful functions where we can pass in any element, object and 103 00:07:53,860 --> 00:07:57,660 check to get its bounding client rectangle. 104 00:07:57,670 --> 00:08:04,690 So that gives us a bunch of object values such as top, bottom, right, left, which we utilise in 105 00:08:04,690 --> 00:08:09,250 our formula where we're checking all of the corners to see if there's any collision happening. 106 00:08:09,580 --> 00:08:14,440 And what this does is this really saves us quite a bit of trouble because sometimes you can see the 107 00:08:14,440 --> 00:08:21,790 collision detection and we're calculating the left position and then we're adding in the width to get 108 00:08:21,790 --> 00:08:25,230 the right position and there's quite a bit more calculations done. 109 00:08:25,420 --> 00:08:29,500 So this simplifies things the same thing with the bottom position. 110 00:08:29,950 --> 00:08:36,670 So typically you would get the top position, which you could get offset top and then you would be adding 111 00:08:36,670 --> 00:08:41,920 in the height of the object the element, and then that would give you the bottom position. 112 00:08:42,040 --> 00:08:47,500 So really simplified it by using jet bound and client rectangle and gave us the ability to do a quick 113 00:08:47,500 --> 00:08:50,080 comparison, return back a boolean value. 114 00:08:50,260 --> 00:08:54,220 And we then of course, utilize that boolean value in this condition. 115 00:08:54,400 --> 00:08:58,710 And if it comes back as true, then we know that we've got a collision. 116 00:08:58,750 --> 00:09:05,500 It's on top of our garbage element and that means that we've got to null the mouse down so null that 117 00:09:05,650 --> 00:09:06,790 most down functions. 118 00:09:06,790 --> 00:09:08,290 So we're not dragging it anymore. 119 00:09:08,500 --> 00:09:11,350 And we also need to remove that element from the page. 120 00:09:12,280 --> 00:09:17,800 And this was another important function that is really useful because essentially it gives us the ability 121 00:09:17,800 --> 00:09:25,810 to remove elements from our HTML page by specifying the element, traversing up to the parent and then 122 00:09:25,810 --> 00:09:29,020 removing the child that matches its own description. 123 00:09:30,390 --> 00:09:34,980 So now that we've gone through all of the coding, it's up to you have some fun with it. 124 00:09:35,220 --> 00:09:40,860 And the real objective of this section was really to get comfortable with working with the dome, have 125 00:09:40,860 --> 00:09:46,410 some fun with it, building out a unique application that you can have some fun with and practice, 126 00:09:46,710 --> 00:09:53,730 working with different elements, moving elements around, and as well as creating and removing elements 127 00:09:53,730 --> 00:09:54,430 from the page. 128 00:09:54,630 --> 00:09:56,280 So go ahead and try this out for yourself. 129 00:09:56,490 --> 00:10:00,530 Source code, of course, is included so you can try this application out for yourself.