I'm going to add some styling to that class, so the copy me class that we set up in the last lesson,
setting them up to be displayed, it will display them as inline blocks, also adding in some padding
for them.
And this is just some default style in a position of absolute so I can move them around and also set
up the max width so I can align them all together vertically or horizontally.
Text aligned and text align center.
Give it a default height as well.
I'm going to update the cursor to be a pointer whenever we're on top, so let's refresh.
See what that looks like.
So all of the elements are actually one on top of the other, so we need to take care of that and we
could do that with JavaScript, where as we're looping through each one of the elements, we can update
some of the properties to those elements so we can have that element.
We have it as an object.
We can update the style using style left.
We can set it to whatever the value of indexes, because remember, with index, we're already counting
each one of those elements.
Multiply it by 140 and then add in that picks in order to set it.
And this way you can see that each one of them is getting a line there.
And I'm going to adjust the width as well because we don't really need them to be that wide.
So we need to have one hundred between them and create a global object called Holder.
So this is where it can hold some information globally and we can use that holder object as we clone
additional elements.
So we're just going to create an object called object within that holder object and equal that to the
element that we've selected as we're iterating through it.
And this is on whenever we click that particular element, we're going to use the clone node method.
And what this does is a duplicate snowed on which this method was called.
And we need to just specify true that we want to duplicate this node.
Now, if we console logout holder dot object, you're going to see that we've actually cloned it, but
we haven't positioned it anywhere yet.
So you see that these are the clones and whenever you go on top of them, you click on them.
You see that nothing is happening.
We're not actually selecting these elements because these are clones of that element.
And we can also update some of the properties here.
Going to open this up a little bit wider.
There's quite a few properties that we want to adjust and update.
And since we've got it within this object, this is the ideal time to make these updates so we can update
the style and which we've already seen, that we can update style, we can update the cursor, the style
of the cursor to be move.
We can also add in a class if we wanted to.
So selecting our object and using class list, let's add a class and.
So call it new for the new element.
And let me set up a class here to contain that and I'll update the color of the text to be read within
this class.
Also, we can set background color if one or two, and there's pretty much anything that we want to
do.
We can set any one of the style properties.
So I'm selecting background color.
And how about we set a background color of green?
So we're going to have red text and a green background color.
We can also update the position of this particular element because remember, when we clone it, it
keeps all of those properties of that initial one.
So we do have the the the class as well in it.
And now selecting that element, we can use offset left.
So this is the same position as our parent element where an offset left.
And we can also update the top of it as well, so giving it a starting position to be the same as the
parent, so offset top.
And so this isn't the new element that we've created, this is the existing one, so we can add to it
if we want to.
So add to that top.
So let's do two hundred picks.
So let's see what happens and just down at the bottom, what we'll do is we'll append it to the document
body.
So getting our document object using document body, we're pending child.
And the child that we're spending is this holder object.
And we can spend it multiple times if we want to as well.
So let's refresh and try that out, so now I duplicate them, we see we're making copies down below.
So coming up next, let's make these move around, we make it so we can drag them, will also make them.
So whenever we create them, they look like they're dropping out of the parent elements that they're
being created out of.
And now, also, when I go over to the inspect, you can see that I've got a whole bunch of these elements
that we've created.
Some of them are on top of the other ones.
So there's a whole bunch of them here.
So we need a way to kind of move them around and eventually maybe even disappear them off the page and
move them around.
So all of that is still yet to come.
So in this lesson, focus on that Klown node method and that just gives you the ability to really easily
create a clone of that existing element.
And we were just using the one that clicked.
So whatever one started that event triggered the event listener.
That's the one that we're using and we're cloning that over.
And then we've just adjusted some of the style properties and you can see that as well within those
new cloned elements.
So try it out for yourself.