Kanban Board with HTML, CSS, JavaScript | JavaScript JOB READY Free Course (2025)

Hey, what's up guys? I'm Phil. That. Thanks for the introduction. It's. But I'm glad everyone's here today. We're just gonna do a free course. It's like nothing that serious. We'll go a little bit fast, we'll skim over some things. But I really wanted to get a project done today. I. I did some studying for a project yesterday so there's like something called the Kanban board. So you can kind of like take tasks from like to do in progress and done and we'll kind of make cards that go into to do and then you can switch them over into in progress and to done with a drag and drop feature. So that's what we're going to kind of set our goals over today. I'll hope you guys can see my screen. Everyone can see my screen. Okay. Type one in the chat. Okay.

Or yeah, doesn't matter.

All right, so I have the GitHub repository and under projects there's a complete one and there's a one that we're going to do together. I'll show you what it looks like now. So one second, I'll dispose this, I'll go live and we'll basically make this guy the Kanban board. You can basically just add a task like code today. Add a task and then you can drag and drop into in progress and then into done. And we won't do any kind of like backend stuff today. It's all going to be client. All going to be run in the browser. We're going to work with things like local storage and client side JavaScript and just be able to kind of like work with the DOM a little bit. And if I am going too fast, you guys can raise your hand and just ask questions but. And Minnie, can you tell them like this will be on YouTube later, right? Or can you tell explain that a little bit.

Yeah. So this screen here, the screen itself and Phil's face will be in the recording and you don't have to worry about your voice or any of that being recorded. No worries. It's just for, you know, everyone as well as you know the YouTube community to be able to watch this code later. But yeah, just very thankful for you guys being here. Like I said, we're gonna do this, we're gonna build on this momentum every week. So if you guys can make the class every week if you want to make some real progress because we are going to go fast. But if you're here every week grinding with us, then you will make Tremendous gains. So please try to join on this time every day or every week. Yeah, we'll keep going. But do not worry too much about the YouTube thing. You will be able to watch this whole lesson again for sure.

Thank you, Minnie. And also, like, we will go fast, but the main goal of this is to finish the project. But actually, like, we have a goal of finishing the project, but the main goal of it is to, like, understand everything. Right? So I really want you guys to, like, take this and then be able to kind of like use it, use the knowledge from it in other places because, you know, kind of like it doesn't just apply to this project. One second, one second.

Please wait. Oh.

Sorry, the. The cleaning lady's here. She needed the vacuum. All right. Any. Once every two weeks. It's not like she comes every day, but I'm sorry, Sorry about that. So we're going to go through it. I want, I want to kind of just skim through JavaScript basics and what JavaScript is basically and kind of get through that and skim through and then we'll get to the project in about, I would say, like eight, 10 minutes. And then we'll kind of just code through and watch as we can go and wait and every. Everybody in the chat, I think you guys filled out the form. Can you guys, like, if there's anyone with no experience whatsoever, can you just type one in the chat? Kenneth? Okay, cool. If you do not have any experience, don't worry like after the course or whatever. Don't, don't be shy to like message me one on one and I will go over it with you again if you need it. And that goes for anyone, to be honest. So let's, let's get through it. All right, so does everyone have the GitHub repository cloned? I gave you the link in the Discord free JavaScript course. Can you type one in the chat if you clone the repository? We are not coding along yet. Okay, amazing. So if you guys do not know how to do that, you just have to go to the link that I sent you and there's this green button called code drop down and if you have your SSH key set up, you can use the SSH to clone it. But you just take this guy and then you would just git clone and do that and it would give you the. It would clone in. And that's my new free JS course here, but I'm going to remove it because we don't need it. Cool. So we have our lesson and today's the first lesson. And I just will scrim through the JavaScript. Wait, wait, wait. So setup is on. Wait. Okay. Actually, if you're using a Mac, can you press 1 in the chat? And if you're using Windows or 2 in the chat. Okay, amazing. So I'm glad everyone has a computer or if you're even using Linux. But. All right, there are two package installers. It would be nice if you guys installed them. Mac OS is Homebrew and Windows is Chocolatey. I like these package managers because basically, you know, if you install things from online and the Internet and the browser, you don't exactly know where you're installing them, in my opinion, because you install them, sometimes your downloads folder, sometimes your documents, and later on when you have to clean your computer of, it kind of gets a little bit messy. But I like to use these package installers because they're all in one place and it's easy to clean your computer later. So that's something that I like to do, but it's not required. And text editor. I like using Visual Studio code, but there's many different ones like Jetbrains or Page Webstorm or whatever, which is Jetbrains, Visual Studio, code brackets, whatever. They all work the same. So. And then browser, Chrome, whatever, whatever you want to use. And then Node JS is a pretty big one. I use ASDF because it's a version manager for all of them. Please share this theme later. Okay, I will for sure. It's a very obscure one. Not a lot of people use it, but it's very good. I like it. Anyway, wait, let me just. One second. Mute. Minnie told me to mute my mic whenever I clear my throat. So saving you guys ears. All right, so just the setup is like pretty simple. You just need Visual Studio code Node JS installed. Just make sure if you type like what, like node minus V in your shell, you can see some kind of version that'll make sure that you have Node installed. And then if you ever type like node, you can like do things like that Node can do like hello world.

Cool.

I'll just. What is this command? Exit. All right, so nice. Here's the readme. It's really up for you guys. I made this readme to kind of like explain what web development is. You guys can read through it later. It's in the repository. Just some cool stuff. Like just a little bit of like, what are these, like notes that you can like, know what you're doing? All right, so. And then basically you have a. Read me one second.

Wait.

All right, so we'll go to the JavaScript basics. It's basically the same thing we have. What is JavaScript? It's an interpreted language which, meaning it doesn't compile, it's read line by line. And if you need more questions about that, please ask me later. But JavaScript is the language for the web. It's the only language that can be executed in the browser and the server. So that's why I feel like it's so powerful. So if you get good at one, the syntax is the same to run like server code or client code. And there's basically JavaScript that runs in the browser, which is run by Google Chrome or whatever it is, and JavaScript that runs in Node JS on the server. And there's like some JavaScript orders, like to learn variables and data types, operators, control flow functions, arrays and objects. I left that here for you guys. So basically I'm just going to skim through this real quick. Basically instantiate a variable with var, letter, const. These are kind of keywords to kind of. I kind of think of variables as like buckets where you can like store data in. And those datas that are the types are like numbers, strings, booleans, undefined null symbol and bigint. But you don't really have to know those. And then there's reference data types, arrays and objects. And arrays are like buckets, bigger buckets that hold little data types. And then objects are like key value pairs that can, you can have a key and then you can hold some kind of data type in the value. So I'm going to leave these up for you guys. Like I can go over it with you guys if, if you ever message me. But I think we should get into the project as soon as possible. So I left some exercises here too. And just the order of read order to read them in. Just ask me any questions if you have any, like, problem with it. And a big thing is control flow. So that's like. So basically any programming language is just basically instructions to the computer, right? It's step one, do this, step two, do this, Step three, do this. And Control flow is going to help you. That's going to be like your if else, if else for loops, while loops and all that kind of stuff. So that's what controls your scripts and controls your data. And basically in the end all you're playing around are with like numbers or strings and basically telling it, telling the program what to do with them with if and else. So like, if I don't know if it's true. Do this. If it's false, do this. And then kind of like control the script line by line. All right, so today we're going to make something called a Kanban board. Kanban board is basically kind of like if you guys ever think about like a long time ago they used to do it on post it notes. So you have like three sections and wait, maybe we can just go and draw that IO real quick. Create new diagram.

Create.

So basically what we're going to create is this kind of. Let's think of this as a web page and then.

Whoops. Yeah. Yeah. All right.

Back in the day I think you used to have this. It's part of like an agile workflow, like a way to work. But you basically have to do section an in progress section and then you have a done section and back in the day you'd make like a posted note and then you'd say hey, like make a call to HR and then you'd move this card over to in progress so no one else touches this task. Because you don't want to overlap tasks because that's what causes a lot of fights in the office. I already did that but. And then it's just a waste of time in the end. So I think in every single programming job you, you kind of use that anyways. Cool. So you know, so you don't overlap tasks and everyone knows exactly what everyone's doing. So you don't overlap tasks and you keep on, you can kind of create a very streamlined, optimized workflow. So that's what basically we're creating. We're, we're going to create, we're going to use some HTML CSS and JavaScript and an HTML. You kind of basically think like it's the structure of the web. CSS is kind of a style. So some like sunglasses in the summer or something. That's how I like to think about it. And then so structure like a skeleton and then you put on some like clothes of it and then the JavaScript is what's going to add the interactivity. Interactivity meaning like the drag and drop feature or like when you press play on like a YouTube video or if you press a button to submit something that's all JavaScript working that in the background. So we're gonna go and get started. I'm gonna turn off so job. So if you guys don't know, Visual Studio code has something called like I think it's called Live Server. Oh and that is the theme. Rbiter comes from a German Word autobyte and Korea uses it. It means worker. But anyways, it's called Live Server. And Live Server can kind of launch development local server at a port that you need to kind of see your HTML, CSS and JavaScript. That's what we use today. But maybe next time I'll show you guys. Or next time I'll show you guys how to put it on your own server so you can deploy it actually like with Express and Node js. So we're going to use this package called Live Server. So if you don't have that extension installed, you guys should use it or. Yeah. And so Kanban Board is a tool for managing work and workflow with drag and drop functionality. You can move tasks between columns like to do in progress and done. All right, so the first step we need to do. And just so you know, if anything happens and you guys have any questions, there is a complete section with the whole project done. So the first thing I think we should do is make an index HTML and that's what is going to hold all our code. And then there's a. If you guys don't have it yet, something that helps coding is something called emmet and I use Mithril Emmet and it kind of shortens code so you can kind of like put a bang operator like this and it makes the HTML structure for you. You can like put H1 hello world. And it's kind of like shortcuts to kind of make the markup HTML. And anyways, so we have. So basically all I did was I pressed the bang operator, I pressed tab and then it gives me the. So basically every HTML website, if you ever see any source code, it all starts out like this. You have a doctype to tell the browser what kind of file it is. HTML, you have the HTML tag that holds everything and you have the head which holds like your meta tags. Meta tags, meaning like the. What you don't see like the information of your website and the body, which is kind of like the skeleton of what you're making. And a couple of things we're going to use are like. We're going to use div. So div is like a container, starts out like a square. It's. And it's a container that can hold other things, right? Like your text, like your H, your text, your images and whatever like that. I like to think of HTML kind of like Lego blocks. And to make text you have like header tags like H1 all the way to H6 H1. H1 being the biggest one and then it gets incrementally smaller and then you have a P tag, which is A stands for paragraph. And there are more, but I don't, I don't really use anything more than that, to be honest. And then you have something called like, wait, let me turn my GitHub copilot off. And then you have H1, H2, H3, H4, H6, and then you have like image tags, but we won't use those today. And you have like a button which will make, make your website interactive and you can put event listeners on there. So those are what we're going to use today. And basically let's just start. So I'm going to put the workflow I like to go with is, oh, I found something really awesome recently, which is.

Crap.

No, never mind. It's Live Preview, but I don't think.

We need to use it.

All right, so I'll go live here. So now it's an empty website and you can tell it's, you can tell it's this guy because if you look at the elements, it's just our body that's empty. And if I basically put like hello.

World, you can see it, you can.

See the output on the website. So step one, go back to the readme Step one. First step, let us use the bang command to create the HTML layout index HTML and we'll have two sections. So those are the divs I was talking about. And the head section will contain the title of the page and the board section will contain the Kanban board where we'll, we'll have three columns to do in progress and done. So the first step, let's just make two sections. Div. First section.

If second section.

Basically now we have a first section and a second section.

All right, now the second step, Close this guy. Close this guy.

Second step, the style css. Everyone knows this about me, I don't like doing CSS that much. But I, I already added the style css. There's too much syntax, like to be honest, to like teach everything right now. But I'll kind of explain like a little bit. Like basically you have like font family, background color, they're pretty self explanatory, but all these classes, there's kind of selectors, the dots mean classes. And then if you see any hashtags you'll be, there'll be IDs, but these are kind of attributes that you can put into your HTML. You kind of select them and then add the style to them. And there are, there are two different ways to add the style or three, there's the CSS file and select the. The. The container or whatever to kind of like put the CSS in and attach it to the element. Or you can do inline styles and I'll show you how to do that as well. Or you can just insert it with JavaScript later on and that'll be. That'll kind of come later. But basically all I wanted to say is the CSS is kind of already done for us and we can play around with it a little bit. So we have. So we go on the readme. The CSS is already in the project. You can use it style the Camden board and. Amazing. Yes, css, you know, it's not really like. I wouldn't say it's like too difficult. It's just tedious and it takes a long time. Anyways, so the first thing I want to do is I want to use something called a font. Right, you want to make the font a little bit different. So right now the default font is like Times New Roman or something. Something's. Yeah. But I want to use the font Roboto. So I'll show you guys how to do that. You'll go to something like google fonts fonts.google.com and this first one, we want to use Roboto. And then you press something like get font and then get the embed code. And then there's like a link here. So you can just link that in your code.

Whoops.

So it says embed code in the head of your HTML. Just gonna embed this one. So put that in the head. I'll put a comment Roboto font. There we are. And now I refresh and I put like.

Let'S see here in the style Roboto. One second.

Using the Roboto font now. Now it's using the Roboto font. It's able. It's. We can use it now.

So it.

Changes it and we can use the Roboto font.

Cool. So next, let's see here.

Now let's make two divs. We did that. And one with the class of head and one with the class of board. So we'll go in there, make two.

Divs, div times two.

And then we'll do class equals the first one. We'll call it head. Class equals. Now, as you can see, we have a head with a background color of. Ah, we must link the CSS file too. So that is why the roto was not. Let me do that real quick. All right, now this is where we'll link css. So CSS stands for cascading Style sheet. Basically, we need to link this style CSS file into our HTML. So the way we do that is link rel equals the type of file style sheet and the href where we're going to get it is the style css.

There we are.

Now we see a blue thing here that's getting. That's basically our style head. So you'll see that it has padding 20px. And whatever we put in here, the text will be white and the background color is this blue. So if I change this to hot pink and save, it'll turn hot pink. I'm going to go back and we'll stick with this light blue here.

So next, what do we need to do?

We need to. Inside the board div, we will have three divs with a class of column, one with the ID of to do, one with the ID of in progress and one with the ID of done. So I like to use IDs to kind of. It's easier to select them with our JavaScript later. And you'll see that because I'm using document get element with id. Yeah, by id. So inside of there we'll have.

One second. Let me just check my readme. All right, so we'll make three divs.

So if you have Emmett, you just do div times three and it'll make three divs for you. And each of these will have a class of.

Let me see. Readme. Let's do like this. Nice one actually. One actually. I'll show you guys one more cool thing.

Div dot column for class times three. And each of them will have column and then one will have ID of to do welcome rally. And then one with the idea of in progress and one with the ID of done. Let's just make sure they're on the screen. We'll put to do.

In progress and done. Now, let's see.

Now we have three little section column sections that are going to be responsive like this. If we pull it apart, it'll be like this. Responsive, meaning it can respond to like different, different screen sizes.

So.

We'Re going to kind of work on this layout here. So inside each column div we'll have an H2 with the name of the column and add an hr below it. HR is kind of just like a line break.

So we'll make an H2 and then we'll do. To do with an HR.

Copy paste that.

Put it here and put it here.

This one will be in progress. So now we have a to do an in progress and a done with a line underneath.

Very cool.

And inside each column div we'll have a div with a class of task container. So let's just inside of here I'll make a div with class container or.

No or what is task container and we will put it underneath here.

Now we have like a little. If we inspect this, we'll see that it has. Each column has a class and then there's a div inside. But there's nothing in there yet. So just give it a second. And then let's just add an H1.

Here in the head too.

H1. What should we call it? Anyone know like have a title that they want to use? How about let fill tasks? Anyone? Anyone got a good title for the.

There we are.

Now we have left fill tasks here.

Very cool.

So we have two attributes or events that we can use to make the task dragged and dropped. So I will show you guys that. But they're event listeners. So inside of the div of column we're going to have two attributes on drop and on drag over. So on. On drag over is going to be. Is going to handle like when. When a mouse is clicked down and with the draggable element over it, it'll fire off an event. And then on drop when the mouse click is lifted up over the on drag over event, it'll. It'll fire off an event. So for now I just kind of want to add the attributes on drop. So you'll see like all the like on events that an HTML can have. HTML element can have. But we're going to use on drop and on drag start and we'll just keep it empty for now.

Over. Let's just copy paste that and just.

It's just custom titles for them, right? On drop. They're not custom titles, they're built into HTML. So they're events that happen like on click, like whatever. However, like a user kind of like interacts with your website there. There are these events that are used to kind of control or like fire off an event for whenever that event happens. So.

I hope I answered that question correct.

I'm just going to add like a.

Console log for when it happens.

On.

Drag open and then I'm just going.

To copy paste these guys.

So can you hear me?

Yes.

I think maybe if you can reduce the file size like the file file column, it could be a little bit longer like this.

Yeah, that.

All right. I think that would be better for everyone, right?

I think so. Okay.

Yeah, that's good. So you don't have to keep like moving back and forth, but. Yeah, go on.

Yeah, yeah, yeah.

Right. I apologize. No, I don't. No, I do. So now we have three sections to do in progress and done. And now I think inside of the first column to do, we're going to be able to. We're going to have to add a to do item. Right. So basically in to do, we're going to basically want an input where you can kind of press it or like put a task in and then press add and then it adds the card to to do and then you can move it over to. In progress. So let's get started with that. Inside the first column, div to do, we will need to be able to add a new task. So we'll need another div in there with a class of tasks in button.

So inside of the first.

To do.

Here and inside of the.

Below the HR, you will have a div. Let's use emit div.tasks in button.

Yeah.

And then we'll have an input here. Type equals text and ID. So we can target it with our JavaScript later. Task input.

And put a class called task input for our style and placeholder. Input, task and.

On input. So when that event of input happens, I would like to capitalize it. So let's just leave that empty for now and we'll add that function in.

A second and I think that input is done.

And after that we'll have a button. So after you put the value inside of your input, we're going to need a button to add the task. So button to emmet button Add task button. These class names are very. It can be whatever you want, but I already made the CSS file, so it is pretty important that we. We keep the same class names. And on click and this is where we'll add the JavaScript for the add button.

So add password.

All right, now inside of that button we need some buttons, some text, like what the button does.

So add task will be pretty cool.

So now how does it look? We have this input where we can add it, and then if we click it, it says ask add task please. So we added this event listener on the button and then on the click.

So you guys see that I'm clicking something?

So I'm clicking on this and it's saying add task, please. And then on the. On the input, it's whenever there's a key down inside of the input. So those are. It's kind of like an if that event happens on that element Please fire this function or whatever. We're going to do like the logic to handle that. So we're there. And now it's the fun part, right? It's the. It's the third step. So we gotta start. Gotta start programming. So.

I hope I answered that question correct.

I'm just gonna add like a console.

Log for when it happened and then.

I'm just gonna copy paste these guys the thing, man. So we got to add a script tag to the bottom of the body. And.

So. Can you hear me? Yes, I think maybe if you can.

For now I'm just gonna add the script inside of the HTML file, but I'll show you guys how to move that over into its own script JS file later. But kind of just want to keep everything in one place for now. Is it okay if I can reduce.

The file size like the file column, it could be a little bit longer like this.

Yeah, that.

All right. I think that would be better for everyone, right?

I think so.

Make it a little bit smaller because we got to write it kind of like a bit of code and is it okay, one in the chat. Thank you.

Thank you. All right.

Oh, Ash. Facts here.

Cool.

All right, so inside of the body you add the script tag some.

Okay.

Yeah, that's good. So you don't have to keep like moving back and forth, but. Yeah, go on.

Yeah, yeah, yeah.

Right. I apologize. No, I don't. No, I do. So now we have three sections to do in progress and done. And now I think inside of the first column to do, we're going to be able to. We're going to have to add a to do item. Right. So basically in to do. We're going to basically want an in. Let's go like console. Just to make sure the script is working, I'm going to put console log. Hello, everybody. You guys are the best input where you can kind of press it or like put a task in and then press add and then it adds the card to to do and then you can move it over to in progress. So let's get started with that. So if I add the console dot log here, I'm going to expect inside the first column div to do. We will need to be able to add a new task. So we'll need another div in there with a class of tasks in button.

So instead of the first.

To do in the browser that it's going to run this console log. And I can see it in the.

Inspector here and inside of the.

So hello, everybody. You guys are the Best Amazing. And I truly believe that. All right.

All right.

So below the HR you will have a div. Let's use Emmett div.tasks in button. Oh, let's. Let's program the dang thing. So get items from local storage. The local.

Yeah.

And then we'll have an input here. Type equals text and ID so we can target it with our JavaScript later. Storage is. It's different than cookies. It's kind of like input and put a small little piece of storage, like I think five megabytes that you can save in the browser for this website.

Class called task input for our style and placeholder.

So every single kind of like platform has it. The browser has local storage.

Input task and.

On input. So when that event, Android has I think persist storage, react native has async storage. And in the web, the browser we have a little like little database. Not like a database where everybody shares. It's like your own personal little database. The input happens. I would like to capitalize it. So let's just leave that empty for now and we'll add that function in a second.

And I think that input is done and called local storage.

So when someone leaves the website, we probably want to save. After that we'll have a button. So after you put the value inside of your input, we're going to need a button to add the task. So button let's do the tasks that. That they did because it wouldn't really make sense if you had to rewrite the tasks every single time. But later on I button, dot add task button. These class names are very. It can be whatever you want. But I already made the CSS file so it is pretty important. I think we can add on like a database and get it and that'll be kind of fun. So the first thing we need to do is get items from the storage key of tasks. So we're going to save that. We. We keep the same class names and on click and this is where we'll add the JavaScript for the add button.

So add task.

All right. Now inside of that button we need some buttons something in local storage with the key tasks and then save it as an array of objects of what kind of what kind of content it has, what kind of like if it's a to do item and in progress item or done item and it'll be. That's what we'll do context like what the button does. So add task will be here.

Pretty cool.

So now how does it look? We have this input where we can add it and then if we click it, it says ask add task, please. So we added this event listener on the button. So give me a second. So the first thing we want to do is say let tasks = JSON parse. And then on the click.

So you guys see that I'm clicking something.

So I'm clicking on this and it's saying add. So let's just leave a comment for each task, please. And then on the. On the input, it's whenever there's a key down inside of the input. So those are. It's kind of like an if that event happens on each task that we need to do that element, please fire this function or whatever we're going to do, like the logic to handle that. So we're there. And now it's the fun part, right? It's the. It's the third step. Get items from local storage of key of tasks. So then you ask local storage.getitem. so that's your key. Then we'll say tasks. And if it's there, it's there.

But if not, we're going to say it's.

So this OR operator is. If this is like a false value. If it's the first time coming in, it's going to stay undefined. So we don't want tasks to be undefined. We at least want it to be an empty array. This would be the same thing as saying like. If tasks. Let's say like is a faulty value undefined. We want tasks to equal NP array. But to shorten that out, we're just going to do the OR operator. Now that's done. Now we have an event for when the browser gets loaded. When the DOM gets loaded. So the DOM is the document object model. That's when the HTML, all the code gets loaded into the browser. So there's something called an event called DOM content loaded on the HTML. So on the document. So I got to put semicolons.

All right, let's put some.

All right, document dot add event listener and then we'll do the DOM. Let's see if IntelliSense will pick it up.

Nope, I don't want to type it out. So I will copy paste.

And let's do second task here.

Whoops. All right, now add event listener and.

We'Ll add a callback in here called function and then console log.

DOM content is loaded. Cool.

Now you'll see a nice log DOM content is loaded. So that's the event that happens when the page loads. And I'll show you guys one more time, I refresh and for a split second there's nothing there. But then when it's loaded it. It loads up. So like you can set a timeout here.

Then like after a second if I.

Do this one, then it'll come back. It'll. It'll be there. And that's the event that we're going to use to render the tasks from Async storage. And if we do it all at once, might cause some errors like it might run the code before the tasks are loaded up from local storage. That's why we're going to put it on add event at the DOM content loaded. So I'm going to delete that and then we're going to need to do something with those tasks. The, the tasks, the. The array that we're going to get back, right? If there is. So under there, I would like to make a function called Render tasks and inside of There we have three columns, right with the IDs. So if you saw here we have an ID of done. We have an ID of. We have the idea of.

We have an idea of to do.

In progress and done.

So we'll make an array const to do.

In progress. So when it first comes in, I would like to do something on each column.

So we'll do something like whoops. Columns equals and then columns dot for each.

And foreach is kind of like just a. For loop that a little bit easier to work with in my opinion because you can. It'll run it from the, from the index zero all the way to how big the array is. It's the same. It's kind of the same thing as for loop. It is the same thing as for loop, but it runs a callback on.

Each index instead of writing a function.

So you can either use each one. I'll do both just to kind of show you they're the same thing. And so columns dot for each and then for column and we'll just call it column ID because that's what we're talking about, the id, the div. And then I just want to show.

You console log column ID equals column id.

And then inside of there I'll run the render tasks function. Actually because it's a callback, I think.

I can just do it like this. Render tasks.

And callback self call so you don't need to invoke it here or else your program will break. So that's why here I can put an anonymous function and wrap it in anonymous function and then do render tasks and have that function call this. But because we're naming the function. I think it looks a little bit cleaner if we do like this. So in the browser, I'm expecting for each column at index zero, index one, index two to go down and it'll take to do in progress and done.

Let's see if that is true.

So column ID to do in progress and done. So I told you guys, I'll show you the for loop way now. So just for let I equals 0.

I columns dot length I plus plus whoops.

Then console log.

Column ID equals columns at the index of I. We should be getting the same thing.

So it's to each of their own. I'll use the for each and I'll just show you guys, if we leave.

Both of them, you should be seeing.

To do in progress and done. Then to do in progress and done. So to do in progress and done. To do in progress and done. So we're going to need to do something inside of each of those, right? So first what I would like to do is get the column. So we have console dot.

We have const.

Column equals document dot. Get element by id and then that's going to be at the column id. So that's feeding it. Get element by id. The to do. So that's going to get this input right here, right this, this div up to here. It's going to get this ID first, then it's going to get the next div, then it's going to get the next div, which are all columns. One second, let me cough real quick. Log out the column. You'll see it. You'll see the element. And like when I console log and I put like the equal sign. It's just a habit of mine. A lot of people will do like colon or whatever, but I. I don't know too. So I like to just put a label like a string and then whatever I'm logging out. Or else I just get a bunch of logs and I don't know what they are. Mercy in line 70 should we return and then. And then for each on line 70 we're going to hand. We don't need a return right now because we're JavaScript. Just stick them in through DOM manipulation. So it. You could return it. But so we don't need to do a return right now, but in right now for now. So you could actually say if you.

Want return, then return, but.

Not right now.

Cool.

I made sure. All right. All right. So just to show you guys, I just want to show you guys like it does log out now but I'll show you guys where you would need a return. And whenever I'm using for each. To be honest, I don't think I'm using a return when I do want. It only returns because we're going to manipulate the DOM inside of the each index so it does not need the return for now.

Also like you spelled document wrong in line 72.

Line 72.

Yeah, I did.

Good catch. Now here we see that it has it first. It we see the. The element that it got. So you see that it has div to do. Div in progress and div done. And that's what we kind of wanted to select anyways. So we'll go a little bit further. So first thing I would like to do is empty out that div of the tasks container inside of there. So each one has a task container where when on load if there is something in done from the local storage we'll stick that in.

So a way we can do that is constant.

We'll just do column dot query selector. So the query selector for there is.

Dot what is it?

Tasks container. So it'll select the first one and then there's something off there called inner HTML. Inner HTML and we'll empty it out because we don't want. We don't want to keep adding the same tasks. So first we'll empty it out and then we'll get the task and then populate them. So from there we'll say tasks dot for each if there are any tasks and then for that column ID again if pass status equals column id, then we have to do something with that. Right. So now I think we'll come back to this function later because we don't have any tasks in to do right now. So inside of there we'll render tasks and we'll go through there.

Cool.

So now we did the render task function. First we'll need to clear the task from the board. So that's what we did here. And then we will loop through the task and add them to the board. That's what we're going to do here. But we don't have any tasks yet, so don't want to spend too much time until we have those tasks. So let's make a create task element function to create the task element function. Great.

Task elements.

And this one will take something called content and id.

Whoops.

And that one basically.

We'Ll say const.

Task ID equals the ID that we passed to it. Then ponds task equals. So this is. You can create an element like this Document dot create element and then you pass the type of element you want. So that's I want. I would like to start out with a div. I'll show you guys another way we can make this after this. But so now we have a div. Basically we're playing around with that we did through the dominant JavaScript. And then we'll say task.id so that's an attribute equals.

Task id.

And then.

Task class name equals task and that's.

Going to be in our CSS file for the task. And then we'll say task draggable equals true so we'll make the element draggable and pass dot inner HTML and we'll equal that to content.

And span.

Span.

This span will have a class lead.

Button and on click. So that's going to be the click event to the. And we'll have that as the.

Let's just say console log delete task for now and let's find some kind of X so red X icon X emoji. There we go. Add that guy.

Now.

Right now I think our create task element is done. And then in the end this is where return work will return task. So we're returning the div after putting all the properties on it.

So now.

Now let us add the task. Right.

Or.

Let'S make the add task button.

I think that'll be better to.

So we're going to kind of make an ad task function that we're going to include in the JC list if.

It'S in the back sticks or will it see it as a string?

So that's a good question because we're using the backticks and then we're using inner HTML. It'll. It'll like use the HTML markup as the. As what it needs to be. I hope that answers your question. Anyways, so we have an add task function and then earlier we, we said we're going to pass in content and id. So we'll make the ID with a task minus date dot now which is a string and the content will be the string that we input into the. The place the input. And then the status will be the call add event listener and we'll add a callback in here called function and then console log.

DOM content is loaded. Cool.

Now you'll see a nice log DOM content is loaded. So that's the event that happens when the page column ID to do in progress or done. Column ID to do in progress or done. So let's get started.

Adrian has a question.

Is it a personal Preference for either putting the JS in the HTML file or on a separate. So I'm just doing it in the HTML file for now to kind of like do it all in one loads. I'll show you guys one more time. I refresh and for a split second there's nothing there. But then when it's loaded, it, it loads up. So, like, you can set a timeout here. So let's get started.

Adrian has a question.

Oh, is it a personal preference for either putting the JS in the HTML file or on a separate. So I'm just doing it in the HTML file for now to kind of like do it all in one file, but we're going to actually move it over into its own JS file afterwards because I don't want to, I don't want to give you seizures and like kind of keep going back and forth.

Like after a second.

But just, it's very preferable to kind of actually not just one JS file, but many JS files for like each utility, each function. So do this one and then it'll come back. It'll. It'll be there. And that's the event that we're going to use to render the tasks from Async Storage. And if we do it all at once, it might cause some errors, like it might run the code. If there's a bug in your code, you don't have to look through hundreds of lines. You can just look through, hey, at this file online, whatever, line 10, there's a bug and let the browser handle that for before the tasks are loaded up from local storage. That's why we're going to put it on add event at the DOM content loaded. So delete that. And then we're going to need to do something with those tasks. The, the tasks, the, the array that we're going to get back, right. If there is so for you and tell you where that bug is and use every single tool that you can to kind of make the development experience a lot easier. So for now we're just putting it in the HTML file, but we will separate them.

Yeah.

Oh, under there I would like to make a function called Render tasks. And inside of There we have three columns, right, with the IDs. So if you saw here we have an ID of done. We have an idea of.

Cool.

So, so let's make the function add task.

Let's get here Function add task.

And basically in here we'll just pass a column id. We have the ID of.

We have an ID of so and.

Then from there const to do in progress and done. So we'll make an array const to do task input equals document get element.

By ID task input.

And that's the input that we created in the first one earlier.

Ah.

And.

Task content will equal in progress.

So when it first comes in, I would like to do something on each column.

So we'll do something like whoops. Columns equals and then columns.taskinput.value.

So that's the value from the input.

Dot trim.

So we trim off the beginning white space and the ending white space. And that's just to make the code the string a little bit more. A little bit for each. And foreach is kind of like just a. For loop that a little bit easier to work with in my opinion, because you can. It'll run it from the. From the index zero all the way to how big the array is. It's the same. It's kind of the same thing as for loop. It is the same thing cleaner. Like we don't want people putting just a space and add task that would be. That would have no context. So and then after you trim it, if task content we only want it to run if task content doesn't equal empty string. And from there we'll say const is for loop but it runs a callback.

On each index instead of writing a function.

So you can either use each one, I'll do both just to kind of show you they're the same thing. And so columns dot for each and then for column and we'll just call it column id. New task will equal this object that we created up there, right? So it's going to be ID and it's going to be task.

Then let's use the backfix task hyphen.

Or minus and then new date. Now because that's what we're talking about, the id, the div. And then I just want to show you console log.

Column ID equals column id.

And then inside of there I'll run the render tasks function. Actually, because it's a callback, I think.

I can do this, but maybe not.

Maybe we can just do date now. Okay, now, comma, this is the content will be the task content and status will be the column ID we're passing.

And just do it like this. Render tasks.

And callback self call so you don't need to invoke it here or else your program will break. So that's why here I can put an anonymous function and wrap it in anonymous function and then do render tasks and have that function call this. But because we're naming the function, I think it looks a little bit. All right, now we have a new task now, tasks dot push. So right now, the first time we do it, it's going to be the empty array, right wherever that script is. First time we load up the thing, it'll try to get from local storage and we interrupt, you do it. So in the browser, I'm expecting for each column at index zero, index one, index two to go down and it'll take to do in progress and done.

Let's see if that is true.

So column ID to do. It's very important that we have a let, I'm sure. No, no, it needs to be a let and then it's an empty array for now because there is nothing in tasks. So task push. On the new task that we are putting here, then we would like to update the local storage. So it's very important that we have a let.

I'm sure it'd be a constant.

No, no, it needs to be a let and then it's an empty array for now because there is nothing in tasks. Update local local storage with our tasks. So we'll just get the local storage.setitem set item at the key of tasks and it can only hold strings. So JSON stringify on the tasks and then we're going to be using this a lot.

So let's just make the function update local storage and cool.

So we update local storage and basically then we use the render tasks function that we created earlier to kind of empty out the columns and redo it. And then we'll say task input.value equals empty string.

So see how that works now, one second. Use this function inside of this input, wherever we put it.

Add task.

Please add the task at the to do section.

Actually, I don't even think we need to do this because every time we add a task, it's going to be in to do. But cool. Now.

Test task.

We add it.

Add task not working.

Render task is not defined.

Ooh, I think I forgot an S. Yes, I did. Render tasks there we are.

Not set properties null of setting index.HTML index line 74. Figure this out.

Column, first letter tasks container. Let me see here. Oh, task container. We are now.

Task is not defined.

Where, where, where on line 78. 178.

I think it's all tasks with an.

S. Wait one second, one second. Let's figure this out then.

Now we don't really add add anything yet, right? But it says handle to do Item six times. So we need to add that function.

So one second.

Now we have a create task element. So from here all we need to.

Do is const task element equals create task.

The 1 = sign is kind of like a. An non strict like comparison operator. But the I always use triple equal sign or bang double equal sign because it's a little bit more strict. Because if you have like false equals zero, that'll, that'll be true, but then this would be false. So it just adds a little bit more like strict comparisons. Because actually in JavaScript like 0 is false. But I like to use the strict one all the time, just so I know what I'm talking about all the time. So here we'll create the task element with. I would just like to see the whole task and make sure we're getting the task inside. So six times we're getting the ID content task task ID to the date now and the status and they should all be coming in to do. And I made a bunch on accident. This is all coming from local storage, but cons task element and we use the create task element right here. And then inside of that create task element we're saying, hey, we're going to pass the task content and task id.

And then we say column and that's.

The column that we selected earlier, dot query selector and inside of there the task container. One second please. I'll be back in 60 seconds. Little break time, like water time. It's cool.

Sounds good. Yeah, I can answer that, I guess. So we have an array called tasks, right. And then we're looping through that array using the foreach and. Right, the tasks. If you look at line 63, right. We have an array called tasks, right. That's in the local storage and we want to loop through each element right in there. So the way for each works is you have to define like an item that you want to call in each each of the array. Right. Like in the array, like you want to define what is that element in the array. So if you have a array of tasks, you're living through that obviously each of them is called task. Right. So you can name it whatever you want, but it just makes sense to name it task. Yeah, it can be named anything. So he just named it task because it makes sense. Right. It's a bunch of tasks and we're looking at each single task in the array. Right. So that's why he named the task, if that makes sense. Yep. So you can name it like A, B, C, whatever you want. Yeah, but the mistake that he made was he used. He put column ID in there instead. Right. Which was not the case. It had to be. He was comparing the column ID to the status of the task. Yeah, of course, of course, yeah. So you can name it like anything you want in there. Pretty much.

I'm back.

All right. Yeah. So Adrian had a question about for each.

For each.

Yeah. So like, I guess in 4H you can name that singular element anything you want.

Yeah, it's very like arbitrary. Right? Like that's the right word. You can use name whatever you want. Just the data is the same.

The callback.

So everyone get some water. Are we all good?

Yes.

All right, because.

So I'm just going to give you like the concepts of adding the task and then we're going to go into drag and drop, but I'm going to ask you guys to kind of complete it because I do. I do want to get done with this by 10:30 or we can finish. I don't. It does not matter. Minnie, what do you think the schedule should be?

I think it'd be cool for everyone to kind of think of the solution to get it done and then post it in the chat room.

That'll be cool.

Briefly go over it next.

Next time I'm gonna give all the tools to do it right. We're gonna get like one done, like the drag and drop and then I'm gonna ask to kind of finish it right. Which all the logic is going to be there. But you guys have to add it into the. All right, so now we have local storage happening. We set items, we get them from local storage and then like, as you guys can see, I just want to show you in the DOM event list, render tasks, if we console log tasks equals tasks. You'll see that you have a. You have a. You have six items in here in the array. And that's what we're going on. The full reach through. And that's where we're doing the handle to two item.

So it's handling it at each time.

All right, so now we need to add those to do items into the to do section. So how are we going to do that? We're going to say, hey, if it's status to do, add it to the task container inside of the todo column. So column queryselector, taskcontainer and we can append child. So I'll just show you guys. So we already created the task element here, so but. So we'll just do task element here and we'll add the Task element and we should be done. So now we have a whole bunch.

Of test tasks, all right?

And then I accidentally added a bunch. So I think my opinion, the next logical thing is we need to be able to delete our mistakes, right? We have a bunch of the same tasks. So let's, let's do the delete. Let's do the delete task button, which is going to be here. You'll see that it says, it'll say console log delete task in the browser here. And I do want to clean up my, my console logs.

We are.

And then each time I press this, it's going to say delete task. So how are we going to delete that task? We have to set the item after we filter those tasks, right? So let's get it done. So I know I'm going like back and forth on the to dos, but it doesn't really matter like in which order we do it. But say let's just make a little checklist like we got this guy done.

Disable completions from work down.

All right, we got that guy done. And now in the event doc DOM content loaded. We got that guy done. Let us make the render tasks function. Got that guy done.

Great. Task element.

Make function to delete task. So now we're on number five. I'll keep it by create task element because it kind of has to do with it. My opinion.

I'm gonna put a comment here.

Make function to delete the task.

So we'll make a function delete task. Now how are we going to do that?

We have an id, right? We have an ID on each of these tasks. If you look here, it has an ID of the task and when it was made date now so we can actually pass the date, the ID and we can actually remove it. So let us do the task ID now. Console log task ID equals task.

So cool.

Now let's remove that one.

Let's actually put the on click Task ID to the backticks inside of here. Wait one second, one second please. Wait, wait, wait, wait, wait, wait, wait. I'm thinking.

Right now it'll give us a string, right?

It'll say, I don't know, Task ID is not defined.

We have to add this task ID inside of here. So I'm trying to think about how to do it.

And I thought we could just. That's going to break out.

That as.

A string over here. I'm thinking I'm gonna put the variable in here. One put the back tick and the content, the span. Ah, sorry. Not the back table, just a single quote, it breaks out. We have the back tapes on the outside. All right, cool.

So now if we delete the task, we should see the task ID. So task 17297 and it gives us a task. So now we need to use the filter function and we'll use tasks will equal tasks. Filter.

Task ID doesn't = task ID.

That we give it.

And then if we task after the.

Filter.

See, task is not defined.

One second. Ah, and this one should remove. So now we have sick. Now it used to be six but not or. Now it's five and you see how it goes down when you click it. Now we need to update the local storage and render the tasks again. So we have the update local storage function that takes the tasks and then in the key of tasks, it'll replace it with the tasks after we alter it and filter it. And then we will just render tasks again.

See that in action. Cool.

And now when we refresh, there's nothing in our local storage. Now. Now delete task is done. Add task is done.

So right now it'll give us a string, right? It'll say I don't know what task ID is not defined.

We have to add this task ID inside of here. So I'm trying to think about how to do it.

And I thought we could just. That's going to break out. So that as a string over here. How do we put the variable in here? One second. Add task, add the task. If we delete it, we delete it. Cool.

We do have a capitalized function here.

Do we need it? I don't think so. Let's just take it out. Put the back tick and the content, the span.

Can you explain filter a little bit maybe?

Oh yeah, yeah, filter. Basically we have, we have the tasks array, right, which, which is holding our.

Ah, sorry, not the back, the single quote. It breaks out.

We have the back takes on.

All right, cool.

So now if we delete the task, we should see the task ID.

Which.

Is holding our array. So this, which is holding the objects. So let's say that there's ID of one, so task 17297 and it gives us a task. So now we need to use the filter function and we'll use.

Task and.

There'S another one ID of two. So basically each time a way of for loop works is it takes the element from index zero all the way to the end. So like 012. So first it'll handle id1 and then if I passed one so it filters for all the ones that it gives us back, all the ones that don't equal the argument that we gave it, Right? Right now it's Task id. So if I passed Task ID one and I said, hey, I don't want one, give me everything but one. That's, that's what filters. So here, this could actually be rewritten like this, right? It could be rewritten like. Or so then if we said tasks, so we say like, let new tasks equal empty array. For let I equals 0I tasks will equal tasks. Equ. Filter.

Task ID doesn't equal task ID.

That we give it.

And then if we ask task after the filter.

See, task is not defined One second.

Ah.

And this one should remove. So now we have S. Now it used to be six, but not or now it's five. And then you see how it goes down when we click it. Now we need to update the local storage and render the tasks again. So on the Original task length I + +, we have the update local storage function that takes the tasks. And then in the key of tasks, it'll replace it with the tasks after we alter it.

And then we say if the task.

Tasks at index ID doesn't equal, filter it. And then we will just render tasks again. The ID that we pass it Task id, then we add to new tasks the task at index. And then in the end of our loop we could say, now tasks equals new tasks. And basically it's this T. It's this code that I wrote up here. That's what filter is doing, but all in one line. And it's. I mean, I it both work the same, but I'd much rather, you know, save my fingers a little bit of workout. My opinion, but I can go over like these array methods a little bit more if you ever DM me or anything like that. And the MDN documentation is very good. One second.

See that in action. Cool.

And now when we refresh, there's nothing in our local storage. Now delete task is done. Add task is done.

Add task, add the task. If we delete it, we delete it. Cool.

We do have a capitalized function here.

Do we need it? I don't think so. Let's just take it out.

Can you explain filter a little bit maybe?

Oh, yeah, yeah, Filter. Basically we have. We have.

All right.

I'll just leave that the tasks array, right? Which, which is holding our. The comment. And I'll push all this code so you guys can kind of take a look. Which is holding our array.

Cool.

Now, so this, which is holding the objects. So let's say that there's ID of one and there's another one ID of two.

Oops.

So basically, each time a way of a for loop works is it takes.

All right, what we're doing is we're.

Filtering against the tasks, the element from index zero all the way to the end. So like 01, 2. So first ID and then we're updating local storage with the new tasks after the tasks. And then it'll handle ID1. And then if I passed one. So it filters for all the ones that it gives us back, all the ones putting in the key of tasks, the new array with the filtered object or filtered array, and then we're rendering the tasks again. Right now we have nothing. And right now what we need to do is we need to. That don't equal the argument that we gave it, right? Right now it's task id. So if I passed task ID one and I said, hey, I don't want one, give me everything but one be able to drag hello so that you see how that's. That's what filters. So here, this could actually be rewritten like this, right? It could be rewritten like if you put the attribute of draggable in here to true, it makes it. Or so then if we said tasks draggable, but it's not really doing anything right now, right? And then see how I said on drag over, this guy, you see how the event pops off, right on drag over. That's basically what we're doing. So we say like, let new tasks equal empty array for let I = 0i on the original task length I +.

And then we say if the task.

Tasks@Index.Id doesn't equal the id that we pass in task id, then we add to new tasks.

The task at index.

And then in the end of our loop, we could say, now tasks equals new tasks. And basically it's this T. It's this code that I wrote up here. That's what filter is doing, but all in one line. And it's. I mean, I it both work the same, but I'd much rather, you know, save my fingers a little bit. All right, so I'm gonna try to. I'm gonna do it. I'm gonna put it in done our functions. Oh, and I do want to show you guys. So if. If inside of create task element, if I just didn't put draggable to true and I refreshed, I wouldn't be able.

To kind of drag it at all.

So.

That'S.

That's doing the draggable property attribute. So we already have the done already set up and I'm going to ask you guys to do in progress.

Here.

Just give me one second. One second. Minnie, can you talk for a second and just work out my opinion? But I can go over like these array methods a little bit more if you ever DM me or anything like that. And the MDN documentation is very good.

One second.

All right.

I'll just leave that as.

A comment and I'll push all this code so you guys can kind of take a look later.

Well, now, all right, what we're doing.

Is we're filtering against the task ID and then we're updating local storage with the new tasks after the tasks and then give me two minutes.

Hello, can you hear me? Sorry about that. Yeah, so it was fast today, right? It was quite quick, especially if you don't have much experience. But now you can review the code that we wrote together and you could.

Like look up putting in the key of tasks the new array with the filtered object or filtered array and then we're rendering the tasks again right now.

We have up each part and look at the documentation on it and you'll be able to follow along. But yeah, if you have any questions, you know, feel free free to write in the chat room that we created. But yeah, I guess flows back.

Cool.

Sorry, I've just. Nothing. And right now what we need to do is we need to be able to drag hello so that you see how if you put the attribute of draggable in here to true it makes it getting a bunch of phone calls. All right, so we need to be able to drag the draggable but it's not really doing this guy over and drop him in the done on the drag over right now. Right? And then see how I said on drag over this guy you see how the event pops off right on drag over. That's basically what we're doing. So let's get that done. First we need to be able to allow the drop event because you guys aren't seeing the drop. All right, so I'm going to try to. I'm going to do it. I'm going to put it in done our functions event right? Because it doesn't it there's a default thing happening so. Oh, and I do. I do want to show you guys. So if. If inside of create task element if I just. I have this function here called allow drop so we prevent the default didn't put draggable to true. And I Refreshed I wouldn't be able to kind of drag it at all. So that's, that's doing so I'm just going to kind of add that function, the draggable property attribute. So we already have in the code the top have the done already set up. And I'm going to ask you guys to do in progress.

Here.

Just give me one second prevent default.

And then we'll go here.

One second. Minnie, can you talk for a second?

And just on, on the drag over.

We'Re going to allow drop and then we're going to pass the event.

Allow a drop and we're going to pass the event that it passes over.

And then we're also going to have to allow the drop. So we have to make a drop.

Event, the drop function basically.

So yeah, we're going to. Okay, first we need to make a drag event.

So let's do I have it here.

It's the event and the data transfer to set data to kind of be able to drag the data over into the other id. Just some syntax, it's not too much. And then we're going to use this drag function inside of our drop function.

So function drop.

Take the event and we'll take the column ID that's being dropped down and the column id. If you guys remember there are to do in progress and done. So the first thing we want to do is event prevent default and then we'll console log the column ID that.

We'Re talking about and then we'll say const data equals data transfer dot. We'll say from the event.data transfer. Get data at text plank.

This is all just syntax and look it up on the Internet. You don't have to know it like 100% but it is good to like study about it. But it's just syntax. It's like you're getting the data whatever you're dropping then const dragged element. So we need to be able to know which element we are talking about. So that's going to be on the document get element by ID to the column ID we are sending.

And now if there's dragged element, if.

The dragged element is there, then we need to const task update task status and we need to make that function with the data and the task status and event dot target. So the event of what, what we're clicking on target query dot query selector.

Dot task container and append child to the drag element.

So next we need to make the update task status function. We made the drop function.

So that's that this one.

Now we need to make the function to update the task when it's moved to a different column. Give me a two minutes.

Hello? Can you hear me? Sorry about that. Yeah, so it was fast today, right? It was quite quick, especially if you don't have much experience. But now you can review the code that we wrote together and you could like look up each part and look at the documentation on it and you'll be able to follow along. But yeah, if you have any questions, you know, feel free free to write in the chat room that we created. But yeah, I guess Phil's back.

Cool.

Sorry, I've just.

So.

That one will make function update.

Task status.

Getting a bunch of phone calls. All right, so we need to be able to drag this guy over and drop him in the done on the drag over, right? Let's take two arguments. So let's get that done. Is that we said we were going.

To do and take the task ID.

And then use first we need to be able to allow the drop event because you guys aren't seeing the drop.

That is where it's going.

So from the task ID we can select it and know which column it's in. And then we have to send a.

New status that it's going to so.

Now.

Console log the new status. It's going to make sure that comes.

Correctly and then we'll say task event right. Because it doesn't it there's a default thing happening. So equals tasks map so that returns the array. I have this function here called allow drop so we prevent the default. So I'm just going to kind of add that function in the code.

The top comment with hold on. I would just like to see the.

Whole task and make sure we're getting the task inside. So six times we're getting the ID content task task ID to the date now and the status and they should all be coming in to do and I made a bunch on accident this is and then if task.id equals the task id we're talking about right we need to return on that task task we'll spread the task and then we'll say the status will equal the new.

Status that we're sending.

Prevent default.

Then we'll go here. Then on. On the drag over we're going to.

Allow drop and then we're going to.

Pass the event and that is going very fast. Okay. Okay, got it.

And then from there we will update local storage.

And it's all coming from.

Local storage but const task element and we use the Create task element.

Right here.

And then inside of that create task element we're saying, hey, we're going to pass the task content and task id.

That should be done.

Now we need to add those functions. So allow drop on event and.

Allow drop. And we're going to pass the event.

That it passes over. And then we're also going to have to. We're going to put the.

On drop. We're going to put. And then we say column and that's.

The column that we selected earlier.

Drop event and to the done right.

That'S the new column ID that we're.

Going to dot query selector and inside.

Of there the task container. One second, please send it.

See if that works.

Allow the drop. So we have to make a drop event.

Whoops.

The drop function basically so.

Not saved. One second, Rob.

Oh yeah, we're gonna. Okay, first we need to make a drag event.

So let's do I have it here.

It's the event and the data transfer to set data to kind of be able to drag the data over into the other id.

Whoops. I think I put these on the wrong guy. One second, one second.

Failed to execute appendchild unknown the new.

Child contains the parent.

I'll be syntax. It's not too much. And then we're going to use this drag function inside of our drop function.

So function drop. All right. What is going on?

Take the event and we'll take the column ID that's being dropped back in 60 seconds. Little break time, like water time. And the column id. If you guys remember, there are. It's cool.

Sounds good.

Yeah.

Let's debug.

Take this if out console log drag.

Element equals to do in progress and done. So the first thing we want to do is event prevent default. And then we'll console log the column ID that we're.

I can answer that, I guess. So.

Dragged elements. The dragged element is getting passed.

Talking about. And then we'll say const data.

We have an array called tasks right? And then we're looping through that.

I think I put the.

One second.

Let me just equals data transfer dot. Wait, we'll say from the event.data transfer.

Get data at right.

Using the. For each and right. The tasks. If you look at line 63, right, we have an array called tasks right? That's in the local storage. And we want to loop through each element right in there.

So text plane.

This is all just syntax. And look it up on the Internet. You don't have to know like the.

Way for each works is you have to define like an item that 100%.

But it is good to like study about it. But it's just syntax. It's like you're getting the data, whatever you're dropping, then const dragged element. So we need to be able to know which element we are talking about. So that's going to be on the document dot get element by ID to the.

You want to call in each. Each of the array. Right.

Like in the column ID we are sending. And.

Right. Like you want to define what is that element in the array. So if you have a t array of tasks and you're living through that, obviously each of them is called tasks.

Now, if there's drag element.

Right. So you can name it whatever you want, but it just makes sense to name it Task. Yeah, it can be named anything.

And if the dragged element is there, then we need to const. Task status equals column id and.

We.

Need to update the task status.

So he just named it task because it makes sense. Right. It's a bunch of tasks and we're.

Looking at update task status and we.

Need to make that function each single.

Task in the array. Right. So that's why he needed a task, if that makes sense.

Yep.

So you can name it like A, b, C, whatever you want. Yeah.

But with the data and the tasks.

Status and event target.

So the event of what? What we're clicking on target query.

Query selector. Task container and append.

Mistake that he made was he put column ID in there instead. Right. Which was not the case. It had to be. He was comparing the column ID to the status of the task. Yeah, of course, of course.

Yeah.

So you can name it like anything you want in there.

Pretty much child to the drag element.

So next we need to make the update task status function. We made the drop function, so that's that.

This one.

Now we need to. I am back.

All right. Yeah. So Adrian had a question about for each.

For each.

Yeah. So like, I guess in for each, you can name.

Make the function to update the task when it's moved to a different column.

That singular element. Anything you want.

Yeah, it's very like.

So that one will make function update task status.

Arbitrary, Right? Like that's the right word. You can name whatever you want. Just the data.

All right, so.

That one that is the same.

The callback.

So everyone get some water. Are we all good? We'll make function update task status. Let's take two arguments that we said.

We were going to do and take.

The task ID and then use yes all right, because. So I'm just going to give you like the status where it's going. So from the task ID we can select it and know which column it's in. And then we have to send a new status that it's going to concepts of adding the task and then we're going to go into drag and drop. But I'm going to ask you guys to kind of complete it because I do got. I do want to get done with this BY so now 1030 or we can finish. I don't. It does not matter. Mini console dot log.

The new status equals.

Do you think the schedule should be.

I think it'd be cool for everyone to.

It's going to make sure that comes.

Correctly and then we'll say tasks equals tasks map. So that returns the array task and then if task ID kind of think.

Of the solution to get it done and then post it in the chat room.

That'd be cool.

So briefly go over it next.

Next time I'm going to give all the tools to do it right. Equals the task ID we're talking about.

Right.

We need. We're going to get like one done like the drag and drop and then I'm going to ask them kind of finish it right. Which all the logic is going to be there. But you guys have to add it into the. To return on that task task will spread the task and then we'll say the status will equal the new status that we're sending. That is going very fast.

Okay. Okay, got it.

And then from there. All right, so now we have local storage happening. We set items, we get them from local storage and then like as you guys can see, I just want to show you we will update local storage in the DOM event list. Render tasks if we console log and.

That should be done.

Now we need to add those functions. So allow drop on event tasks equals tasks. You'll see and see that you have an. You have a. You have six items in here in the array and that's what we're going on the full reach through and that's where we're doing the handle to two item.

So it's handling it at each time. All right, we're going to put the. On drop. We're going to put.

See that you haven't. You have a. You have six items in here in the array and that's what we're going on the full reach through and that's where we're doing the handle to two item.

So it's handling it at each time.

All right, so now we need to add those to do items into the to do section.

So how are drop event and to the done?

Right, that's the new column ID that.

We'Re going to send it to, see if that works.

We're going to do that. We're going to say, hey, if it's status to do, add it to the task container inside of the to do column. So column queryselector, taskcontainer and we can append child. So I'll just show you guys. So we already created the task element here. So but so now we need to add those to do items into the to do section. So how are we going to do that? We're going to say, hey, if it's status to do, add it to the task container inside of the to do column. So, so we'll just do task element here and we'll add the task element and we should be.

Whoops.

So now we have a whole bunch of test tasks. All right. And then I accidentally added a bunch. So I think my opinion column, queryselector, taskcontainer and we can append child. So the next logical thing is we need to be able to delete our mistakes.

Not saved. One second, Rob.

Right. We have a bunch of the same tasks. So let's, let's do the delete. Let's do the delete task button, which is going to be here. You'll see that it says. It'll say console log, delete task in the browser here. I'll just show you guys. So we already created the task element here. So but.

I think I put these on the.

So we'll just do task element here and we'll add the task element and we should be done. So now we have a whole bunch of test tasks.

Wrong guy. One second.

All right. And then I accidentally added a bunch. So I think my opinion.

One second.

And I do want to clean up my, my console logs.

We are.

And each time I press this, it's going to say delete task. So how are we going to delete that task? We have to set the item after we filter those tasks. Right. So let's get it done. So I know I'm going like back and forth on the to dos, but it doesn't really matter like in which order we do it, but let's just say, let's just make a little checklist like we got this guy. Done failed to execute append child on no, the new child contains the parent.

Disable completions from work down.

All right, we got that guy done. And now in the event doc DOM content loaded, we got that guy done. Let us make the render tasks function. Got that guy done.

All right, what is going on?

And the next logical thing is we need to be able to delete our mistakes.

Great. Task element make function to delete task.

So now we're on number five, right? We have a bunch of the same tasks. So let's, let's do the delete. Let's do the delete task button, which is going. I'll keep it by create task element because it kind of has to do with it. My opinion, I'm going to be here, you'll see that it says, it'll say console log delete task in the browser here. Let's debug.

Take this if out make function console log element equals and to delete the task. So we'll make a function delete task drag elements. Now how are we going to do that?

We have an id, right? And I do want to clean up my, my console logs. We have an ID on each of these tasks. If you look here, it has an ID of the task.

We are.

And then each time I press this, it's going to say delete task. So how are we going to delete that task? We have to set the item after we filled and when it was made.date.now so we can actually pass the.

The dragged element is getting passed.

To those tasks, right? So let's get it done.

I think I put the.

One second, let me just take a look real quick. The date, the id and then we can actually remove it. So let us do the task ID now. Console log Task ID equals task.

So cool.

Now let's remove that one. Let's actually put the. On click task ID to the.

Backticks inside of here. Wait one second.

So I know I'm going like back and forth on the to dos, but it doesn't really matter like in which order we do it, but let's just say, let's just make a little checklist like we got this guy done.

Disabled completion term markdown.

All right, you got that guy done.

One second, please. Wait, wait, wait, wait, wait, wait, wait one second. I'm thinking.

Right now it'll give us a string, right?

It'll say.

And now in the event DOM content loaded, we got that guy done. Let us make the render tasks function. Got that guy done.

Great. Task element make function to delete task.

So now we're on number five. I don't know what task task ID.

Is not to bind.

We have to add this.

Oh, sorry.

Task ID inside of here. So I'm trying to think about how to do it. We're moving over the whole guy.

And I thought we could just. That's going to break out so that as a string. Say a string over here, Let me put the.

Data.

That variable in here. One second.

Nothing for some reason.

Event data transfer.

I'll keep it by create task element because it kind of has to do with it. My opinion.

Here. Look at data event data transfer. Put the back tick and the Content the span. 1 second, 1 second.

We prevent the default.

We have column ID then const data.

Equals event data transfer.

Get data at text plain. Ah, sorry, not the back data. Just a single quote. It breaks out, we have the back.

Takes on the outside.

All right, cool.

So now if we delete the task, we should see the task ID.

Make.

Function to delete the task.

So we'll make a function.

So task 17297, that's the event that we're dropping and it gives us a task. So now we need to use the filter function and we'll use tasks will equal tasks filter.

Delete task. Task ID doesn't equal task ID that we give it. And then if we ask tasks after.

The filter.

Why isn't the data coming?

See, task is not defined. One second. And this one should remove. So now we have six. Now it used to be six but not five. And then you see how it goes down when you click it. Now we need to update the local storage and render the tasks again. So.

Now how are we going to do that?

We have an id, right?

Dragged element is nothing for some reason.

One second, please. We have an ID on each of these tasks. If you look here, it has an ID of the task and when it was made date.now so we can actually pass the date the ID and then we can actually remove it.

So let us do.

Is it because the element by ID is not data.

We have the update local storage function that takes the tasks and then in the key of tasks it'll replace it with the tasks after we alter it and filter it. And then we will just render tasks again.

That's.

That's what the data transfer is supposed to do.

Oh yeah, See that in action. Cool.

And now when we refresh, there's nothing in our local storage. Now our delete task is done. Add task is done.

So give me a second. Add task add the task. If we delete it, we delete.

The task id. Now console log task ID equals as.

So cool.

Now.

When it Done. Cool.

We do have a capitalized function here.

Do we need it? I don't think so. Let's just take it out.

Can you explain filter a little bit maybe?

Oh yeah, yeah, filter. Basically.

Why isn't data.

Oh, let's remove that one. Let's actually put the.

On click task guide.

We have, we have the tasks array, right? Which. Which is holding our. Which is holding our array. Oh, sorry, sorry. So this which is holding the objects. So let's say that there's ID of one.

Wait, I didn't put the HTML correctly. And there's another one ID of 2D to the.

So basically each time a way of for loop works is it takes back.

Ticks inside of here. Wait one second.

The element from index zero all the way to the end. So like 012. So first it'll handle ID1 and then if I passed one. So it filters for all the ones that it gives us back, all the ones that don't equal the argument that we gave it. Right. Right now it's task id. So if I passed test ID one and I said hey, I don't want one, give me everything but one second HTML, that's, that's what filters. So here, this could actually be rewritten like this, right? It could be rewritten like or. So then if we said tasks. So we say like let new task.

1 second, please.

Ask = empty array for let I = 0i on the original task length I + + and.

Then we say if the task tasks event on drag over event. Wait, wait, wait, wait, wait, wait, wait.index.id.

Doesn'T equal the id that we pass in task id then we add new.

I think the HTML under the done.

Tasks, the task at index.

And then in the end of our loop we could say now task equals new task. And basically it's this T. It's this code that I wrote up here. That's what filter is doing.

But there's nothing there.

That's why.

All in one line. And it's. I mean I it both work the same, but I'd much rather, you know, save my fingers a little bit of.

Oh yeah, you know what in progress.

No, we never added, added the drag function into the element.

Oh, I'm thinking work out my opinion.

But I can go over like these array methods a little bit more if you ever DM me or anything like that. And the MDN documentation is so here.

We'Re supposed to add here.

Sorry guys.

Yeah, right now it'll give us a string, right? It'll say very good.

One Second.

All.

Right.

I'll just leave that as a comment and I'll push all this code so you guys can kind of take a look later.

Okay, we got it though.

Yeah, I guess now. So on the task we're going to need to add add the event listener drag start and then that's going. All right, what we're doing is we're filtering against. It has to be the drag function. Right?

Nice.

That makes sense.

All right.

I don't know what task ID is not defined. We have to add this ID and then we're updating local storage with the new tasks after the tasks and then task ID inside of here. So I'm trying to think about how to do it.

And I thought we.

Could just putting in the key of tasks the new array with the filtered object or filtered array and then we're rendering the tasks again. Right now we have nothing and right now what we need to do is we need to.

That's going to break out that as a string. Take this guy and then take him.

Because that's actually data transfer that we needed be able to drag hello so that you see how if you put the attribute of draggable in here to true it makes it. I apologize but everything's working now draggable but it's not really doing anything. It's only going to move to done right now. But I'm going to ask you guys to kind of thing right now right and then see how I said on drag over this guy you see how the event pop add the same logic to in progress and soft right on drag over. That's basically what we're doing.

All right.

So I'm going to try to. I'm going to do it. I'm going to put it in done our functions. Oh and I I do want to show you guys. So if. If inside of create task element if I just.

Over here.

And all that. So if you see hello new didn't put draggable to true and I refreshed I wouldn't be able to kind of.

I don't put the dragon at all.

So that's.

That's doing a variable in here one second.

The draggable property attribute. So we already have the done already set up and I'm going to ask you guys to do in progress you add task and then you can move it to done and if you re.

Not read properties just status on line.

110.

Think I.

Think I here just give me one second. One second. Minnie, can you talk for a second and just Give me two minutes. I accidentally kept on moving something over.

Ask.

No.

Hello, can you hear me? Sorry about that. Yeah, so it was fast today, right? It was quite quick, especially if you don't have much.

I think I did not finish the render tasks function. One second.

Experience. But now you can review the code that we wrote together and you could.

Like look up, sorry, real quick.

Up each part and look at the documentation on it and you'll be able to follow along. But yeah, if you have any questions, you know, feel free. Free to write in the chat room that we created. But yeah, I guess Phil's back.

Cool.

Sorry, I'm just getting a bunch of phone calls. All right, so we need to be able to drag this guy over and drop him in the. Done on the drag over. Right. So let's get that done. First we need to be able to allow the drop event because you guys aren't seeing the drop with the backup event, right? Because it doesn't.

It.

There's a default thing happening. So yeah, I have a null task in here. Well, let's, let's look it up.

How to.

I have this function here called allow drop. So we prevent the default. So I'm just going to kind of add that function in the code.

The top tick and the content, the span. Ah, sorry, not the back data, just.

A clear local storage.

JavaScript storage.

So we gotta run.

The single quote. It breaks out.

Let's just comment out all this code real quick.

Let's run our local storage. Clear. We have the back takes on the update. All right, cool.

So now if we delete the task, we should see the task ID. So task 17297 prevent default.

And then we'll go here. Then on, on the drag over we're.

Going to allow drop and then we're.

Going to pass the event Allow drop and we're going to pass the event.

That it passes over and then we're also going to have to allow the drop. So we have to make a drop event, the drop function basically, and it gives us a task. So now we need to use the filter function.

Where is it? Drop Drag Lao. Oh, here it is.

Instead of getting the tasks, we'll just set it to empty.

So.

Yeah, we're going to. Okay, first we need to make a drag event.

So let's do.

And we'll use tasks will equal tasks dot filter.

Task ID doesn't equal task.

I have it here. It's the event and the data transfer to set data to kind of be able to drag the data over into the other ID just.

Empty.

And then in render tab syntax it's not too much. And then we're going to use this drag function inside of our drop function.

So function drop asks. We'll just run the local storage clear.

Take the event and we'll take the column ID that's being dropped now. And the column id if you guys remember there are to do in progress and done. So the first thing we want to do is event.product ID that we give it.

And then if we then uncomm this guy. This guy out. Tasks Tasks after the filter.

See, task is not defined one second. Then default. And.

This again.

Now he's empty. Hello.

Add task, move them over, refresh.

And then you'll see that it's still in done from the local.

New task.

And this one should remove. So now we have sick. Now it used to be we refresh. We refresh a bunch of times. It's still there. Then we'll console log the column ID that we're talking about. And then we'll say const data equals data transfer dot.

Wait.

We'll say from the event dot data transfer.

Dot get data at text plane.

This is all just syntax six but not.

Or now it's five.

And then you see how it goes down when you click it and look it up on the Internet. You don't have to know like now we need to update the local storage and render the tasks again.

So we have the update local storage.

Function that takes the tasks and then like so we move this guy over.

We refresh whoops.

And we have something like null again. So that's a little bug that we have to handle. We'll handle that later. I think it's because I'm. I'm setting the tasks to null somewhere not quite in the key of tasks. It'll replace it with the tasks after we alter it and filter it. And then we will just render tasks again.

See that in action. Cool.

And now sure.

Where yet? So let's do that again.

100 but it is good to like study about it. But it's just syntax. It's like you're getting the data whatever you're dropping. Then const dragged element. So we need to be able to know which element we are talking about. So that's going to be on the document get element by ID to the column ID we are sending. And now if there's dragged element, if the dragged element is there then we need to const tasks.

Tasks. Take that guy out.

Status equals column ID and.

We need.

To update the Task status, update task status. And we need to make that function.

This.

Render the tasks with the data and.

The task status and event dot target.

So the event of what, what we're.

Clicking on local storage.

When we refresh, there's nothing in our local storage. Target query.

Query selector. Task container and append.

Now delete task is done. Add task is done.

Add task, add the task. If we delete it, we delete it. Cool child to the drag element.

So next we need to make the update task status function. We made the.

Refresh.

And drop function.

So that's that this one and you're allowed to try.

Now we need to.

All right, we have an empty.

Make the function to update the task when it's moved to a different column.

So that one a task.

We'll make function update task status.

One second. All right.

Let'S take two arguments that we said we were going to do and take the task ID and the.

New status where it's going to.

So from the task ID we can select it and know which column it's in and then we have to send a new status that it's going to. We do have a capitalized function here.

Refresh.

All right, that's. That's as far as we're going to get to. Do we need it?

I don't think so. Let's just take it out.

Today. Thank you for coming. We did hit some speed bumps, but we figured them out. So now.

Console log the new status.

Can you explain filter a little bit maybe?

Oh, yeah, yeah, Filter. Basically we have. We have. And I think that's what coding is anyways. And you know, it's going to make sure that comes correctly and then we'll say tasks equals tasks dot map. So that returns the array. Like if you watch like a tutorial or something, you know, you only get to see the good parts. But we actually got. And then if task ID equals the task ID we're talking about, right. We need to return on that task task. We'll spread the task and then we'll say the status will equal the new status that we're set to see, like debugging in the process. And it's. I think it's. It's beneficial. So thank you for joining. And that is going very fast.

Okay. Okay, got it.

And then from there, want to see you guys next week. And we'll add a lot more functionality and you know the tasks array, right. Which, which is holding art. We will update local storage. And I think it'll be. It'll Be good.

That should be done.

Now we need to add those which is holding our array of functions. So allow drop on event and. And.

We'Re going to put the on drop. We're going to put.

Of course. Yeah. So we'll stick around for a little bit longer.

If everyone wants to drop event and chat.

You can unmute as well. You are able to.

To the done. Right. That's the new column ID that we're.

Going to do that you can speak to Phil and you can. Yeah, man. You could just hang out.

See if that works. Whoops.

Not saved with us for a little bit kick.

So this which is holding the objects. So let's say that there's ID of.

One and there's another one ID of two. One second, Rob.

So basically each time a way of for loop works is it takes.

Music resulting I guess.

Should I. Yeah, it's a good song. Real quick.

The element from index zero all the way to the end. So like 01, 2. So first.

Whoops. I think I put these on the.

You guys can stick around if you have to go. You. You gotta go.

Whoa.

I think this is already like all pushed up there. Right. The code that we wrote wrong guy.

One second. One second.

Failed to execute a pen Child unknown. The new child contains the parent. I'll push it right now.

Okay. All right, cool. Yeah, we'll push it and then if you guys can.

All right. What is going on?

It'll handle ID one and then if I passed one.

So.

The filters for all the ones that it gives us back all the.

Ones try to do the. The in progress drag drag function.

Let's debug that don't equal the argument that we gave it. Right. Right now it's task id. So if I passed task. Take this if out.

If you can write that that'd be great.

Thank you.

Thank you. Awesome.

Id 1. And I said hey, I don't want one. Give me everything but one console log.

Drag element equals drag elements. The dragged element is getting passed.

Who was that by the way?

I think I put the.

One second. Let me just take a look real quick. That's. That's what filters. So here. This could actually be Effy.

Thank you, brother.

Yeah, that's me.

Thank you mfe. Okay. All right.

Thank you for joining.

You know it's. I hope you guys got something. You know enjoyed something from it. But you know drag and drop is a cool thing rewritten like this. Right? It could be rewritten like or so then if we said tasks.

One second.

So we say like Let new tag.

Oh, sorry.

We're moving over the whole guy data.

Awesome boys.

How would homework work? Finish up the project throughout the week. Yes sir. Adrian, that would be a great thing to do. And if you guys are having trouble, there is a completed completed folder there.

Nothing for some reason. Event data transfer tasks equal empty array.

For let I = 0i on the original task length I + + look.

At data event data transfer. 1 second, 1 second.

And then we say and just reference it and finish it. And then. And then maybe rent the default.

We have column id. Then if the task tasks data equals event.data transfer. Get data at text plane.

That's the event that we're dropping. We can add like login or like add mongo to it next time and like run it through not live server as an extension, but actually like a node server. That'd be kind of cool to do it too. Four.

And.

Dragged element is nothing for some reason.

One second please. 44am for your mercy. What time do you sleep, bro?

Is it because the element by id.

Is not data@index.id doesn't equal the id that we pass in task id? Then we add new tasks the task. That's what the data transfer is supposed to do.

Oh yeah.

Give me a second.

That's crazy, man. You know what I'm curious about is like.

Done at index and then in the end of our loop we could say now task.

Which video did you guys watch to join the left field community?

Oh, by the way, by the way, sorry to cut everyone off, but you know.

Why isn't data transfer.

Oh, oh, oh, oh, sorry, sorry. You guys want some extra credit? You guys can always comment on the video.

Wait, I didn't put the HTML correctly. Give me a second. HTML equals new tasks.

And basically it's this t. It's this code that I wrote up here. That's what filter is doing. But all in one line and it's. I mean I it.

That's right.

That's right.

Anyways, the first one.

Yeah, yeah, that's a. That's a big. That I. I never knew that would get so many views beyond it. Both work the same. But I'd much rather, you know, save my fingers a little bit of.

Event.

On drag over event.

You can play that YouTube video. Dude, that's good. Good vibes. I think the HTML under the done. There's nothing there.

That's why. Oh yeah. You know what?

In progress.

No, we never added the drag function into the element.

Oh.

So here we're supposed to add here Sorry, guys.

Yeah. Okay. We got it though.

Yeah, I guess work out my opinion.

But I can go over like these array methods a little bit more.

Yeah.

Yeah. It's.

We're trying to, you know, make the community tighter. So whenever we're in here or if.

You ever DM me or anything like that. And the MDN documentation is so on the task we're gonna need to add. Very good.

One second here.

You know, take advantage of the fact that we're all in here and let's get to know each other.

Add the event listener drag start and then that's gonna be the drag function. Right.

Nice.

That makes sense. All right.

That'S definitely what I want because definitely.

And take this guy and then take him.

Because that's actually data transfer that we needed.

All right, I'll just leave that.

I apologize. But everything's working now. It's only going to move to done right now. But I'm going to ask you guys to kind of add the same logic to in progress and. And all that. So if you see. Hello new. I get lonely fast. But yeah, dude, I'm. I'm just very grateful to be honest. To be you add task and then you can move it to done.

And if you re able to do.

This kind of thing and share some knowledge and there's a comment and I'll push all this code so you guys can kind of take a look later. You know, it's not just me that I want to share my knowledge. I want to. I think I can learn from everyone as well.

Not read property status online110.

I think I accidentally kept on moving something over.

Null.

I think I did not finish the well now render tasks function. One second real quick.

So that's something that I, you know, I want. You know, everybody should just share and execute and get done what they need to do.

That's right.

Let's see.

Oh.

Yeah, I have a null task in here.

Well.

Let'S. Let's look it up.

How to. Oops. All right, what we're doing is we're.

Filtering against the task of clear local storage.

JavaScript.

Hold up, let me take a screenshot.

Real quick. Storage.

So we gotta run. Let's just comment out all this code real quick. Let's run our ID and then we're updating local storage with the new tasks after the tasks and then local storage clear.

But yeah, like mercy. Thank you for coming. I think he had to leave to go to.

Nigeria sleep 43 second actually.

Years old. That's awesome.

That's what's up, man. Age is just the number.

Where is it? Drop drag Lao. Oh, here it is.

Instead of getting the tasks, we'll just.

Set it to empty this.

It is just a number. Putting in the key of tasks the new array with the filtered object or filtered array and then we're rendering the tasks again. Right now we have nothing and right now what we need to do is we need to be able to drag hello. So that you see how. But yeah, I, I think but as soon as you feel like you're old, you're old and that could be a 20.

Empty. And then in render tasks we'll just run the local storage dot clear now and then uncommon. This guy, this guy out 20 year.

Old that could be a 15 year old. But I always just say stay young.

This again.

Now he's empty. Hello.

Add task, move them over, refresh and.

Then you'll see that it's still in done.

No for sure, for sure.

If you put the attribute of draggable in here to true it makes it draggable but it's not really doing anything right now.

Right.

And then see how I said on drag over this guy, you see how the event popped from the locals New task. We refresh. We refresh a bunch of times. It's still there like so we move.

This guy over, we refresh. Whoops.

And we have something like null again. So that's a little bug that we have.

Adrian, what's up man? Appreciate this course. I want to break into tech for the first time.

All right dude, we'll get the handle. We'll handle that later. Soft right on drag over. That's basically what we're doing. I think it's because I'm. I'm setting the task to null somewhere.

Not quite get there man.

And you know, jobs are about to explode again.

I feel like next year.

Just you.

Just sure where yet. So let's do that again. It's tasks. Take that guy out Tasks. This render the tasks local storage.

All right, so I'm going to try to. I'm going to do it. I'm going to put it in done our functions. Oh and I do, I do want to show you guys. So if, if inside of create task element if I just.

Refresh and. All right, we have an empty study.

Now because it's the perfect timing because all the people that quit, you know.

F a task move it down.

That makes more opportunity and now's the time because then I think it'll pick up. What goes down must go up. Didn't Put Dragon Ball to true and I refreshed.

I wouldn't be able to kind of refresh.

All right, that's. That's as far as we're gonna get today. Thank you for coming. We did hit some speed bumps, but we figured them out and I think that's what coding is anyways. And you know, like, if you watch like a tutorial or something, you know, you only get to see the good parts. But we actually go right and what. What goes up must go down.

I feel dragging it all.

So.

That'S.

That's doing. I have to see like debugging in the process. And it's. I think it's. It's beneficial. So thank you for joining and the draggable property attribute. So we already want to see you guys next week and we'll add a lot more functionality and you know, I think it'll be. It'll be good. Have the done already set up and I'm going to ask you guys to do in progress.

You.

It is all about the mindset.

Today we learn Phil despise the css.

Who doesn't?

Of course. Yeah. So we'll stick around for a little bit longer if everyone wants to.

Here.

Just give me one second.

One chat. You can unmute as well. You are able to do that. You can speak to Phil and you can. Yeah, man. You can just hang out with us for a little bit.

Let's kick it.

Play some music, dude. Like music resolving me. Yes.

Should I. Yeah. Let's get song real quick.

You guys can stick around. If you have to go. You. You gotta go. Whoa. I think this is already like all pushed up there. Right? The code that we wrote.

I'll push it right now.

Okay.

All right, cool.

Yeah, we'll push it and then if you guys can. If you love see it. Yeah, dude, we do it.

If you.

If you love css. I mean because.

One second. Yeah. Minnie, can you talk for a second?

And just so many people hate it. You might get a job quick, man.

Dude, that is true. Based in the Bay Area. Hoping to land a job here. Even though the layoffs. I'm from the Bay Area.

Try to do the. The in progress drag. Drag function.

Give me two minutes.

If you can write that, that'd be great. Thank you. Thank you. Awesome. Who was that by the way?

Yeah.

As well. Adrian from East Bay. Pleasant Hill, California.

Thank you, brother.

Yeah, that's me.

Thank you mfe. Okay. All right.

Thank you for joining.

You know, it's. I hope you guys got something, you know, enjoyed something from it. But you know, drag and drop is a cool thing. Grew up there all my life. I don't know if you've heard of it, but you know, I did grow up like after I grew up I lived in Berkeley and East Oakland and.

Awesome boys.

How would homework work? Finish up the project throughout the week. All those places. Where in the Bay area are you, Adrian? Week? Yes sir. Adrian, that would be a great thing to do. And if you guys are having trouble, there is a completed, completed folder there and just reference it and finish it and then, and then maybe.

Hello? Can you hear me? Sorry about that. Yeah, so it was fast today, right? It was quite quick. Especially if you don't have much.

Sand. We can add like login or like add mongo to it next time and like run it through not live server as an extension but actually like a node server. That'd be kind of cool to do it too. 4:44am for your mercy. What time do you sleep, bro? Bruno area. Amazing. Amazing. I love the Bay Area experience.

But now you can review the code that we wrote together and you could like look up. That's crazy, man.

You know what I'm curious about is like have you been Minnie.

The San Francisco account? Which video did you guys watch to join the left field community?

Oh, by the way, by the way, sorry to cut everyone off, but you know.

Yeah, yeah, I've been there. I, I went to like a program in Stanford.

You guys want some extra credit? You guys can always comment on the video. That's right.

That's right. It was pretty, pretty sick over there.

Palo Alto.

Yeah, that's cool. Anyways, the first one.

Yeah.

Up each part and look at the documentation on it and you'll be able to follow along. But yeah, if you have.

That's a, that's a big. That I, I never knew that would get so many views. Be honest.

You can play that YouTube video. Dude, that's good. Good vibes. Any questions? You know, feel free. Free to write in the chat room that we created. But yeah, I guess Phil's back.

Cool.

Sorry, I'm just.

Yeah.

Yeah, it's.

We're trying.

That's cool.

Kind of, you know, make the community tighter. So whenever we're in here.

Will this be the layout of the classes code along and such here?

You know, take advantage of the fact that we're all in here and let's get to know each other.

That's definitely what I want because I think they can only get better from here, to be honest.

Right.

This was the first Getting a bunch of phone calls. All right, so we need to be able to drag. I get lonely fast. But yeah, dude, I'm. I'm just very grateful to be honest, to be just one. And I like we were gonna Prepare like okay, 15 minutes here to do this kind of thing and share some knowledge. And you know, it's not just me that I want to share my knowledge. I want to. I think I can learn from everyone as well. So that's something that I, you know, I want, you know, everybody should just share and execute and get done what they need to do here. 15 minutes here, 15 minutes here, 15 minutes here. But I feel like there's the most value in just this guy over and drop him in the done on the drag over, right?

That's right.

Let's see.

Oh, like getting a project done and then checking that project off your hold up.

Let me take a screenshot real quick.

So let's get that done off your checkbox. And then so I want to get as many projects as we can first. We need to be able to allow the drop event because you guys aren't seeing the drop.

But yeah, like Mercy, thank you for coming. I think he had to leave to go to.

Nigeria.

43 years old. That's awesome.

That's what's up, man.

Age is just the number event, right? Because it doesn't. It. There's a default thing happening. So I'm done here. Like. And because the prod doing project is.

The best way to learn is it.

Is just a number. But yeah, I. I think but as soon as you feel like you're old, you're old and that could be a 20 learn anyways. That's right. Yeah.

I mean 20 year old.

That could be a 15 year old. But I always just say stay young.

Adrian said trying to get a network and land a job read getting a class on networking.

Dude, there no for sure, for sure.

There's no one better than network than Phil, man.

So I have this function here called allow drop. So we prevent the default.

Adrian, what's up, man?

Oh, so I'm just going to kind of add that function in the code top. Just talk to everyone. You know, go to. There's a really good app called Meetup.

You know, you can appreciate this course. I want to break into tech for the first time. All right, dude, we'll get there, man.

And you know, jobs are about to explode again.

I feel like next year just.

Just prevent default. Study now because it's the perfect timing because all the people that quit you Know that makes more opportunity and find other people. And this just coming here is a great way to network as well. And now's the time because then I think it'll pick up. What goes down must go up. Because this is pretty global.

Yeah.

And we'll all grow together.

Yeah. We're gonna go quick man. We're gonna.

Right. And what. What goes up must go down.

I feel it is all about the mindset.

Today we learn Phil despise a CSS.

Who doesn't? And then we'll go here. Then on. On the drag over we're going to.

Allow drop and then we're going to.

Pass the event just like we plan. Me and Phil been planning this for a while. Like just dude, like if you love C. Yeah, dude, we do. If you. If you love css I mean because so many people hate it. You might get a job quick, man.

Dude, that is true.

Basically giving you guys the essentials. You know there's a lot of fluff out there. Right.

But in the Bay Area hoping to.

Land a job here. Even though the layoffs. I'm from the Bay Area.

Even if you might not get everything like understand everything. You will know exactly what you as.

Well Adrian from East Bay Pleasant Hill.

California need to learn and then on your own time. If you put in the time and learn.

Grew up there all my life. I don't know if you've heard of it but you know I did grow up like after I grew up I lived in Berkeley and East Oakland and all those places. Where in the Bay Area are you? Adrian Sand.

All that then you know you'll be job ready for sure.

Yeah. Bruno area. Amazing. Amazing. I love the Bay Area.

Allow a drop and we're going to pass the event that it passes over.

Yeah. Have you been Minnie.

The San Francisco.

Count And then we're also going to have to.

And just you know like I always say there are like skills hires and personality hires but you have to be in like the middle to be honest because you have to be able to communicate.

Yeah, yeah.

I've been there. I. I want to like a program in Stanford. It was pretty. Pretty sick over there.

Palo Alto.

Yeah.

That's cool. That's cool.

Will this be the layout of the classes code along and such allow the drop. So we have to make a drop event. I think they can only get better from here to be honest.

Right.

This was the first and you don't have to be the best program programmer to get like the job or whatever you. But you have to learn one And I like, we were going to prepare like, okay, 15 minutes here, 15 minutes here, 15 minutes Here, 15 minutes here. But I feel like there's the most value in just like getting a project done and then checking that project off your. How to like communicate and take instruction.

Well off your checkbox.

And then so I want to get as many projects as we can. And I always go with the mindset of being a programmer. Nothing more, nothing less. Because if you try to do more, that's like what you think done here, like. And because the prod doing project is the best way to learn anyways. That's right.

Yeah.

I mean the drop function, basically.

So Adrian said trying to get a network and land a job read getting a class on networking. Dude, there's no one better than networking. And Phil, man.

So I think only. But there's programming is a very big team effort. So you might think you're doing. Oh yeah, we're going to. Okay, first we need to talk to everyone. You know, go to. There's a really good app called meetup. You know, you can find other people. And this just coming here is a great way to network as well because this is pretty global. And the good thing by doing more. But then you go back to the team and they're like, wow, why did you do that? That was not part of the schedule. And then that just leaves a bad taste in everybody's mouth, I think. So just when you're programming, just nothing more, nothing less. We'll all grow together.

Yeah, we're gonna go quick, man. We're gonna just like we plan. Me and Phil been planning this for a while. Like just giving you guys the essentials. You know, there's a lot of fluff out there, right? But even if you might not get everything, like understand everything, you will know.

Exactly what you make a drag event.

So let's do I have it here?

It's the event and the data transfer to set data to kind of be able to drag the data over into.

The other id just like something I.

Learned really early in my career.

Need to learn. And then on your own time, if you put in the time and learn all that, then, you know, you'll be job ready for sure.

Yeah. And just, you know, like I always say there are like skills hires and personality hires, but you have to be in syntax. It's not too much. And then we're going to use this drag function inside of our drop function.

I guess Adrian wants to know a little bit about networking. You can speak on that a little bit What's a good thing to do.

In like the middle? To be honest, because you have to.

Be able to communicate and you don't.

Have to be the best program programmer to get like the job or whatever you could. But you have to learn how to like communicate and take instruction. Well, wait, like social networking or like networking as in like. And I always go with the mindset of being a programmer. Nothing more, nothing less. Because if you try to do more, that's like what you think only. But there's programming is a very big team effort, so you might think you're doing.

So function. Drop.

Networking to try to get a job.

I guess.

Yeah.

Take the event and we'll take the column ID that's being dropped down and the column ID if you guys remember there are. Yeah, I think we'd have a talk about that.

Yeah.

You know, the good thing and by doing more. But then you go back to the pro team and they're like, why did you do that? That was not part of the schedule. And then that just leaves a bad taste in everybody's mouth. Going to as many events like as possible. Right? I think so. Just when you're programming, just nothing more, nothing less to do in progress and done. So the first thing I want to do is event.pro. like something I learned really early in my career. Meeting people like, maybe if you wanted to come to Korea one day. I like.

I guess Adrian wants to know a little bit about networking. You can speak on that a little bit. What's a good thing to do?

Wait, like social networking or like networking? As in like.

Networking to try to get a job? I guess. Yeah.

And we're coding and stuff. I can hear of a job opening. Right. And let you guys. Yeah, I think we'd have a talk about that.

Yeah.

You know, event default and no. Which I think, you know, as our community grows and people know, maybe then we'll console log the column ID that.

We'Re talking about and then we'll say const.

Data going to as many events like as possible. Right. Meeting people like, maybe if you wanted to come to Korea one day, I like maybe there'll be a job opportunities kind of sex channel in Discord.

Yeah, we want to.

And we're coding and stuff. I can hear of a job opening. Right. And let you guys know. Which I think you know, as our community grows and people know, maybe that.

For sure definitely equals data transfer dot.

Maybe there'll be a job opportunities kind of sex channel in Discord.

Yeah, we want to do that for sure. Definitely. Ahmed has a question about the biggest team you were working with.

Biggest team I was working with probably because we had it's my team was probably like wait, like the developers, like maybe five. But then behind us there's like the data scientists. And then we had like the CTO in Colombia, the CDO in Colombia. So it's not just.

Like the immediate.

Team that you work with is gonna be, is not going to be. We'll say from the event.data transfer. Get data at big like at most maybe 9, 8. But you're going to have to work with like it's other teams. So it's like there's a thing recently.

Called like text plan.

This is all just syntax. A council, like a town council. I know it sounds like very nerdy or whatever, but you can look it up. And then there's squads. So you'll have your own squad that you work with which is like five, six people. And then you have one communicator in there that communicates with the council. And that's kind of like what the, the job office is like recently. But you never work with like 20 people at once on one project. That's it's impossible to manage. Like even at Facebook you'll have like the messenger team and even in the messenger team you'll have the networking team and look it up on the Internet. You have to know like the UI team, right? So it's always like I think 100% but it is good to like study about it. But it's just syntax. It's like you're getting the data whatever you're dropping then constant. A good development team is like five people. Five, six. What do you guys think? What do you guys think are some tech adjacent roles that are in demand now? I mean the easy one is prompt engineer, right? Dragged element. So we need to be able to know which element we are talking about. So like that's, that's all over the place I think like and you don't need to know programming that well. You just need to be able to ask the right questions and get the data that you want. And a lot of these chat bots are wrappers around ChatGPT, right? Someone might ask, hey, give me the employee report for the week of, I don't know, the 9th to the 16th. Oh, that's going to be on the document get element by ID to the column ID we are sending and. But then in the background the prompt engineer would be like okay, give now if there's dragged element and then you Add on to that. So you have like, text, give me the employment report from this week to this week, but in CSV format. And in that CSV format, I need the headers of this and this and this. And then you just keep on adding on to that prompt and to get the AI or the chatbot to give you the right answer. So prompt engineer. And if the dragged element is there, then we need to const tasks. Or I mean, another easy one is a project manager.

Right.

But did I answer your question correctly, Kenneth?

Okay, cool.

But I don't think. Awesome. I started my job like three or four months ago, and I'm in a team of four people, but I don't work with any of them. Got mixed feelings about it because there's like zero mentorship that's status equals column id, and we need to update the task status. Update task status.

And we need to make that function the issue, bro. These days, that is the issue.

And I think programming is because if you have zero mentorship, like, regularly at a company, at first you have like someone you shadow for like a month or something, just with the data and the task status. And so, you know. But if you have nothing in the beginning, then you don't even know, even if you're like, creating a whole bunch of technical debt, you know?

Yeah.

Then they look at it and then they're like, oh, like, you got to rewrite this, rewrite this. And then just becomes a big headache.

I think Adrian had a question about Go. Is it a good language?

I think golang is. I'm sure PR brutals were brutal if you had zero, like mentorship, but event dot target. So the event of what, what we're clicking on. I think a lot of people from Node JS are moving to Go Link because it's like HTTP requests like target.

Query. Query selector. Task container and append child to the drag element.

So next we need to make the update monster. Like, they handle requests very fast and they have something called go routines. So if you guys ever use Google Docs or anything and you see like, like multiple people working on the same, like, file. Right? And it's all happening simultaneously, right. All synchronously or not synchronously asynchronously on multiple threads. I didn't want to, like, say that, but, like, all at the same time. Golang is really good at handling, like, things that happen at the same time. When Node js, everything's happening in order. Right. So that's why golang is so powerful for, like, HTTP requests or even task status function. We made the drop function, so that's.

That this one.

Now we need to make the function to update the task when it's moved to a different column. Game servers go htmx. I totally want to learn that as well as back. What do companies excerpts from an entry level? Junior guys who are trying to land a job in the current market. What do company accept? What oh, expect. Oh, expect from an entry level? I think someone that just wants to learn, right? Someone who's going to be responsible, like not late, you know. And I think the biggest thing is like because as a junior developer, you don't really know how long a task is going to take you, right? So that one will make function update.

Task status.

And but they, they're going to build you up and then you're going to learn and then you're going to learn to say, hey, how long is this? Is it going to hook? Like take you to hook up this crud system? How long is this? And then someone that can kind of like if you're a junior developer or something, you have to know your limits. And I think.

All right, the question.

In every single job is how long is this going to take? Right? And that's the question every developer hates. Because I don't know, like there, there could be something that happens. But if you can honestly say, hey, this is going to take me three days and finish in three days, then you kind of the respect level goes up. Hey, but I have a meeting at 11 minutes. Can you finish this up and tell me what happened? Let's take two arguments that we said.

We were going to do and take.

The task ID and then use. Did you take a screenshot?

Yes, I did.

Okay, Janice, where it's going.

So from the task ID we can select it. Okay, thank you everyone. I will see you guys next Sunday for you guys.

Yes, Sunday for you guys.

Know which column it's in. And then we have to send a new status that it's going to.

Same time guys, everyone. There's a lot of exercises as well in the file. You guys can do those to, you know, get good at some of the things that we learned today. So appreciate you guys. Thank you again. We'll chat again. We'll have a longer chat session maybe next time.

And I want to do just like there's JavaScript basics and it would be cool if you guys all knew because we want to get into react by like the third time, right? Maybe even next time. But like, I don't really write HTMLs like CSS, JavaScript, that much, to be honest, I mostly do. And that's what the job market wants. So I really want to get into that. But I felt like if we went straight into that, it would have. You have to learn the basics first.

So now console log the new status. It's going to make sure that comes correctly.

And then we'll say path before you get to the libraries. But right. I want to get to react as fast as possible. So you know, stick around and we'll get to react and it'll be awesome.

Yeah, we'll get there. Adrian keep showing up every week. You know, we'll get there, we'll go fast, not gonna lie, but we'll get there.

But over the week you guys can message and ask questions and we have that chat room. So just like code and I'll review it and tell you what you know needs to be done. Yeah, like that equals tasks dot map. So that returns the array task and then if task ID equals the task ID we're talking about, right. We need to return on that task task. We'll spread the task and then we'll say the status will equal the new status that we're sending. And that is going very fast.

Okay. Okay, got it.

And then from there we will update.

Local storage.

And.

That should be done.

Now we need to add those functions. So allow drop on event and.

We'Re.

Going to put the on drop.

We're going to put drop event and to the done.

Right. That's the new column ID that we're.

Going to send it. See if that works. Whoops, not saved. One second. Rob. Think I put these on the wrong guy. One second, one second.

Failed to execute Append child on no.

The new child contains the parent. All right, what is going on?

Let's debug.

Take this. If out console log rag element equals ragged element. The dragged element is getting passed. I think I put the.

One second. Let me just take a look real quick. It.

Oh, sorry.

We're moving over the whole guy Data nothing for some reason.

Event data transfer. Get data event data transfer. One second, one second.

We prevent the default.

We have column ID then const data.

Equals event data transfer.

Getdatax plain.

That's the event that we're dropping.

Dragged element is nothing for some reason.

One second, please.

Is it because the element by ID is not data?

That's what the data transfer is supposed to do.

Oh yeah.

Give me a second. On a done. Why didn't data transfer.

Oh, oh, oh, sorry, sorry.

Wait, I didn't put the HTML correctly. Give me a second.HTML event on drag over event.

I think the HTML under the done. There's nothing there.

That's why. Oh, yeah, you know what?

In progress.

No, we never added the drag function into the element.

Oh.

So here we're supposed to add here.

Sorry, guys.

Yeah, okay. We got it though.

Yeah, I guess so on the task we're gonna need to add. Add the event listener drag start and then that's gonna be the drag function.

Right.

Nice.

That makes sense. All right, then this guy and then.

Take him because that's actually data transfer that we needed. I apologize, but everything's working now. It's only going to move to done right now. But I'm going to ask you guys to kind of add the same logic to in progress and.