1 00:00:00,000 --> 00:00:09,538 [MUSIC] 2 00:00:09,538 --> 00:00:10,378 Hey, what's up? 3 00:00:10,378 --> 00:00:12,973 My name's Dustin, and I'm a developer here at Treehouse. 4 00:00:12,973 --> 00:00:15,441 Today I have a little bit of a different type of video for you. 5 00:00:15,441 --> 00:00:18,706 We're gonna be building something out from scratch live. 6 00:00:18,706 --> 00:00:23,111 So I'm gonna use GitHub Copilot to help me build out some sort of task manager, 7 00:00:23,111 --> 00:00:24,325 kind of like Trello. 8 00:00:24,325 --> 00:00:27,890 But we're gonna use React, which is something I'm not super comfortable with, 9 00:00:27,890 --> 00:00:31,160 and we're gonna use GitHub Copilot to basically help us when we struggle. 10 00:00:31,160 --> 00:00:35,334 And I kinda wanna just show you how you can use GitHub Copilot to help you out. 11 00:00:35,334 --> 00:00:39,114 If you're unfamiliar with GitHub Copilot or need a good introduction, check out 12 00:00:39,114 --> 00:00:43,032 the description down below for a link to our introduction to GitHub Copilot course. 13 00:00:43,032 --> 00:00:46,418 But I also advise you not to follow along with me just simply because what 14 00:00:46,418 --> 00:00:48,857 GitHub Copilot offers you may be different for me. 15 00:00:48,857 --> 00:00:51,706 So just sit back, relax, watch as I try to build something out, and 16 00:00:51,706 --> 00:00:54,364 hopefully not fail, then give it a try when you're finished. 17 00:00:54,364 --> 00:00:57,025 But all I have here is an empty text editor, and 18 00:00:57,025 --> 00:00:59,495 I'm going to get started coding this out. 19 00:00:59,495 --> 00:01:01,512 So let's get started. 20 00:01:01,512 --> 00:01:03,971 Okay, so basically what I wanna do is, 21 00:01:03,971 --> 00:01:07,257 I want to try to build this out as much as I can myself. 22 00:01:07,257 --> 00:01:11,454 And then when I fail or struggle, we're gonna call on GitHub Copilot. 23 00:01:11,454 --> 00:01:15,692 So just in case you aren't familiar with what a task manager is or 24 00:01:15,692 --> 00:01:20,494 what Trello is, let me open up Figma, which is kinda like a design tool. 25 00:01:20,494 --> 00:01:24,786 I use this to kinda visualize what I wanna build. 26 00:01:24,786 --> 00:01:28,500 This is kinda like a wireframing and markup tool. 27 00:01:28,500 --> 00:01:30,532 But I'm no designer, so this is pretty basic. 28 00:01:30,532 --> 00:01:33,866 But basically what we're gonna try to build out is a task board, 29 00:01:33,866 --> 00:01:35,732 which is gonna be this big gray box. 30 00:01:35,732 --> 00:01:39,002 And inside the task board we're gonna have three lists, 31 00:01:39,002 --> 00:01:42,144 a not started, an in progress, and a completed list. 32 00:01:42,144 --> 00:01:46,178 And what we wanna do is click on this button that each list is gonna have. 33 00:01:46,178 --> 00:01:48,084 It's gonna say, Add Task. 34 00:01:48,084 --> 00:01:52,875 We should be able to click this and then a prompt should appear. 35 00:01:52,875 --> 00:01:54,639 We'll type something in, 36 00:01:54,639 --> 00:01:59,325 and it'll add that task that we put in the prompt to the respective list. 37 00:01:59,325 --> 00:02:02,193 And yeah, that's it, we're not gonna do anything extra. 38 00:02:02,193 --> 00:02:07,126 I know if you're used to Trello, you know that you can drag and drop your tasks and 39 00:02:07,126 --> 00:02:08,081 delete tasks. 40 00:02:08,081 --> 00:02:12,885 But for the sake of keeping this video a little bit short and not super, 41 00:02:12,885 --> 00:02:17,281 super long, I just wanna try to build out a basic task manager app 42 00:02:17,281 --> 00:02:21,381 using my limited React knowledge and some GitHub Copilot. 43 00:02:21,381 --> 00:02:24,370 And we're gonna try to mimic this, not so much the styles. 44 00:02:24,370 --> 00:02:26,452 I didn't really go crazy with the styles here, but 45 00:02:26,452 --> 00:02:28,301 I do wanna kind of get the structure the same. 46 00:02:28,301 --> 00:02:31,574 So we'll see if GitHub Copilot can help us with the CSS as well, but 47 00:02:31,574 --> 00:02:35,500 I might have to hop in there and do a little bit of CSS work myself. 48 00:02:35,500 --> 00:02:38,096 So yeah, so with that being said, 49 00:02:38,096 --> 00:02:42,497 let's hop back into the text editor and get this started. 50 00:02:42,497 --> 00:02:46,093 So I'm gonna open up the terminal in my desktop, and 51 00:02:46,093 --> 00:02:49,300 I'm just gonna run npm create vite@latest. 52 00:02:49,300 --> 00:02:53,813 It's gonna create a new React app for me, and I'll just call this task-manager. 53 00:02:53,813 --> 00:02:55,220 And we're gonna use React. 54 00:02:55,220 --> 00:02:58,648 And we're gonna use regular JavaScript, not TypeScript. 55 00:02:58,648 --> 00:03:03,525 So now let's cd into task-manager run npm install to install everything 56 00:03:03,525 --> 00:03:06,364 we need to spin up this React application. 57 00:03:06,364 --> 00:03:08,289 And then once that's finished, 58 00:03:08,289 --> 00:03:11,598 I'm gonna type in npm run dev to spin up the React server. 59 00:03:11,598 --> 00:03:13,760 Awesome, so let's run npm run dev. 60 00:03:15,020 --> 00:03:19,059 And now we have our server on localhost:5173. 61 00:03:19,059 --> 00:03:20,380 So I'm gonna click that. 62 00:03:20,380 --> 00:03:21,989 And this is our React app. 63 00:03:21,989 --> 00:03:28,082 But now to get our React app into the editor, awesome, there we go. 64 00:03:28,082 --> 00:03:29,242 I opened it up in the editor. 65 00:03:29,242 --> 00:03:34,226 So now I'm gonna actually have to open up the terminal again and 66 00:03:34,226 --> 00:03:38,377 run npm, oops, run dev to spin up the server again. 67 00:03:38,377 --> 00:03:39,938 And, awesome, there we go. 68 00:03:39,938 --> 00:03:46,583 So I think for now I will leave, now we'll leave the terminal open. 69 00:03:46,583 --> 00:03:49,665 So the first thing I like to do with a React app is just kind of delete all 70 00:03:49,665 --> 00:03:50,794 the unnecessary files. 71 00:03:50,794 --> 00:03:54,917 So inside of the source folder, I'm just gonna delete the assets folder. 72 00:03:54,917 --> 00:04:02,003 The app.css, the index.css, and I'll keep the ESLint. 73 00:04:02,003 --> 00:04:06,725 Okay, so we should mainly just have the main and app files in here. 74 00:04:06,725 --> 00:04:10,941 So inside of main, let's go ahead and delete the import for the CSS. 75 00:04:10,941 --> 00:04:13,749 Since we're not using that, let's save. 76 00:04:13,749 --> 00:04:18,274 And inside of app, we're just gonna delete everything, okay, and 77 00:04:18,274 --> 00:04:20,705 I'm just gonna write function App. 78 00:04:20,705 --> 00:04:25,453 We're gonna return maybe just an h1 that says, Hello World, 79 00:04:25,453 --> 00:04:28,687 and then we're gonna export default App. 80 00:04:28,687 --> 00:04:32,849 And if you noticed, some of the code that it was offering for 81 00:04:32,849 --> 00:04:36,104 me to write was actually from GitHub Copilot. 82 00:04:36,104 --> 00:04:37,521 So I'm gonna hit Save. 83 00:04:37,521 --> 00:04:39,121 Looks like all the errors went away. 84 00:04:39,121 --> 00:04:42,515 And if we open up our browser, we see Hello World. 85 00:04:42,515 --> 00:04:44,994 So now we have our basic application ready. 86 00:04:44,994 --> 00:04:47,865 And yeah, so now let's get started. 87 00:04:47,865 --> 00:04:50,407 For the most part, we're not gonna create any new files. 88 00:04:50,407 --> 00:04:52,413 I'm not gonna create components. 89 00:04:52,413 --> 00:04:55,284 I'm just gonna try to do everything in the one file, keep this simple. 90 00:04:55,284 --> 00:04:57,707 So I'm gonna close the explore window. 91 00:04:57,707 --> 00:05:00,910 And I really don't like how much space this is taking up, 92 00:05:00,910 --> 00:05:03,130 maybe we can just move it to the bottom. 93 00:05:03,130 --> 00:05:05,284 We might have to move it back later on, but 94 00:05:05,284 --> 00:05:07,570 I'll push the terminal down to the bottom. 95 00:05:07,570 --> 00:05:11,903 So now we have our app on the right, and then our code on the left. 96 00:05:11,903 --> 00:05:13,473 So what do we wanna do? 97 00:05:13,473 --> 00:05:15,425 How do we wanna get this started? 98 00:05:15,425 --> 00:05:16,550 That's a good question. 99 00:05:16,550 --> 00:05:18,764 [LAUGH] I'm not super familiar with React. 100 00:05:18,764 --> 00:05:22,038 So inside of the app component, 101 00:05:22,038 --> 00:05:26,531 let's just render a TaskBoard component. 102 00:05:26,531 --> 00:05:28,879 And what I wanna do is actually create that. 103 00:05:28,879 --> 00:05:31,903 So let's do function TaskBoard. 104 00:05:31,903 --> 00:05:35,849 And we want to return, let's return an h1 that says TaskBoard, 105 00:05:35,849 --> 00:05:38,453 just to make sure everything's working. 106 00:05:38,453 --> 00:05:42,578 Cool, so we have our TaskBoard rendering, which is this function here. 107 00:05:42,578 --> 00:05:44,378 And that's the only thing app is rendering. 108 00:05:44,378 --> 00:05:46,145 And this is coming from main. 109 00:05:46,145 --> 00:05:50,279 Main is just rendering our app, so it's essentially rendering the TaskBoard. 110 00:05:50,279 --> 00:05:54,491 So what I wanna do is try to put everything inside of this TaskBoard 111 00:05:54,491 --> 00:05:55,341 component. 112 00:05:55,341 --> 00:06:00,601 And I know I'm gonna need three lists as child elements. 113 00:06:00,601 --> 00:06:05,170 I also know that I'm gonna need state to handle all this data and updating the UI. 114 00:06:05,170 --> 00:06:08,193 So let's go ahead and import. 115 00:06:08,193 --> 00:06:13,455 We're gonna import useState from React. 116 00:06:13,455 --> 00:06:17,169 And now I'm not sure where we're gonna put the state. 117 00:06:17,169 --> 00:06:22,709 I'm not sure if that goes into app or if that goes into TaskBoard, 118 00:06:22,709 --> 00:06:27,159 simply because I'm not super familiar with state. 119 00:06:27,159 --> 00:06:29,864 Let's see, let's actually simplify this a good bit. 120 00:06:29,864 --> 00:06:34,025 Instead of just returning a TaskBooard component, let's put everything inside of 121 00:06:34,025 --> 00:06:36,787 app, and maybe we can refactor this a little bit later. 122 00:06:36,787 --> 00:06:40,324 So since I know that we're just gonna have this one component, 123 00:06:40,324 --> 00:06:42,002 let's put the state in here. 124 00:06:42,002 --> 00:06:44,324 Okay, so it automatically, as you can see, 125 00:06:44,324 --> 00:06:47,397 GitHub Copilot wants to know that I wanna set up some state. 126 00:06:47,397 --> 00:06:49,887 But we're not setting up account or a set count, 127 00:06:49,887 --> 00:06:52,330 we're actually gonna be setting up our tasks. 128 00:06:52,330 --> 00:06:57,983 So let's start writing out what we want on typing tasks. 129 00:06:57,983 --> 00:07:02,143 And it looks like it wants to automatically write setTasks as 130 00:07:02,143 --> 00:07:06,476 a function, and it wants to set up an array inside of useState. 131 00:07:06,476 --> 00:07:09,682 So let's just hit Enter and see what it does. 132 00:07:09,682 --> 00:07:13,125 Okay, so it wants to give us an object with an id of 1. 133 00:07:13,125 --> 00:07:17,856 The title of learn React and a done of false. 134 00:07:17,856 --> 00:07:21,624 This is somewhat right, but let's update this a little bit. 135 00:07:21,624 --> 00:07:26,087 So the title I'm gonna put to Not Started. 136 00:07:26,087 --> 00:07:32,873 And then the only other thing I want in here is tasks. 137 00:07:32,873 --> 00:07:35,999 So I'm gonna use this as an array, and it already knew that I wanted an array. 138 00:07:35,999 --> 00:07:37,588 So that's awesome. 139 00:07:37,588 --> 00:07:40,466 We're gonna leave this empty for now, but I'm gonna hit Enter. 140 00:07:40,466 --> 00:07:41,914 And cool. 141 00:07:41,914 --> 00:07:48,108 So it's suggesting that I want to set up another object in this array for 142 00:07:48,108 --> 00:07:52,458 our state with an id of 2, a title of In Progress. 143 00:07:52,458 --> 00:07:57,379 So it knew that I wanted to have an in progress one within a empty array for 144 00:07:57,379 --> 00:07:57,961 tasks. 145 00:07:57,961 --> 00:08:01,396 So let's see if it also knows that we want a completed. 146 00:08:01,396 --> 00:08:02,568 And it does, awesome. 147 00:08:02,568 --> 00:08:06,048 Are we using completed in the UI? 148 00:08:06,048 --> 00:08:08,232 Yeah, Completed, In Progress, and Not Started. 149 00:08:08,232 --> 00:08:09,573 So that's pretty accurate. 150 00:08:09,573 --> 00:08:12,338 Not Started, In Progress, and Completed, awesome. 151 00:08:12,338 --> 00:08:16,204 So now we'll hit Tab again, and it's gonna wanna close off our state. 152 00:08:16,204 --> 00:08:17,950 So that's awesome. 153 00:08:17,950 --> 00:08:24,650 Inside the return statement, I want to set up a className, a container, basically. 154 00:08:24,650 --> 00:08:29,257 And we're gonna call this container task-board. 155 00:08:29,257 --> 00:08:32,650 And in here I want to render our three lists. 156 00:08:32,650 --> 00:08:37,935 So what I could do is, I know we're gonna need a map over the data that's in state. 157 00:08:37,935 --> 00:08:42,801 So I'm gonna start typing a curly bracket to write some JavaScript. 158 00:08:42,801 --> 00:08:45,960 And it looks like it already knows I want to actually map over some data. 159 00:08:45,960 --> 00:08:47,539 So I'm gonna hit Enter. 160 00:08:49,354 --> 00:08:52,723 So it's giving me a task column, not sure I wanted that, but 161 00:08:52,723 --> 00:08:54,582 let's just see what it gives us. 162 00:08:54,582 --> 00:08:59,139 So it wants to put our tittle in h3, which is pretty cool. 163 00:08:59,139 --> 00:09:01,816 Awesome, then it gives us a task list. 164 00:09:01,816 --> 00:09:06,640 I don't want that as a dev though, that is a UL item. 165 00:09:06,640 --> 00:09:08,663 But anyway, cool. 166 00:09:08,663 --> 00:09:13,831 So now it wants to map, inside of this UL, it wants to map the tasks. 167 00:09:13,831 --> 00:09:18,837 So it's doing task.tasks.map, which is basically tasks, 168 00:09:18,837 --> 00:09:25,171 and then tasks, and then we're mapping over the elements inside of our array. 169 00:09:25,171 --> 00:09:27,531 Even though they're empty right now, 170 00:09:27,531 --> 00:09:31,330 this is still what it wants to do whenever this is gonna be full. 171 00:09:31,330 --> 00:09:34,789 So in here, cool, so it's gonna create a list item, and 172 00:09:34,789 --> 00:09:39,638 it's gonna with className of task-item, and then the task.title. 173 00:09:39,638 --> 00:09:44,855 So not sure why it wants to put task.title in there. 174 00:09:48,254 --> 00:09:50,967 I don't know, let's just see what it's doing. 175 00:09:50,967 --> 00:09:52,869 Okay, so we're gonna close that off. 176 00:09:56,812 --> 00:09:59,475 And that's it, it's not wanting to close off anymore, so 177 00:09:59,475 --> 00:10:02,110 that's definitely gonna give us some errors. 178 00:10:02,110 --> 00:10:03,980 So, it looks like it's closing this off. 179 00:10:03,980 --> 00:10:06,597 So, what we need to do is close off our ul. 180 00:10:06,597 --> 00:10:11,790 So, I kinda knew that, how to close that for me after I started typing it. 181 00:10:11,790 --> 00:10:15,927 Okay, so now we're closing off our initial map, and now we're closing off our div. 182 00:10:15,927 --> 00:10:22,000 And then now we're actually closing off the initial. 183 00:10:23,130 --> 00:10:24,670 No, I don't think we need that. 184 00:10:24,670 --> 00:10:27,320 So, let's make sure we're starting off our div here. 185 00:10:27,320 --> 00:10:30,150 And we're closing it, so that's not good. 186 00:10:30,150 --> 00:10:32,055 This ul should be closed way sooner. 187 00:10:32,055 --> 00:10:35,970 Uh-oh, okay, so we messed up a little bit. 188 00:10:35,970 --> 00:10:38,850 It looks like get up copilot didn't close a tag. 189 00:10:38,850 --> 00:10:41,600 So, let's make sure we're closing everything that we need. 190 00:10:41,600 --> 00:10:48,540 So, our task first map that we're our first set of JavaScript is here. 191 00:10:49,860 --> 00:10:53,360 Our second one is here, and the second one is being closed. 192 00:10:53,360 --> 00:10:54,590 So, we do need to close that. 193 00:10:54,590 --> 00:10:56,540 I think this ul shouldn't be here. 194 00:10:56,540 --> 00:10:57,429 The ending ul. 195 00:11:00,200 --> 00:11:03,240 Or should it, no yeah, it should be here. 196 00:11:03,240 --> 00:11:06,890 So, we should be closing the column after this. 197 00:11:06,890 --> 00:11:07,900 Which we are. 198 00:11:09,300 --> 00:11:15,690 Okay, and then we are closing off this map and then our closing div tags. 199 00:11:15,690 --> 00:11:16,820 So, that all looks right. 200 00:11:16,820 --> 00:11:22,400 And then our return, and then our end of our function. 201 00:11:22,400 --> 00:11:25,260 So, there is some sort of syntax error here. 202 00:11:25,260 --> 00:11:29,866 So, let's throw this into ChatGPT and 203 00:11:29,866 --> 00:11:33,920 see if that can help us figure out, 204 00:11:36,570 --> 00:11:39,090 What's wrong with this return statement? 205 00:11:39,090 --> 00:11:46,440 So, let's type in what is wrong with our return statement? 206 00:11:46,440 --> 00:11:49,990 This is some React code. 207 00:11:49,990 --> 00:11:53,580 And let's paste in our return statement. 208 00:11:53,580 --> 00:11:56,730 And it says the code you provided seems to be rendering a task board using React. 209 00:11:56,730 --> 00:11:59,841 However, there is a potential issue with the variable naming that might be causing 210 00:11:59,841 --> 00:12:01,270 confusion and unexpected behavior. 211 00:12:02,700 --> 00:12:07,684 In the inner map function inside of the second tasks dot task dot map block. 212 00:12:07,684 --> 00:12:10,184 You're using the same variable name task for 213 00:12:10,184 --> 00:12:13,470 the iteration variable as the outer map function. 214 00:12:13,470 --> 00:12:16,849 This can lead to unexpected behavior, because the inner task variable will 215 00:12:16,849 --> 00:12:20,660 shadow the outer task variable making the outer one inaccessible. 216 00:12:20,660 --> 00:12:22,440 With the interscope to fix this issue. 217 00:12:22,440 --> 00:12:24,370 You should use a different variable named map. 218 00:12:26,380 --> 00:12:30,395 I'm sorry, a different variable names for the inner and outer map functions. 219 00:12:30,395 --> 00:12:34,666 Okay,so basically our iterator is using task for our inner map function and 220 00:12:34,666 --> 00:12:36,930 then we're also using it here. 221 00:12:36,930 --> 00:12:41,230 So, it probably doesn't know since this lives inside of the. 222 00:12:41,230 --> 00:12:44,209 Basically, the first map iteration, 223 00:12:44,209 --> 00:12:49,260 it doesn't know which task I'm referring to when I use task. 224 00:12:49,260 --> 00:12:51,887 So, whenever we're using task here to. 225 00:12:51,887 --> 00:12:55,690 We're kind of mapping it to the item is being iterated. 226 00:12:55,690 --> 00:13:00,350 It doesn't know if we're referencing this task or this task. 227 00:13:00,350 --> 00:13:01,470 So, that makes a lot of sense. 228 00:13:01,470 --> 00:13:05,090 So, let's see if we can figure this out better. 229 00:13:05,090 --> 00:13:06,676 So, our first one. 230 00:13:06,676 --> 00:13:10,170 Let's actually name this list. 231 00:13:10,170 --> 00:13:11,860 So, we'll name that list. 232 00:13:11,860 --> 00:13:13,990 And for this first one, we'll do list dot title. 233 00:13:13,990 --> 00:13:15,010 Which makes more sense. 234 00:13:15,010 --> 00:13:15,870 This isn't a task. 235 00:13:15,870 --> 00:13:17,460 This is a list. 236 00:13:17,460 --> 00:13:20,550 So, that works and we're still getting an error here. 237 00:13:20,550 --> 00:13:24,710 So, let's figure out what's going on? 238 00:13:24,710 --> 00:13:25,410 Actually, you know what? 239 00:13:25,410 --> 00:13:28,590 Let's just save this and check out what it says in the browser. 240 00:13:30,720 --> 00:13:34,060 So in the console, task is not defined. 241 00:13:34,060 --> 00:13:37,575 And this is on line 19, task. 242 00:13:37,575 --> 00:13:41,118 Okay, so we need to put list here, 243 00:13:41,118 --> 00:13:47,520 because that was part of the iterator for the first map. 244 00:13:47,520 --> 00:13:52,720 Sometimes nesting, array methods can kind of get a little confusing. 245 00:13:52,720 --> 00:13:54,599 But, we'll save that. 246 00:13:54,599 --> 00:14:01,040 And now, we're also getting a task is not defined in this is at line 18. 247 00:14:01,040 --> 00:14:02,522 So, line 18. 248 00:14:02,522 --> 00:14:04,763 Well, that doesn't make any sense. 249 00:14:08,550 --> 00:14:13,440 All right, so let's copy this entire code and throw this in ChatGPT. 250 00:14:13,440 --> 00:14:15,807 Or, you know what, let's copy what? 251 00:14:15,807 --> 00:14:18,430 Now, yeah, no, no, let's not do that. 252 00:14:18,430 --> 00:14:19,830 Let's copy this. 253 00:14:19,830 --> 00:14:27,000 I am getting errors with this. 254 00:14:27,000 --> 00:14:30,570 React code is everything looking. 255 00:14:32,180 --> 00:14:35,414 Okay, and let's paste in our code. 256 00:14:35,414 --> 00:14:37,895 The code you provided is mostly correct, but 257 00:14:37,895 --> 00:14:41,302 I noticed a small issue related to rendering the tasks items. 258 00:14:41,302 --> 00:14:44,463 Since, you're using the tasks array inside of the state object. 259 00:14:44,463 --> 00:14:46,250 And then mapping through it to under tasks. 260 00:14:46,250 --> 00:14:49,869 You should make sure you're passing the correct data structure to your state when 261 00:14:49,869 --> 00:14:51,210 updating tasks. 262 00:14:51,210 --> 00:14:55,226 Currently you have and it shows, tasks, set tasks you state, and 263 00:14:55,226 --> 00:14:57,530 then all of our data that's in state. 264 00:14:59,580 --> 00:15:00,960 Here's what I can do. 265 00:15:10,176 --> 00:15:13,470 Okay. So, I want to use some of these. 266 00:15:13,470 --> 00:15:15,800 Let's, copy this and see if this works. 267 00:15:15,800 --> 00:15:17,772 It looks like it's returning our entire app file. 268 00:15:17,772 --> 00:15:20,480 So, let's Control A-Delete it all. 269 00:15:20,480 --> 00:15:21,860 Hit paste. 270 00:15:21,860 --> 00:15:26,150 And now, I'm not seeing any red lines. 271 00:15:26,150 --> 00:15:27,320 So, let's see if this is working. 272 00:15:29,390 --> 00:15:30,690 So, no more errors. 273 00:15:30,690 --> 00:15:34,902 And now we see our lists, that's great,okay. 274 00:15:34,902 --> 00:15:38,110 So, let's see if we have a task in here. 275 00:15:39,600 --> 00:15:41,052 Hello, world. 276 00:15:41,052 --> 00:15:42,580 I will put hello world in here. 277 00:15:43,650 --> 00:15:46,700 And it looks like it is adding an input, which is not what we wanted. 278 00:15:46,700 --> 00:15:49,520 So, there must be an input that it's putting in here somewhere. 279 00:15:50,970 --> 00:15:52,957 Okay, so, yeah. 280 00:15:52,957 --> 00:15:55,190 We are seeing an input right here. 281 00:15:55,190 --> 00:15:56,940 So, let's go ahead and remove this input. 282 00:15:56,940 --> 00:15:58,199 We do not need that. 283 00:16:00,849 --> 00:16:06,180 All we wanna do is actually do tasks. 284 00:16:06,180 --> 00:16:08,050 That title is all we need, right? 285 00:16:08,050 --> 00:16:13,165 So, why aren't we seeing tasks that title in 286 00:16:13,165 --> 00:16:21,658 here if it's actually rendering tasks got title inside of this list item. 287 00:16:21,658 --> 00:16:24,060 Yeah, I'm not sure it's, let's remove this input. 288 00:16:24,060 --> 00:16:25,700 I don't think we'll need that. 289 00:16:28,920 --> 00:16:32,460 And it is showing a list item here. 290 00:16:32,460 --> 00:16:38,580 Because, we do have hello world inside of our array. 291 00:16:38,580 --> 00:16:43,170 But, it's showing an empty list item, I'm not sure why. 292 00:16:49,200 --> 00:16:56,310 So, let's actually just task.title. 293 00:16:56,310 --> 00:16:59,980 Okay, so that's why, it's looking for a title property. 294 00:16:59,980 --> 00:17:07,350 So, I wonder if I put a title hello world if it would show and it does. 295 00:17:07,350 --> 00:17:09,510 So that's cool, but that's not what we want. 296 00:17:09,510 --> 00:17:12,310 We want a very basic array of tasks. 297 00:17:12,310 --> 00:17:17,420 So, let's add hello world right back in there. 298 00:17:17,420 --> 00:17:25,790 And instead of doing Task got title, which is gonna be task and that should work. 299 00:17:25,790 --> 00:17:26,820 Sweet it does. 300 00:17:26,820 --> 00:17:28,110 Cool, cool, cool, cool. 301 00:17:28,110 --> 00:17:32,920 So, that was extremely complex and a lot of troubleshooting just starting off. 302 00:17:32,920 --> 00:17:35,281 Hopefully, this doesn't keep happening, but. 303 00:17:35,281 --> 00:17:42,860 So, we have this update task function and that ChatGPT gave us. 304 00:17:42,860 --> 00:17:45,430 So, updateTask. 305 00:17:45,430 --> 00:17:52,280 It takes a list Index, task index and an updated title. 306 00:17:54,100 --> 00:18:02,920 Updated tasks equals, and we're spreading the tasks And this update task. 307 00:18:02,920 --> 00:18:07,070 Okay, so then it calls set tasks to actually reset our state. 308 00:18:07,070 --> 00:18:07,680 So, this is cool. 309 00:18:07,680 --> 00:18:08,290 This makes sense. 310 00:18:08,290 --> 00:18:09,940 We'll definitely use this. 311 00:18:09,940 --> 00:18:15,880 I do know that each list, which will be this div right here. 312 00:18:16,940 --> 00:18:22,808 I do want at the bottom of the ul a button and 313 00:18:22,808 --> 00:18:26,330 we want to add task. 314 00:18:26,330 --> 00:18:31,180 So, each one of these tasks should have this button. 315 00:18:31,180 --> 00:18:35,944 And I'm wondering if on click, we can do update task 316 00:18:35,944 --> 00:18:41,160 which is that function that we got from ChatGPT, right? 317 00:18:42,760 --> 00:18:46,339 But, we need to find a way to give it a new task. 318 00:18:46,339 --> 00:18:49,331 So, what I would like is to prompt, right? 319 00:18:49,331 --> 00:18:52,450 So, let new task equal prompt. 320 00:18:54,211 --> 00:18:56,470 Add a task. 321 00:18:56,470 --> 00:19:00,610 So, what would happen if we hit Add Task is yeah, cool. 322 00:19:00,610 --> 00:19:03,180 So, now we have this Add Task prompt. 323 00:19:03,180 --> 00:19:04,340 I don't think anything will work here. 324 00:19:04,340 --> 00:19:06,760 Let's do hello world. 325 00:19:06,760 --> 00:19:08,380 Hit Okay, yeah, nothing happens. 326 00:19:08,380 --> 00:19:12,680 So, const updated tasks. 327 00:19:13,750 --> 00:19:18,180 It's spreading our tasks, can we also add our new task to this? 328 00:19:19,420 --> 00:19:22,060 And then it would take the updated tasks. 329 00:19:23,530 --> 00:19:25,420 Task index title. 330 00:19:25,420 --> 00:19:27,390 Not sure if this would work, but let's give it a try. 331 00:19:27,390 --> 00:19:30,940 So, clean the kitchen. 332 00:19:31,960 --> 00:19:32,864 Yeah, nothing happened. 333 00:19:32,864 --> 00:19:34,830 But, let's see if we have anything in the console. 334 00:19:36,320 --> 00:19:37,800 Ooh, console's not good. 335 00:19:37,800 --> 00:19:40,040 So, undefined reading tasks. 336 00:19:40,040 --> 00:19:41,409 And this is on line 14. 337 00:19:41,409 --> 00:19:45,280 So, it's having trouble reading tasks. 338 00:19:45,280 --> 00:19:48,620 So, let's actually remove this function. 339 00:19:48,620 --> 00:19:50,862 Since, we're actually not even using it yet, 340 00:19:50,862 --> 00:19:52,890 other than the new button that we clicked. 341 00:19:52,890 --> 00:19:53,609 Okay, cool. 342 00:19:53,609 --> 00:19:57,392 So, I see GitHub Copilot is offering us some stuff and 343 00:19:57,392 --> 00:20:02,068 it basically looks like what ChatGPT just offered us. 344 00:20:02,068 --> 00:20:02,800 I don't like that it didn't work. 345 00:20:02,800 --> 00:20:07,230 So what I'm gonna do is, I do know for sure that I want to have a prompt. 346 00:20:07,230 --> 00:20:14,250 So let's do let new task equal prompt and we're gonna put enter a new task. 347 00:20:14,250 --> 00:20:21,300 And if I hit Enter, it says let newTasks equal task then new tasks listed. 348 00:20:21,300 --> 00:20:25,769 So, it's kinda doing the same thing it looks like but it does add in our newTask, 349 00:20:25,769 --> 00:20:26,703 which is great. 350 00:20:26,703 --> 00:20:28,398 And then we're updating it in state. 351 00:20:28,398 --> 00:20:30,375 And this was all given to me by GitHub copilot so, 352 00:20:30,375 --> 00:20:32,390 it kinda knows what I wanna do. 353 00:20:32,390 --> 00:20:33,410 So, let's hit Save. 354 00:20:33,410 --> 00:20:34,590 Reload this browser. 355 00:20:34,590 --> 00:20:39,312 Let's keep the console up just in case. 356 00:20:39,312 --> 00:20:44,202 And if I click here and I type hello world, hit Enter. 357 00:20:44,202 --> 00:20:46,730 We see nothing. 358 00:20:46,730 --> 00:20:48,339 So, gotta figure this out. 359 00:20:48,339 --> 00:20:51,299 We're gonna figure out why I'm not seeing anything. 360 00:20:51,299 --> 00:20:56,913 I do think it is updating this, but I don't think it's actually updating the ui. 361 00:20:56,913 --> 00:20:59,195 I'm not sure why. 362 00:20:59,195 --> 00:21:02,636 So list index right here is defined but never used. 363 00:21:02,636 --> 00:21:08,132 I'm Not 364 00:21:08,132 --> 00:21:13,725 sure because all this code came from ChatGPT, so I'm not too sure exactly 365 00:21:13,725 --> 00:21:19,331 what's going on here, but I do know inside of our return, you know what? 366 00:21:19,331 --> 00:21:22,715 Let's just start from the beginning here. 367 00:21:22,715 --> 00:21:25,040 So inside of our return statement, 368 00:21:25,040 --> 00:21:28,462 we're returning a div with the class of task board. 369 00:21:28,462 --> 00:21:32,414 Let's actually go ahead and close off every little thing in here and 370 00:21:32,414 --> 00:21:34,715 go through it and see what's going on. 371 00:21:34,715 --> 00:21:36,750 So we're rendering task board. 372 00:21:36,750 --> 00:21:39,839 And then in here, we're mapping tasks, okay? 373 00:21:39,839 --> 00:21:44,552 Tasks is kind of referencing our state here, okay? 374 00:21:44,552 --> 00:21:49,284 And in order to update our state, we're gonna use this function called set tasks. 375 00:21:49,284 --> 00:21:53,995 So, we are going through our tasks right now, which we're actually 376 00:21:53,995 --> 00:21:58,720 looping over the lists, because there's three items in our state. 377 00:21:58,720 --> 00:22:02,000 So maybe tasks is not the best name for this, but 378 00:22:02,000 --> 00:22:04,638 I don't wanna change it everywhere. 379 00:22:04,638 --> 00:22:08,209 So good to know for future reference. 380 00:22:08,209 --> 00:22:09,064 ListIndex. 381 00:22:09,064 --> 00:22:15,044 So basically what this does is each time map iterates through our tasks, 382 00:22:15,044 --> 00:22:19,270 it's going to basically give a index of that task. 383 00:22:19,270 --> 00:22:23,156 So the first time it loops through this, 384 00:22:23,156 --> 00:22:27,970 this state, this is the first index of our array. 385 00:22:27,970 --> 00:22:29,480 So index zero. 386 00:22:29,480 --> 00:22:31,160 So list index equals 0. 387 00:22:31,160 --> 00:22:34,800 So, that's what this is right here, but I'm not sure why we're using it. 388 00:22:34,800 --> 00:22:37,100 Maybe that'll be evident once we look a little bit deeper into the code. 389 00:22:38,180 --> 00:22:45,588 So, inside of our map, so basically for each item inside of our tasks, 390 00:22:45,588 --> 00:22:51,030 we want to render a div with the class of task column. 391 00:22:53,030 --> 00:22:56,980 So, we'll basically have a task board and then three task columns. 392 00:22:56,980 --> 00:23:00,620 And this is basically because this is going to be our lists. 393 00:23:00,620 --> 00:23:05,137 So again, this should be list column, but that's on me for naming it task. 394 00:23:05,137 --> 00:23:07,036 Probably should have named it list. 395 00:23:07,036 --> 00:23:09,245 But when you're iterating to build to the ui, 396 00:23:09,245 --> 00:23:12,089 it is important to give everything some sort of unique key. 397 00:23:12,089 --> 00:23:13,780 So that's why we have this id here. 398 00:23:13,780 --> 00:23:16,810 So, first one is id 1 then 2, then 3. 399 00:23:16,810 --> 00:23:21,480 So each one of these will have a separate key attribute, which is necessary for 400 00:23:21,480 --> 00:23:21,990 react. 401 00:23:22,990 --> 00:23:27,620 So inside of each list we have an h3 with the list.title, 402 00:23:27,620 --> 00:23:30,747 which sorry, is yeah, list.title. 403 00:23:33,571 --> 00:23:35,641 Okay, cool. So we are actually naming it list, 404 00:23:35,641 --> 00:23:37,040 I'm stupid. 405 00:23:37,040 --> 00:23:41,140 So listtitle which is creating this not started in progress, and 406 00:23:41,140 --> 00:23:45,040 completed that we see over here, which is awesome. 407 00:23:45,040 --> 00:23:47,639 And then we're creating a ul, okay? 408 00:23:47,639 --> 00:23:51,500 And the ul should hold a bunch of li's for our tasks. 409 00:23:53,240 --> 00:23:58,562 I'm actually gonna add a hello world task instead of our first one and 410 00:23:58,562 --> 00:24:03,425 then hit refresh and we see hello world here but what I'm trying 411 00:24:03,425 --> 00:24:08,327 to do is get something to show up in the ui once we click Add Task. 412 00:24:08,327 --> 00:24:12,962 But yeah, it's basically looping over any items that we might 413 00:24:12,962 --> 00:24:16,821 have inside of that tasks array inside of our state. 414 00:24:16,821 --> 00:24:19,760 So because this one has one item, it does show up here. 415 00:24:21,140 --> 00:24:23,000 So that's working, it makes sense. 416 00:24:23,000 --> 00:24:24,570 And we're using taskIndex. 417 00:24:24,570 --> 00:24:29,058 So again, basically we're looping over list.tasks, okay? 418 00:24:29,058 --> 00:24:32,795 So this is a list. 419 00:24:32,795 --> 00:24:34,254 This is a list and this is a list. 420 00:24:34,254 --> 00:24:38,113 The reason I'm calling it list is because when we're iterating over it 421 00:24:38,113 --> 00:24:40,510 in our initial map, it's named list here. 422 00:24:40,510 --> 00:24:45,187 So, while we're looping over it list holds a reference to the first one, 423 00:24:45,187 --> 00:24:50,620 then the second one, then the third one as it iterates over, so list.tasks. 424 00:24:50,620 --> 00:24:53,654 So, we're going into our array of tasks here and 425 00:24:53,654 --> 00:24:56,830 basically mapping over each one of those. 426 00:24:56,830 --> 00:24:59,730 And we're calling that task, which is a perfect name. 427 00:24:59,730 --> 00:25:04,009 And each time it iterates over the currently iterated over 428 00:25:04,009 --> 00:25:08,650 element its index is put into this variable called taskIndex. 429 00:25:10,080 --> 00:25:12,070 Okay, so far, this all makes sense. 430 00:25:12,070 --> 00:25:13,828 And for each one of those tasks, 431 00:25:13,828 --> 00:25:17,460 we're trying to create a list item with a unique key. 432 00:25:17,460 --> 00:25:20,370 And the key is coming from the index, which is pretty smart. 433 00:25:20,370 --> 00:25:23,202 That way we don't have to have an id with a number in here, 434 00:25:23,202 --> 00:25:24,920 kind of like we're doing here. 435 00:25:24,920 --> 00:25:29,107 So we could essentially do the same thing in our initial iteration up here, but 436 00:25:29,107 --> 00:25:32,400 it's already handled for us, so let's not worry about it. 437 00:25:32,400 --> 00:25:33,680 We can actually remove this. 438 00:25:35,130 --> 00:25:40,470 So, inside of each li, we're just throwing in our task. 439 00:25:40,470 --> 00:25:42,290 So that works. 440 00:25:42,290 --> 00:25:43,767 That's awesome. 441 00:25:43,767 --> 00:25:49,958 Okay, so that explains exactly how this is rendering to the ui, which is great. 442 00:25:49,958 --> 00:25:54,680 So what we're trying to figure out now then is how to update Task. 443 00:25:56,100 --> 00:25:58,200 And I'm not liking that name, updateTask. 444 00:25:58,200 --> 00:26:00,230 Maybe we can do addTask. 445 00:26:00,230 --> 00:26:01,870 So, let's come up here. 446 00:26:01,870 --> 00:26:06,615 Let's just remove this entire thing and let's actually name it, addTask. 447 00:26:06,615 --> 00:26:08,862 So let's do co, cool. 448 00:26:08,862 --> 00:26:10,150 It already knows I wanna do it. 449 00:26:10,150 --> 00:26:14,540 So GitHub copilot is offering to create a function for me called addTask. 450 00:26:14,540 --> 00:26:18,670 And let's just go through it, see what it offers me. 451 00:26:20,120 --> 00:26:22,850 And if we need to come back and set something up, we will. 452 00:26:22,850 --> 00:26:26,310 But I think we will because it needs to know what we wanna add, right? 453 00:26:26,310 --> 00:26:30,420 So, yeah, it's essentially doing the same thing. 454 00:26:30,420 --> 00:26:34,216 So it's basically creating a new variable called newTasks and 455 00:26:34,216 --> 00:26:38,520 it's sending it to an array and we're spreading in our initial tasks. 456 00:26:46,460 --> 00:26:50,014 I'm not actually sure where this tasks is coming from. 457 00:26:50,014 --> 00:26:55,913 So newTasks [0].tasks.push new task. 458 00:26:55,913 --> 00:27:00,579 Okay, so it's actually hard coding a new task item in here. 459 00:27:00,579 --> 00:27:05,361 So if I hit this, cool, so it's literally just 460 00:27:05,361 --> 00:27:09,674 adding new tasks, but I don't want that. 461 00:27:09,674 --> 00:27:15,759 So, [LAUGH] what we need to do is, okay, this seems pretty easy, 462 00:27:15,759 --> 00:27:20,833 so we'll do let newTask Prompt equal prompt and hit, 463 00:27:20,833 --> 00:27:26,509 Github copilot offered me to Enter a new task as the prompt. 464 00:27:26,509 --> 00:27:30,933 And what we can do here is, instead of pushing a hardcoded string of new task, 465 00:27:30,933 --> 00:27:32,580 we could do newTaskPrompt. 466 00:27:33,580 --> 00:27:34,378 Let's save. 467 00:27:34,378 --> 00:27:35,623 Let's refresh the browser. 468 00:27:35,623 --> 00:27:37,650 I hit Add Task. 469 00:27:37,650 --> 00:27:40,630 Let's put clean the bathroom. 470 00:27:40,630 --> 00:27:41,900 Hit Enter and sweet. 471 00:27:41,900 --> 00:27:45,430 It actually adds it to the ui, which is pretty awesome. 472 00:27:45,430 --> 00:27:46,352 Now there is an issue. 473 00:27:46,352 --> 00:27:50,742 If I click Add Task here and add something, it adds it to the not started. 474 00:27:50,742 --> 00:27:55,872 But I think that's simply because we're only creating this button inside of, 475 00:27:55,872 --> 00:27:56,820 you know what? 476 00:27:58,530 --> 00:28:00,090 This button is on each one of these. 477 00:28:00,090 --> 00:28:04,250 So it needs to know which list to add it in. 478 00:28:05,520 --> 00:28:08,506 So this is interesting, how should we do this? 479 00:28:10,979 --> 00:28:12,604 Remember how we had listIndex here? 480 00:28:12,604 --> 00:28:14,800 Let's actually add that back. 481 00:28:14,800 --> 00:28:16,160 Maybe we can actually use that. 482 00:28:16,160 --> 00:28:19,690 So, hate to sound like a broken record, but let's go over this again. 483 00:28:19,690 --> 00:28:23,520 So map iterates over a collection of items, typically an array. 484 00:28:23,520 --> 00:28:27,958 So our tasks basically holds a reference to our state, so 485 00:28:27,958 --> 00:28:33,090 we have three items in our state, which is three objects. 486 00:28:33,090 --> 00:28:37,130 And as we're mapping over them, the first time we map over it, 487 00:28:37,130 --> 00:28:41,187 we're on that first object and it has a value in our index of 0. 488 00:28:41,187 --> 00:28:42,860 And then the second one has 2 and then 3. 489 00:28:42,860 --> 00:28:47,280 So each time through it listIndex has a different value. 490 00:28:47,280 --> 00:28:49,476 So let's see here. 491 00:28:51,565 --> 00:28:56,080 How can we figure this out. 492 00:28:56,080 --> 00:28:57,964 So we want to add task but 493 00:28:57,964 --> 00:29:03,724 we wanna add the task directly into the list that it's associated with. 494 00:29:08,796 --> 00:29:10,711 Maybe let's add listIndex in here. 495 00:29:14,908 --> 00:29:18,878 And let's delete all that and see if it offers me something new. 496 00:29:18,878 --> 00:29:26,321 Okay, so const newTasks equals your tasks, your task listLndex. 497 00:29:26,321 --> 00:29:27,965 Okay, this makes total sense now. 498 00:29:27,965 --> 00:29:31,006 So tasks, [LAUGH] obviously is each of these, 499 00:29:31,006 --> 00:29:35,380 so we're spreading our tasks into this NewTasks. 500 00:29:35,380 --> 00:29:39,250 Then we're taking our task with the listIndex, then pushing. 501 00:29:39,250 --> 00:29:40,090 Okay, so this is simple. 502 00:29:40,090 --> 00:29:47,002 So now we just need to let newTaskPrompt equal, we'll just add this back in. 503 00:29:47,002 --> 00:29:53,614 Then we're gonna add that value here to newTaskPrompt and then this should work. 504 00:29:53,614 --> 00:29:55,130 Theoretically, this should work. 505 00:29:55,130 --> 00:29:59,143 So we're gonna do clean the bathroom, 506 00:30:00,885 --> 00:30:03,750 And it actually didn't update it whatsoever. 507 00:30:05,920 --> 00:30:07,210 Did we get an error? 508 00:30:07,210 --> 00:30:08,010 Yeah, we did. 509 00:30:08,010 --> 00:30:08,510 So let's see. 510 00:30:10,875 --> 00:30:13,240 So on line 13, it cannot read tasks. 511 00:30:15,330 --> 00:30:22,370 Okay, okay, so newTasks, firstIndex, and then tasks. 512 00:30:24,260 --> 00:30:26,530 That should work, right? 513 00:30:26,530 --> 00:30:32,880 And then we're updating the state with the value of of that. 514 00:30:35,040 --> 00:30:37,560 So I'm not too sure why that's not working. 515 00:30:38,880 --> 00:30:40,940 We're not using the listIndex here. 516 00:30:44,558 --> 00:30:45,633 But we should, right? 517 00:30:45,633 --> 00:30:51,874 Can I do listIndex here? 518 00:30:57,075 --> 00:30:59,954 Uh-oh, I think that might have broke something. 519 00:31:03,769 --> 00:31:05,643 Did I create an infinite loop? 520 00:31:05,643 --> 00:31:12,850 Yeah, we're creating some sort of infinite loop here, which is not good. 521 00:31:24,119 --> 00:31:25,797 Let's ask ChatGPT. 522 00:31:25,797 --> 00:31:30,722 I'm just gonna copy the addTask as well as 523 00:31:30,722 --> 00:31:36,642 the return statement, and we're gonna go here. 524 00:31:36,642 --> 00:31:42,861 So I keep getting the prompt screen over and 525 00:31:42,861 --> 00:31:48,403 over and over, and I'm not sure why. 526 00:31:48,403 --> 00:31:52,535 Here is the return statement for 527 00:31:52,535 --> 00:31:57,586 my React component and the function for 528 00:31:57,586 --> 00:32:03,707 adding a new task, which is linked as an onClick 529 00:32:03,707 --> 00:32:08,619 function for the button in each list. 530 00:32:08,619 --> 00:32:13,190 And let's paste in the code, and let's see what happens. 531 00:32:13,190 --> 00:32:18,733 The issue you are facing is due to the way you're using the onClick handler for 532 00:32:18,733 --> 00:32:20,275 the addTask button. 533 00:32:20,275 --> 00:32:23,462 The onClick handler should receive a function reference, but 534 00:32:23,462 --> 00:32:26,780 in your code you are invoking the addTask function immediately. 535 00:32:26,780 --> 00:32:27,920 Okay, that makes sense. 536 00:32:27,920 --> 00:32:35,260 By using the parenthesis, you know what, I'm so stupid. 537 00:32:37,890 --> 00:32:41,024 This is causing the prompt to show repeatedly because addTask is being 538 00:32:41,024 --> 00:32:43,319 executed every render, which makes total sense. 539 00:32:45,500 --> 00:32:48,940 Okay, so I need to set this as a callback. 540 00:32:48,940 --> 00:32:50,280 That makes sense. 541 00:32:50,280 --> 00:32:54,170 I've never done this before, but I can understand that. 542 00:32:54,170 --> 00:32:58,640 So let's hit Save and reopen this, cool. 543 00:32:58,640 --> 00:33:03,576 So if I do clean the bathroom, cool, it adds it to not started. 544 00:33:03,576 --> 00:33:05,707 But let's say I completed cleaning the kitchen. 545 00:33:08,159 --> 00:33:10,480 Awesome, so it adds it to cleaning the kitchen. 546 00:33:10,480 --> 00:33:11,500 So that's perfect. 547 00:33:11,500 --> 00:33:16,026 This was a little tough, not gonna lie, It seems like I needed a little bit more 548 00:33:16,026 --> 00:33:19,329 ChatGPT than GitHub Copilot, but it works pretty well. 549 00:33:19,329 --> 00:33:22,805 So now I kinda wanna show you, I guess, the strengths and 550 00:33:22,805 --> 00:33:25,642 weaknesses that GitHub Copilot has with CSS. 551 00:33:25,642 --> 00:33:31,955 So as we saw earlier, we had this beautiful UI that I created, right? 552 00:33:31,955 --> 00:33:38,310 Let's just see what GitHub Copilot offers and we'll figure it out from there. 553 00:33:38,310 --> 00:33:46,790 Actually, I'm gonna make this full-screen. 554 00:33:46,790 --> 00:33:51,280 I'm going to create an app.css file. 555 00:33:51,280 --> 00:33:54,070 I'm gonna link that inside of our main file. 556 00:33:54,070 --> 00:33:57,135 So import, what did I call it? 557 00:33:57,135 --> 00:34:02,420 App.css, just to make sure it works. 558 00:34:02,420 --> 00:34:09,140 Do body, we'll do background-color: red, and awesome. 559 00:34:09,140 --> 00:34:12,120 So, we see that it works, which is great. 560 00:34:12,120 --> 00:34:18,603 So now let's actually see what GitHub Copilot offers us by offering to, 561 00:34:18,603 --> 00:34:23,800 well, we're gonna put in all of the NEAT app over here. 562 00:34:23,800 --> 00:34:26,507 Okay, so we're gonna put in all the class names that it generated for us, and 563 00:34:26,507 --> 00:34:29,110 we're gonna add class names where it didn't, if we need to. 564 00:34:29,110 --> 00:34:32,191 Then we're gonna throw them in here without any rules inside and 565 00:34:32,191 --> 00:34:35,669 just see what it offers us, based off of the class names that we give it and 566 00:34:35,669 --> 00:34:37,630 the context of the rest of the code base. 567 00:34:38,710 --> 00:34:41,950 So for sure, we're starting off everything with a task-board. 568 00:34:43,990 --> 00:34:49,489 Okay, so it wants to automatically offer task-board__ column, 569 00:34:49,489 --> 00:34:55,290 which has some Vim naming conventions, but we're not using that here. 570 00:34:55,290 --> 00:35:00,860 So Let's actually copy that and we'll just paste in that. 571 00:35:02,420 --> 00:35:09,269 And inside, we have an h3, so we'll do task-column h3. 572 00:35:09,269 --> 00:35:13,323 And then we have the task-column 573 00:35:13,323 --> 00:35:18,400 ul.then we have the task-column ul li. 574 00:35:18,400 --> 00:35:21,770 And then we just have a button. 575 00:35:21,770 --> 00:35:25,308 So I'm gonna do button with a class of addTask and 576 00:35:25,308 --> 00:35:28,600 I'm gonna go ahead and add that task in here. 577 00:35:28,600 --> 00:35:33,431 So className = addTask. 578 00:35:33,431 --> 00:35:38,374 Well, you know what, let's do this task list for 579 00:35:38,374 --> 00:35:44,037 the ul class just so it gives it a little bit more context. 580 00:35:44,037 --> 00:35:48,279 And we're gonna do the same for task item for the li. 581 00:35:48,279 --> 00:35:54,720 And this is just so it gives us some more accurate CSS hopefully. 582 00:35:54,720 --> 00:35:56,080 So I think that's everything we need, right? 583 00:35:56,080 --> 00:36:00,090 Okay, let's go ahead put all this back over here. 584 00:36:00,090 --> 00:36:06,220 Let's open up the app on the right and let's start seeing what it offers us. 585 00:36:06,220 --> 00:36:11,306 So inside of task-board, Let's see. 586 00:36:13,970 --> 00:36:17,450 Doesn't look like it wants to offer us anything inside the task board. 587 00:36:17,450 --> 00:36:22,344 So I'm gonna do a display of flex, and I want to do flex-direction: row, 588 00:36:22,344 --> 00:36:25,390 that's default, so I'm not gonna use that. 589 00:36:26,850 --> 00:36:28,260 Let's just hit that now. 590 00:36:28,260 --> 00:36:30,640 So it puts everything there. 591 00:36:30,640 --> 00:36:34,462 Let's also add some styles for 592 00:36:34,462 --> 00:36:39,026 the body and some browser prefixes. 593 00:36:44,338 --> 00:36:45,037 Okay, cool. 594 00:36:45,037 --> 00:36:50,060 I'm also gonna do list-style: none, so we can remove those lists styles. 595 00:36:50,060 --> 00:36:54,292 Okay, so for the body, I want to do a display of flex and 596 00:36:54,292 --> 00:36:57,150 we'll justify the content center. 597 00:36:57,150 --> 00:36:59,472 Cool, so that's basically how I want it.. 598 00:36:59,472 --> 00:37:04,339 The task-board, let's give it a gap of 1 rem, 599 00:37:04,339 --> 00:37:07,980 space these out just a little bit. 600 00:37:07,980 --> 00:37:11,450 Let's just go ahead into the task column, see what it offers us. 601 00:37:11,450 --> 00:37:15,087 So let's hit tab, hit save. 602 00:37:15,087 --> 00:37:20,101 Made it a little wide, so I'm not liking the fixed width 603 00:37:20,101 --> 00:37:24,687 of 300%, so let's do a width of 100%, but 604 00:37:24,687 --> 00:37:30,362 a max-width of 300 pixels, and delete the initial width. 605 00:37:30,362 --> 00:37:31,523 Let's also give it a min-width. 606 00:37:31,523 --> 00:37:36,188 We'll do a min-width of 25%, or 607 00:37:36,188 --> 00:37:39,652 no, I'm sorry, 33%. 608 00:37:42,581 --> 00:37:46,387 That's fine I'm not trying to make this really really pretty. 609 00:37:46,387 --> 00:37:50,850 So inside of the H3, let's see what it offers us. 610 00:37:50,850 --> 00:37:54,540 Wow, it just gives us a margin bottom, so not a whole lot there. 611 00:37:54,540 --> 00:37:59,504 So the ul, it offers us a minimum height of 100 pixels, background color of white, 612 00:37:59,504 --> 00:38:01,550 border radius, and some padding. 613 00:38:04,070 --> 00:38:05,190 That's great. 614 00:38:05,190 --> 00:38:06,383 That looks awesome. 615 00:38:06,383 --> 00:38:11,094 [LAUGH] Okay, so each list item gets some margin at the bottom, some padding, 616 00:38:11,094 --> 00:38:16,540 some background color, border radius, box shadow, and a cursor of move. 617 00:38:16,540 --> 00:38:21,250 So it's giving us this move cursor, which makes us think we can move it. 618 00:38:21,250 --> 00:38:23,560 And I don't like that, since we can't, so I'm gonna delete that. 619 00:38:24,950 --> 00:38:27,218 Not really liking the spacing here, 620 00:38:27,218 --> 00:38:30,521 I'm also not really liking the width of everything. 621 00:38:30,521 --> 00:38:32,630 Let's remove this min-width. 622 00:38:32,630 --> 00:38:34,160 Let's remove the max-width as well. 623 00:38:35,660 --> 00:38:38,949 And this is for the task columns. 624 00:38:38,949 --> 00:38:43,727 So, task-board, let's do a width of 100%. 625 00:38:43,727 --> 00:38:45,310 I don't think that's really gonna do anything. 626 00:38:45,310 --> 00:38:48,740 Yeah, you know what, let's just leave it as is. 627 00:38:48,740 --> 00:38:52,990 And then the addTask button is probably gonna be pretty basic, if anything. 628 00:38:52,990 --> 00:38:57,064 So display a block, 100% width, some padding, background color, radius, border, 629 00:38:57,064 --> 00:38:58,281 and then a cursor pointer. 630 00:39:01,659 --> 00:39:07,230 It's not doing anything, so need to save that addTask. 631 00:39:07,230 --> 00:39:10,010 Okay, cool. So this basically works. 632 00:39:10,010 --> 00:39:10,550 This is our app. 633 00:39:10,550 --> 00:39:13,630 You know what, it's really bothering me that it's so skinny, so 634 00:39:13,630 --> 00:39:15,060 let's fix that really quick. 635 00:39:16,670 --> 00:39:19,878 But yeah, GitHub Copilot can pretty much help you out with basic CSS, but 636 00:39:19,878 --> 00:39:22,950 if you have a general idea of what you want, it'll be a little easier. 637 00:39:22,950 --> 00:39:27,330 And the bigger your code base grows, the more context GitHub Copilot will have and 638 00:39:27,330 --> 00:39:29,910 it'll offer better code completions. 639 00:39:29,910 --> 00:39:35,360 That goes for CSS, that goes for the actual React code itself. 640 00:39:35,360 --> 00:39:39,081 I mean, if you have a specific style of button that you continuously use, 641 00:39:39,081 --> 00:39:41,482 especially with certain types of class names, 642 00:39:41,482 --> 00:39:45,890 it'll automatically know to add those styles to your UI as you're working. 643 00:39:45,890 --> 00:39:51,800 So for this task board, we'll give it a width. 644 00:39:51,800 --> 00:39:52,969 It's offering me some more code. 645 00:39:55,500 --> 00:39:56,590 Okay, cool. 646 00:39:56,590 --> 00:39:58,510 Let's just see what it offers me. 647 00:39:58,510 --> 00:39:59,740 Okay, so that's it. 648 00:39:59,740 --> 00:40:01,240 And it really didn't do a whole lot. 649 00:40:01,240 --> 00:40:06,438 So, let's see here, we're gonna do a min-width for 650 00:40:06,438 --> 00:40:12,942 the columns of 33% Width 100%, we'll just remove that. 651 00:40:12,942 --> 00:40:18,685 So, actually the ULs, let's give that a minimum 652 00:40:18,685 --> 00:40:24,198 width of Let's do 33% here, even though it's not gonna do anything. 653 00:40:24,198 --> 00:40:26,623 Let's do a min-width of 300 pixels just for 654 00:40:26,623 --> 00:40:29,482 the sake of trying to make this look a little bit better. 655 00:40:29,482 --> 00:40:31,410 Also, I think I'm zoomed in. 656 00:40:31,410 --> 00:40:32,800 Yeah, I was zoomed in a little bit. 657 00:40:32,800 --> 00:40:35,550 So this kind of looks pretty similar to what we had. 658 00:40:35,550 --> 00:40:40,613 It's not too far off, and if we add a task, 659 00:40:40,613 --> 00:40:45,550 this is a new task in the not started list. 660 00:40:46,720 --> 00:40:47,950 Cool, and it adds it there. 661 00:40:47,950 --> 00:40:50,540 It has a little bit of spacing between the other one. 662 00:40:50,540 --> 00:40:54,221 Write some more stuff, write some stuff here, here. 663 00:40:58,130 --> 00:41:01,031 Cool, so it looks like all three of these, basically, 664 00:41:01,031 --> 00:41:05,370 are styled with the same height based on whichever list has the most content in it. 665 00:41:05,370 --> 00:41:08,500 Which is an easy fix, but something we'll do for another video. 666 00:41:08,500 --> 00:41:11,163 Or if you wanna give this a try, kinda get to this point and 667 00:41:11,163 --> 00:41:13,450 then maybe add the drag and drop functionality. 668 00:41:13,450 --> 00:41:16,950 It's pretty simple and GitHub Copilot can definitely help you with that. 669 00:41:16,950 --> 00:41:18,000 I hope you enjoy this video. 670 00:41:18,000 --> 00:41:21,250 I hope you got to see what GitHub Copilot can do and what it can't do. 671 00:41:21,250 --> 00:41:25,432 And you have a little bit better understanding of GitHub Copilot, ChatGPT, 672 00:41:25,432 --> 00:41:29,438 and just using AI as a co-developer in whatever you're trying to build. 673 00:41:29,438 --> 00:41:31,982 So hope you enjoyed the video, see in the next one. 674 00:41:31,982 --> 00:41:33,130 Have fun, happy coding.