Teaching my 40 year old student with no experience programming | DOM Manipulation

Good. What's going on, Phil?

Dude, I haven't seen you in a while, huh? Yes. How's your trip? Good.

Hot, but good.

Thailand.

Yeah. Yeah. So went there for five days. Hung out. A lot of swimming in the pool, a lot of good food. Cheap, good food. I didn't plan on going somewhere hotter than South Korea, but that's what happened. I've got some questions. I know posting in, like, the discord, we. You kind of mentioned the git and getting those green bubbles. And so I also want to get into that offline. And so when we get back into this, what we're doing today and then back into the thing, I can start, you know, earning my stripes, so to speak.

Yeah, definitely. And I think, you know, we do have to have that meet up, you know, like, soon.

Yeah.

So what we're gonna do is we're gonna go to lessons and we're gonna go to DOM manipulation.

Okay.

All right.

So on zoom in front of me, looking at your screen, and then I have the actual live share on the right on my other monitor.

Cool, cool. So JavaScript can be used to manipulate the DOM. So you know how before I was, you know, like, when we're going to the project, we had a node JS project that was serving the back end. It was serving. And you were like, this is pretty cool. So that JavaScript. So this gets confusing because the server and the browser's JavaScript are totally different. Not like totally different, they're the same syntax, but they get run by a different engine. Right. Client JavaScript is used more for the brains of your website, making animations, all this kind of stuff. And the server, JavaScript is used as a server language, so handling the request, talking to the database, handling some cron jobs, schedule jobs about those. So you know how there's like, jobs that like, you have to handle like once a minute or once every five minutes or weekly. And that's called a cron job. And are you saying cron? Yes. Yeah. It's not the other one.

Okay.

It's a cron job. It's a chronological job. I think it's okay. And so today, what you can control the DOM with, right? There are things like making. So the DOM tree or whatever is like, it's like header tags, it's HTML. Right. Header div span. And then you have like attributes and stuff like ID and class and things like that. And you can target these and control them with your JavaScript in the browser. So I think the DOM stands for document Object model. Let me just confirm that real quick. Yeah. Document object model. So that's like a tree structure of like how the HTML looks and you call it DOM because there's a bunch of documents, there's a bunch of elements and it's storing the head and the body and all this kind of stuff. So we're going to kind of like go through a lesson of like how to change like so on a website. Have you ever seen anything cool? I don't know, maybe there was a button there and then when you've hovered over it, it turned bigger and it made some flashing effect or something. Yeah, so that's all JavaScript or when you go to a website and a header slides in from the left and then the body slides in from the right. I mean, I think you could do a CSS. But this is all running in the JavaScript, right? Or like what we're doing in the email generator, right? Like, you know, inputting some input somewhere and then all of a sudden you see all your inputs questions and you see it all filled out, you know?

Yeah, yeah, exactly.

That is all like JavaScript, it's like the brains of your website, right? Like HTML. I always think of kind of like the skeleton. The CSS is kind of like the clothes and then the JavaScript is kind of like the brains and the spirit of the website. Okay, so JavaScript can be used to manipulate the DOM that. Oh crap. I had a node here. Document object model. I didn't even need to look it up. So of a web, the DOM is a tree like structure. So I know that sounds complicated and like, like a tree is like. Have you ever heard of trees and like programming?

No, I'm thinking of like things branching off.

Yeah, exactly.

And I guess I said branching off, like that's cheating because branches aren't trees. But I'm thinking of when decision making tree, you know, like, or something like, like a flowchart type thing. That's my only reference.

That's exactly.

If somebody clicks here, then this thing happens and if they don't, then I guess that's something of decision tree. Maybe like in a video game. Video game reference.

That's exactly it. So if you just come here. So like a tree is kind of like this, right? Let's go here. And then this is going to be hard. This is going to be. It's going to be a tough task. Hold on, make it look cool. And then basically you're saying the decision tree you're talking about is actually a binary tree, right? It goes down and it's like A yes or a no.

Yeah.

Right. So you're talking about, like this kind of thing, right?

Exactly. Bless you.

It's not Corona, I guarantee you.

Oh, it is. You guys got the whole discord group sick.

Oh, how. So this is basically like what you call a binary tree. Right? So there's rules of a tree. Right. I'm going a little bit off topic here, but, like, this is a very programmatic thing. And then people will tell you, like, okay, like, how do you traverse through a binary tree? And then you have like a parent node, and then that parent node always has two children. Nodes. Child can never have two parents. Right. Because a parent, you know, like, there's rules like that. What I think more of like a DOM tree is like a heap. So that's like when I. When a parent can have like multiple children. Like, like you say it could be like this. Right. Which is kind of more like a heap.

Are you saying heap?

Heap, like heap.

I have no idea what.

Okay, okay. You're seeing my screen.

Yep.

All right, so let's see. The heap is kind of like. Because right now we just said a parent has two children, but, like, now maybe a heap, you can have like a parent that has three children. So it's not a binary tree, but it's like a heap. It's not like that important to know, but these are kind of like algorithms how they work. So, like, are you seeing here, like, how it has.

Yeah, the Fibonacci.

Fibonacci heap is a very good algorithm for searching, something. I'll teach you about that later if you want to. Yeah, it's just concepts that you kind of need to learn later on to kind of like speed in your code. So, like, you're not just going through A for loop 0 through 1 to 2 to 3, you're like, okay, you're trying to look at like a parent, maybe zero, and then you start looking at the next two, and then you start looking at the to next like this, and then that's a parent. It's a little bit complicated, but it basically just a way to make your program run gossip.

Okay. Searching for patterns versus the actual.

Exactly. So like an HTML, like people want to think like, oh, it's just HTML, but actually like the document object model, the DOM is called. So like, you're. You can traverse through a whole HTML in like a very fast way if you need to later. And with an algorithm. And I don't know why I got so off topic there, but I just want HTML is. Is a tree structure so and that's why like people will ask you in coding test or something like, oh, can, can you work with a binary tree or a tree? And it's like, dude, what the. Does this have to do with like my programming? In the end, later on if I just. Are you looking at my screen?

Yeah, yeah.

If you just like look at these elements, right, you have like a parent, let's say the body is like a parent, right? And then inside of there you have a bunch of inputs, input, input, input, input. And then you have another parent that has a child and then that has a child. Like it's a tree, right? It goes in and it goes. It's pretty deep. So I just went a little bit off topic there. But it's just like to see if you can traverse through the HTML DOM tree.

So Min loves it when you go off topic. Don't worry.

I know, I, I've noticed. And anyways, so. All right, well now we got that out of the way. So DOM is like a tree like structure that represents the elements of a web page. It can be accessed and modified using JavaScript. I'm just going to read that one more time. So Minju has a hard time editing it.

All right.

Okay. So JavaScript can be used to manipulate the DOM, the document object model of a web page. The DOM is a tree like structure that represents the elements of a web page. It can be accessed and modified using JavaScript. So, so you can access like the DOM with JavaScript. So in a script inside of the body. So there's like things like get element by ID and you know what IDs are, right? They're kind of like class selectors. Yeah. Then inside of there there's a bunch of attributes like inner HTML style, inner text. And you can manipulate that element with JavaScript, which is pretty cool. You have things like so get element by id. Usually when you're using id, you only have one of those elements that's like the correct way to do it. And then there's get elements by class name, which gives you an array. So class is used a lot for overlapping styles in your code. So like say you need a button that's like the generic default button of your app, right. You're not going to write that style over and over again. You're just going to make a class called default button or button 1, button 2, button 3 or like form button. And then you're going to put that, slap that class on to any button in your website. A website isn't random, Right? A website following the ui, the design pattern, it's very consistent. They're not going to have all of a sudden like 50 pixel wide button, and they have a 50 pixel wide button, and all of a sudden they have a 55 pixel with button and then a 60 pixel with button. The website's really big, but you're probably going to stick with just like one three star buttons that keeps on getting used. So I like to think of it kind of like Legos. Lego. And then you just slap those Legos together and you can make an app.

Okay, so like a standardized. Standardize some stuff with the class.

Exactly. Like shared, I call them. I like, in my mind, I just call them like shared styles, kind of. Okay, yeah. So then there's document query selector. Right. So we're saying document every single time because the document is talking about the whole dome object model. So document query selector is. So, you know, css, there's like, you can put like a hashtag container or period default button. So query selector gets a little bit more powerful because CSS selectors are pretty powerful. We take a look here at Zoom. I think I showed you this on a different day. But like, say I just click this div inside of here, right? Oh, this one has an ID. So, you know, Zoom has a whole bunch of IDs. Crap. This one has a class.

So you have the tools open.

I have the dev tools open. Like there's like a div inside of here. I could right click on one and then I could just. Yeah, crap. All right, all right. So I could say like copy selector inside of the HTML and then I would get something back there, right. It would be the. In the ID of content wrapper and the image inside. So query.

Oh, that's right. That's the query selectors that were gonna capture those. Those cookie crumbs left to the actual thing we want to change or select.

Yeah. So it's a little bit more powerful than just saying, get this id, get this class.

Boom, I got it. I don't know what you did, but now I see your tools.

Okay, well, so you can magic, but you can actually get a little bit more in depth. Say you only want the default buttons inside of the class of form containers. Right. So then you could actually just say like, you know, class form container with the. What is this greater than sign the class default button. And you can get a little bit more descriptive of your query selectors and select your elements in a more intelligent way. And then there's. But query selector will only give you back one Right. It'll give you back the first found element that you're looking for. And then queryselector all will give you all of those elements, right?

So.

So query selector and query selector all can do what get element by ID or get elements by class name can do, but they're just a little bit more malleable, They're a little bit more flexible. So also, now, attributes can be accessed and modified using the get attribute or set attribute method. So attributes inside of, like elements are like the class id, let's say src for source for image, or, I don't know, like type or value or any of those properties that you're putting inside of the tag. You know, like they're like bold, bold.

And italics, type of thing. Just talking about, just straight. Like a tag. What tag are you talking about?

So, like, let's say you have a div, right? So the attributes inside of here that you could put. So say I put like an ID equals J dip, right? So then I said doc. So I. Then I said const, const element equals document dot, get element by ID day div, right? So then if I said element dot set attribute.

Oh, so then I could go like that.

I don't know, like make loop. Right? So then, so say, then we had, like. Say we had like a style tag like this, and then we had some kind of make blue class that said class that said background. Okay, Color blue. You could just set the. You could set the attributes. So in the end, what this would do, right, would make this. Would make this div look like this.

Okay, so when we're talking attributes, I'm thinking of, like, all the CSS properties. I could be like, set attribute, border, radius, background, color, font size, bold, like font family. Those are all the attributes we're talking about. Or is there something else I'm missing?

No. So those are CSS properties or CSS attributes. You could call those, but what you could actually do are, like, these are attributes, like props. You see this ID is an attribute. Classes. What else could be an attribute? Could be an attribute.

Okay. Okay. So this is where if our style was actually back in its own separate file of css, then going through on our website and somebody clicks on this button, and then we say, hey, now this button, once it's clicked, we set the attribute to whatever, a class, and then, boom, now we got a blue button once it's. Once it's clicked. So we're not. Okay, okay, I think I got it.

So it said attribute is pretty powerful, especially mixed with, like, Inputs and like, sort of like image images. So, like, say you want to do like, src and then to like a really cool image. Like, I don't know, let's. I don't know, let's just call it logo. And then later on you say like, image, dot, set, attribute, and then you say src equals, like a new, new image, let's say. Right. And then that could work. Thank you. I don't know what. I'm coughing a lot recently. I think I'm getting old.

It's like covet.

I. I guarantee you I stuck that Q tip up my nose.

So far, you gotta tickle the brain.

I think I damaged the brain.

The worst part about it, when I got tested, when it was like when all the teachers had to get tested, I went to someplace thinking, okay, they're just gonna do the. The nose. And so I get. And they jammed up my nose. My eyes are water. I was like, okay, okay. And then she pulls out the other one again. But then she hit my throat too. Back of my throat.

Can you hear me?

Yeah.

All right, cool. So I just want to do a couple DOM exercises with you. So I have an index HTML here, right? And I think we did something before a long time ago. We're gonna remove all this stuff and we're gonna remove this stuff and then we're gonna have an ID container and dip. And then I'm just gonna start a live server.

Oh, I'm in the live server already.

Oh, no, I mean lives. I mean, if you look at my screen, you can see the output of what we're going to be working with here. You see my screen. If I put, I don't know, hello, world here, you'll be able to see it. Right?

I gotcha. I see where you're at now. Yeah.

And then just follow me into index HTML.

I'm there.

All right, cool. Thank you. So right now we have something called a dom, right? We have this HTML file and it's holding an HTML tags head tag. And the head tag is holding some meta tags and, like, the title. So over here, if you look at my screen, like the meta tag controls things like this name right here, it says document right now, but if we say, like manipulate dom, it'll say title, it'll change the title there. Right? You see it?

Yep. I don't agree with the all caps, but it's yours. Oh, man. All that coven.

I. I guarantee my mom did get coveted, though.

There it is.

She's been inside for the last, like, month in her house, just Trapped with her dog. No, sorry, but I don't know what it is. All right, so let's think about something to build through the dom.

Like because we with the DOM manipulation, we want it to be like I'm doing something on the website and then something changes, right? So that's where officially manipulating it.

Okay, so I built something cool the other day. How about we make two columns, right? And then inside of there we'll put some cards. And then if we press on, add, add to other column we can move it over and then we can move it back over.

It makes sense. I'm not sure code wise how it makes sense because I'm thinking in my head first I need the base. So I need three divs to start off with. So with two divs inside of one or I guess two more divs inside of the. The container.

That's correct. So we have the container id, right?

Yeah.

And then this will be display Flex. Flex. And then I'll do flex one so it takes up the whole screen. You can do it this way. And then. And I think that'll be cool. And then we'll put columns right as class. And they'll take out flex one and we'll just put a border one px solid black like this. And then inside of our container we'll have two divs.

So that's the classic columns.

Exactly. But why isn't it working now?

Closing.

All right, so now we have two guys and then we need to height. All right, well, hold on. Oh, I guess the self closing type doesn't work inside of here.

That's what I was wondering. But only because it's a gigantic. I don't know if it's on yours, but on my versus code it's like a gigantic red mark.

It is on mine too, but. Okay, but usually you can self close tags, but I guess not. All right, so you see how we have two columns now?

Yep, got them.

All right, so now we need a car.

You said cards, right? So we want like a cards class.

All right, so that's a good idea. So let's put a cards class. Sorry, hold on. Let me just get this all out of my system.

No, no. Mintu loves editing this out. Coughing ass. It's some water. Your editing's garbage. So what I'm thinking is a story I've been working on a little bit. It's called Minsu is a hot piece of trash.

Hey dude, I'm working.

So Mint has got something to edit for you.

I want to make this video the Hardest to edit for Minzu. That's. That's my mission.

It's like the final straw edit video where he's like, no, no more. No more.

No mas. Yeah, dude, I've been boxing a lot, dude. I. I found my love for it again, dude.

Dude, I'm. I'm so freaking jealous. Like, I'll talk to you after class about what's going on, but after this session. But yeah, I'm jealous because I saw some dudes, South Korea, like 30, 38, I think one was 38, 39 years old, like boxing in one of the tournaments. So just like, there's no reason. I got one more, one or two more in me, I think.

Get it in, dude. Get it in.

Yeah.

All right, so we got two columns, right? Let's just make just a practice one here just to see it. You know what I mean?

Yeah.

So we'll make a cards and let's just give it like a height of like, I'd say like 300 pixels and then a width of I'd say 100. And then border one PX. Solid purple.

Oh, Dodger blue. There we go.

All right, so now we have like kind of like a card.

Hey, not to be. Not to be persnickety, but can you change that to like 90? Oh yeah, the width. So I see. Yeah, just so I see. Like it's not touching.

All right.

Did it work?

Hold on. Let's try 70.

I think you got to get rid of the quotes.

Oh, really? Oh, then maybe now we got.

Now we got problems because it's not centered, you know. But anyways, I.

All right. And you'd have to do like the Justified content center Fresh here. I don't even know. I don't remember.

Dude, you gotta do it on the cards. Or I guess you can do it in the column part, but if you just go to like margin auto or something. Anyways, I thought you would do it.

Here and then the parent would.

On the column.

On the columns.

Yeah, no, I don't think so because we don't have the doing on the columns. But the columns are already taken up the 100. 100%.

No, but the justified content is talking about the contents inside and the line items are talking about the content. But I thought.

But you can do like the easy one, which is margin left margin right, auto and go for that. I know I always end up changing it because it doesn't end up how working like I want it to, but there you go.

Okay, so sidetrack. Oh, here we go. So now we have this and then maybe we'll also do. All right, well let's go with this and then let's see what happens when we add like. Basically what we want to do is we want to be able to click on a button inside of a card. Click on it again.

It goes back, right? Yeah.

All right, get rid of those cards and basically in the script now, right? Basically. I know, right, that we're going to need a selector for the, the container, right? Let's say document. Wait, no, no, no, let's go container equals document. Get element by ID container, container. So that's going to get the container and then we're going to get, we're going to need left column, right? And that's going to be document dot query selector. So query selector. And then we'll say inside of container. The end. I think it's the nth child, the first column, right? Yeah. So we gotta go columns. Do you remember child selector?

So I guess I just remember like first child and then I don't know after that.

Oh, there's a first. Let's try this one.

The first child. First element child.

I think we just do this. It's the first child in there. So just end child one maybe. Let's see if that works. This would be sick. Right, then we did right column and that gives end child 2. Let's see if we get any errors. Console log, left column equals left column.

Right column, right column.

Okay. All right. Okay, cool. So we did, we did get it, right. Nice.

Boom.

All right, cool. And child is really powerful anyways.

Yeah, I gotta write that down because I. Way easier than the first child thing I'm thinking of because the numbers is a dead giveaway as long as I, as long as I can count, right?

Yeah, yeah. All right, so now we have, let's say we have punch left cards. All right. Do some weird ass syntax on you.

What in the world?

And then on the left cards, dot for each. I'm just blowing you away right now, aren't I?

Yeah, that's too much.

No, I just got. So this is the same thing. I, I like to just gotta like, you know, make the code look fancy. But honestly when people do this, they're just trying to like, like, you know, I mean, it is more comfortable once you get to it. Right? But this is just saying, hey, I want five array. So if I try this, it's just a range. So it's 0, 1, 2, 3, 4. Okay, so it's saying array five length. Right? And then give me the key so at array of five, what are the keys? 0, 2, 3, 4. Yeah, right. Like, so if I did like array five keys, right, they'll give me some kind of iterator here. But then say that I just wanted the keys. I say I want an array and then it'll give me like the.

Oh, geez, it's.

It's an easier way to kind of. So, you know, it's kind of like an easy way where you can make like 100 or you know, like say you need a range like from one to. I always do. It's a code. I'll give you utility functions. So say I need 1 to 100 array. If I spread the array, it would be all undefined. But I said give me the keys of there and then I'll say. I'll say plus one and then I can slice that one so it doesn't start at zero, and that'll give me one to 100. Okay. Well, it's. It's just a short way, but yeah.

I have no idea what you would use it for, but now I know you can create it.

Yeah, you always need like a range sometimes. So anyways, so now we can do like a four. The four.

Let I equal zero I less than left cards length I plus plus.

All right, so you have like this kind of function, right? We have to set a bunch of like. It's a lot of code you have to write out, right? For each will kind of just go through the whole loop for you. So I have an I here, right? And then I can just say inside a left column, I'm going to say, let's see this one. Construct document create element. Whoop Card equals document dot create element at div.

So we're going to create a new div, right?

And then we'll say guard, set attribute of class to cards and inside of the cards dot. Then we want two buttons, right? Or the add button. Let's just make the add button first. Move right button equals document getelement. I'll show you an easy way to do this after.

Okay.

The hard way first.

So it's going to be get element.

And then document, create element, create element and then button. Yes. And then what do you think?

The same thing with left, but I don't know, we're not doing left, right?

How about move right button.set attribute you say on click now then function.

So right now with this console log, we're going to see if all of this works, right? Just with our. And then we. We should end up seeing the console Log, make, move. Right. Logic.

Exactly. Okay, now we'll say car append, will append, child inside of him.

And we're going to append the card, right?

Well, no, we'll append first. We'll append the right move right button into the card. And inside of the left column, we'll append the child to the card. Right.

I think I know what's going on, but not entirely sure.

All right, and then now we have a whole bunch of buttons. And then actually, no overflow. Now we have a little scroller. Oh, you see a button here, right? And then if we click on here.

Oh, no, your screens, like the dev tools is way too big.

Tools are way too big. How about now?

It's still there.

Hey, what's up, boys? What's up? It's late, boys.

What time is it?

It's 11, dude.

You know, Phil's old streaking, just rambling on about.

Oh, what can I say? I can't. It's saying that I cannot make an anonymous monkey here.

But this is the part where it's like, always gets tough for me when I start about.

Oh, what can I say? I can't. It's saying that I cannot make an anonymous monkey.

This is the part where it's like, always gets tough for me when I start setting the. I start creating those elements and then creating an element that I don't even see yet. And now I'm adding attributes to it or I'm changing it and like, but I can't see it. So do you feel like there's a better like. Because most time, like, if I was going to create this card, I'd. I would do what we did at first. Like, what I want to be in the card, what I want to look like, and then capture that. Oh, now I can see everything.

Everything. I. I changed the set attribute on the move right button. Sorry, I'm cutting you off. I just want to get this. Get one of those cards moved to the right side. Continue it next time.

Okay, let's go for it.

All right, so what I'll need to do now, right, is we need to make a const. Write cards, right. And then set some empty array. So now we have to kind of like give one of those indexes to the other to the right card and then reset the inner HTML and then kind of like, you know, keep doing that. Right.

Every time.

Yeah. So if we have a move, right, it's going to be a huge function. It's going to reset our indexes, going to reset the Left cards for each. After we move some, move one of those next to the right, and then we're going to have to do, you know, go back and forth. So let's give it a try. I don't even know. So four seconds. Come on. All right, so right here. So you see it? There's a button, right? Anyways, it says move right Logic, right?

No. Your code is sitting on top of your. On your screen. Your VS code is sitting on top of your. Your Live server. Is it like that on yours?

Yeah.

So whatever button you're trying to show me, I don't see it because your. Your code's too big. On. On your screen. On your screen. On Zoom. I. I can see your code just fine on. Because I have Live Server on the other side of my computer. But no, go to your VS code and then close out your. Your Explorer. Like, click on your Explorer. That little.

Is that good?

No. On. Why is it. That's so weird. It didn't move at all on your screen. On Zoom, it's like the same exact size. It still looks like your Explorer is open.

Oh, man. Here, let's try this one then.

I don't know. You have to ask Minsu to see if he sees what I'm seeing.

So what do you see?

He's asleep already.

Let's try. Oh, crap. I'm gonna close that information. All right. All right. What do you see on my screen now?

Same thing.

Really?

Yeah. Here, I'm gonna Request room.

I'm gonna stop sharing. All right. And then try to share. I want to see if there's anything going wrong with yours, please.

Well, I was gonna share my entire screen. I just don't know which screen is because they're both labeled the same. Oh, my gosh. Stop doing this. You see mine, it seems like you.

Have a vertical monitor, so I got.

It for, like, over here on. I don't want to put you in the. But it's like your stuff was all on top of each other, stacked, so I can't see. So I. I end up. I end up seeing, like, half of your code. And I think it's because everything we're working on is that left column underneath. It's just, like, you know, for old, older windows, how it's stacked. But it used to, like, if you click on the active window, it moves to front.

Yeah.

So but for whatever reason, on Zoom, when you're sharing, even though you might be moved to front on your computer, it's not moving to front on the. On Zoom.

All right, well, let's just try it real quick. I'm just gonna.

Are you using Windows? No. You're using Mac, right?

Yeah.

So I think there's something you can do to make it so they stay equally the same size on each side of the screen.

It's too wide. And then I think it's just. You're using the narrow monitor and I have a widescreen. All right, so I'm gonna try something here.

I just see all black right now.

You see all black?

Yeah.

You don't see anything?

Nope. Just black.

Because on mine, I see it now.

Nope.

Why? I'm thinking. Dude, I'm thinking. It's hard. It's harder than I think. Hold on.

Harder than you thought?

Yeah, harder than I thought. So, left cards, dot splice, and then I just. I'll need to remove from the I at one. Right. And then if I console log left cards after that. Right. The one that I wanted to remove should be removed. So you see how 0 is removed from here now 3 is removed.

Shouldn't 4 be gone?

Yeah, but there's. I needed to rerender. Oh.

Oh, you ended the collaboration. Oh, that's how you feel about your Coke?

Did I end that collaboration?

Let me see if I can just open up the. The previous one that you sent me.

Why not?

Yeah, it's closed. I need a new link if you want me to follow on. But I can still see it on. I can still see it on your screen.

All right, let's just do that. Real. I mean, I sent you another link, but. All right, so at least you know what I can do here. And then I'm going to take this function out. I'm going to say I'm going to make a function called make card, and that's going to take an index. All right. And then I'm going to take all this out here. Oops. I can reuse it. And then basically.

So when you like. I guess I don't completely understand the array part. Yeah, I mean, excuse me, go back. Like, why aren't you just destroying and creating. Okay, yeah, but is it. I'm not easier, but, like, in my mind, you would like. Oh, which one did you delete? Like, are you trying to keep track of everything via the array?

I'm trying to keep track of everything.

Okay. But I guess maybe that's why I'm not. I wouldn't be keeping track. I'm just trying to follow, make sure I know what. What you're trying to. What's supposed to be happening. So even if we no matter what, when you click on, based on the number that's in the array on the right hand side, it should be inputting that into. Pushing that into that array. So if you click on 2 or 4, then it should be 2 and 4 on the right column. And then 0, 1 and 3 would still be on the left. And then again clicking on the right column pushes it back to. My question is, so say we push the odd numbers over to the right. And so now we have on the right column we have one. Oh, one, one, we have one and three. Let's say that. Right. And so on the left column we have 0, 2 and 4.

Yeah.

Now what happens on the right column when I select 3 and I click on 3 on the right column, it's going to go back to the left column. Is it going to be 3, 02, 4 or is it going to go 0243 at the end? Can we.

What I would like to do is just put it back in sequence.

Right, okay.

But you know, it's a lot easier said than done. Right now we have a make card function and then we have a move right button. And then basically in here we can say penchild make card impact failed append Child on node parameter 1 is not type node push right column append child. Oh, sorry. We're going to take some logic out. We're going to say const enter. We need these ones. That's going to be the return card out of this function. And then for left car we're gonna left column append child and then const card equals like this. That makes sense to me now. And then if I click this now it should, it should go over here. Now we move one to the right. Right? You saw that. So now one is over here. You see that? But we have the first part of the logic that we created so far.

And so now we gotta remove the one from the left column, right?

Yeah. Okay, so now we have to remove one. So.

Or some type of removal function or what actually is it?

I'm thinking. But then at remove, after we remove, we also need to reset. Right? And that's the hard part that I'm thinking about right now because. So right now I can say constant. So I can say basically left cards got spliced on the at index at 1. Then I can say left cards dot for each.

You wouldn't just. Because I know the logic is happening there. It's just the visual part is still there. Right.

I'm just.

So would you just remove the child? Do remove child at the end of.

It, is there a function called left child, remove child? Is there something like that?

I don't know. I'm guessing other than create element. Right. I think there's remove. I don't know if remove child's the right one.

Well, here, let me. And then I think I got it. Hold on. And then left splice, and we'll say child, left column. And then we'll say left column. Inner HTML will equal nothing. All right, we're trying. So our expectation here is this. Zero is going to remove here, and then zero is going to move here. Let's do it to one. All right. Okay. Okay, so zero, three, four. And then one is moved here, right?

Yep. Three.

Now we're hitting above.02, three. And then I got three here for some reason.

Right, because your four went down.

It's like an index is getting messed up. So it's a. But at least we moved something to the right side. Now I'm going to push this code and then just take a look at it. I think it's a little bit interesting. So let's, like, figure it out together and. Yeah, it'll be fun.

All right, sounds good. Yeah, I'll work on some of this stuff. And then, because I know you. You dropped a lot of stuff and I took a lot of notes, so I know I got to look at some other things and then get back in. Or, like, mess around with this Dom a little bit. All right.

Dropping those knowledge bombs, man.

All right, dude, I'll see you later. Oh, hey, you're shot.

Oh, right. Okay, let me get the code back up and then let me share the screen again so we can get our screens there, Faces there, share and. All right, and then I'm just gonna. All right, and then I will do like this. No, I'm gonna.

I'm ready.

I'm gonna change my camera. No, no, let me move you over here, actually.

I locked up my nose for so long and wait for you to take that photo, man.

Dude, chill, please. I don't know how to use a computer. I don't know how to use a computer. Sorry. All right, I think I got it. I think I got it. All right, now I can move this over here. You want to do a glasses photo?

You wear glasses? Yeah, yeah, I don't wear my glasses too much, dude. I would get in trouble all the time at boot camp because I. I don't wear my glasses. I wouldn't wear my glasses that much because my vision wasn't that bad. So we'd go wash our hands, take shower. I take my glasses off and be walking around. They're like, whose glasses are these?

And I.

Man, I did so many extra push ups because I left my glasses everywhere.

I got ripped, dude.

Yeah.

I'm gonna take a photo. All right.

All right, ready?

One, two, three. All right. Thank you. See you next time. All right.

All right, later.