This lesson, we're going to go do a quick code review of all of the content that we've covered in the
earlier lessons, and just to show you that whatever content you have here within your HTML will get
duplicated.
So anything that's contained within this element will get duplicated.
I'm going to add in an image.
So coming from placeholder dot com, you can get generic images as placeholder images.
You can also set colors on those images as well.
So I'm just getting a quick image there and we'll do a refresh.
And so now we see we've got an image there.
So even everything that's contained within that element gets duplicated out.
Also, I want to update that overflow and I want to hide any of the overflow so we don't have these
overhanging pieces of content.
So we've got images and we could do some really neat things here.
We can update any of the HTML we have here.
So even if we have some H1 tags, you're going to see that this is as well getting duplicated.
So now this one is a large one and and so on, so there's a lot of different things that you can do
and you can really play around with this and have some fun with it and get really used to working with
the dorm, creating elements and generating elements.
So let's do a quick code review of our current code that we have here for the application.
So we've got some styling that we've applied.
We've got some classes that we apply dynamically within JavaScript.
We set up a whole set of elements, so tried to make them as different as possible.
So whenever you have any elements fully dynamic, so if you have even more elements with that, copy
me.
You can see that these are also going to get output on the page so you can have as many as you want.
We also create an elements with an idea of garbage.
So this is going to serve as our garbage to get rid of existing elements.
We use JavaScript to create objects out of the elements so that we can easily connect with them as we
progress through our code, set up a default holding objects so that we have somewhere to place a variable
that we can use.
That's a global variable that we can access.
Looping through all of the elements with a class of copy me, we're looping through.
We're getting the element as well as its index value, which we're using as the element gets clicked
where invoking click function, so setting a bunch of styles and properties, adding classes.
So this is really to get really familiar with updating elements that are existing on the page and also
adding in objects and values into those elements.
So you see that these elements are just like any other object in JavaScript and you can extend on the
existing values within this object.
So there's already existing methods and also different properties and values that are already existing.
And you can extend that and add in your own so that each one of these objects now contains all of this
information.
And then you can use that information within your within your application.
So we saw that we created these dynamically and they each contain their own X Y moves IMT.
So they each have their intervals and they're each running this function of mover on a set interval
and when it runs out then it just clears that interval out.
And you see that we're setting a whole bunch of these values here as well as we're moving out.
So this is giving us that animation of our elements.
So that's another thing that we learned within the last lessons, how to animate elements.
And you can use this type of functionality to animate your elements by setting an interval.
Don't forget to have a way out of your intervals.
So make sure that you do have something that will clear that interval so that you don't have indefinite
movement of that element.
And then lastly, we added into the body, you could also add it into if you had another object within
another element object, you could add it in there as well.
But in this case, you just simply add it to the body because they're all absolute position.
Anyway, I going to get rid of the console message.
And then lastly, before we we finished up, we added the ability to drag that element by creating a
function called Draga.
And then we also updated the position of our existing elements because originally we didn't have any
different positions here within Kopi Mi.
So they were all one on top of each other.
And as we iterated through them, this is a great time to update those parent elements as well as well
as adding an event listener, of course.
We created a function to generate random color because they were all the same color and we want to bring
some color into our lives, so we generated a random background color so that they all can look different.
Then additionally, we created a function called Draga.
So what Draga does is that any element that we pass into Draga, we can then move around and you can
utilize this function in a number of different ways.
So it doesn't have to be these dynamically created elements.
You can also select an element and pass it into drugger so you can do document, query, selector and
select any element on your page and make a dragonball and pass it into this Draga object.
That's the nice thing about having these functions, is that you can utilize them in a number of different
ways.
Is whenever the on most down event is triggered, we do a drag of the mouse function.
So that's sitting within the Draga function.
We're getting that initial position of where the mouse is located and we're also checking to see if
mouse is up and if Mouse is up, then we don't want to move the mouse anymore.
So we want to essentially drop our element wherever it is.
So this is the way that's working is we're on top of the element.
We click down and that's where we can drag it around.
And once we lift up the mouse that we want to null any of the movement of that element.
So we essentially drop it wherever the last position update was.
We've got our mouse move function.
So if we are moving our mouse, we are going to be invoking this code here.
So when we're moving it around, so as long as mouse up hasn't gone off and as long as we're clicking
down on the mouse button, that means that we can move it around.
So we're moving it around.
We're setting the horizontal movement as well as the vertical movement.
So we're subtracting that initial position of where the mouse was located with the current position
as well as for the y axis.
And that's giving us a value of what's moved on that on that axis.
And then we're updating again so we can reuse them again, the position of X and Y of the mouse.
We're checking to see if a collision has taken place.
And if it has, then we remove that element and we'll check the collision function afterwards.
And then lastly, what we're doing is we're allowing the movement.
So we're resetting the style properties of top and left to correspond with the movement on the y axis
and on the x axis.
So we're getting that current element offset top value and this is numeric value.
So it's not with the pics.
So we don't have to turn it into a number and also with the left as well.
And then lastly, we have our Cleide function.
So this is another one of those really useful functions where we can pass in any element, object and
check to get its bounding client rectangle.
So that gives us a bunch of object values such as top, bottom, right, left, which we utilise in
our formula where we're checking all of the corners to see if there's any collision happening.
And what this does is this really saves us quite a bit of trouble because sometimes you can see the
collision detection and we're calculating the left position and then we're adding in the width to get
the right position and there's quite a bit more calculations done.
So this simplifies things the same thing with the bottom position.
So typically you would get the top position, which you could get offset top and then you would be adding
in the height of the object the element, and then that would give you the bottom position.
So really simplified it by using jet bound and client rectangle and gave us the ability to do a quick
comparison, return back a boolean value.
And we then of course, utilize that boolean value in this condition.
And if it comes back as true, then we know that we've got a collision.
It's on top of our garbage element and that means that we've got to null the mouse down so null that
most down functions.
So we're not dragging it anymore.
And we also need to remove that element from the page.
And this was another important function that is really useful because essentially it gives us the ability
to remove elements from our HTML page by specifying the element, traversing up to the parent and then
removing the child that matches its own description.
So now that we've gone through all of the coding, it's up to you have some fun with it.
And the real objective of this section was really to get comfortable with working with the dome, have
some fun with it, building out a unique application that you can have some fun with and practice,
working with different elements, moving elements around, and as well as creating and removing elements
from the page.
So go ahead and try this out for yourself.
Source code, of course, is included so you can try this application out for yourself.