1 00:00:00,000 --> 00:00:09,386 [MUSIC] 2 00:00:09,386 --> 00:00:10,153 Hey, what's up? 3 00:00:10,153 --> 00:00:13,013 My name's Dustin and I'm a developer here at Treehouse. 4 00:00:13,013 --> 00:00:16,348 Today, I wanna use GitHub Copilot to help me build out something that I'm pretty 5 00:00:16,348 --> 00:00:17,980 confident I can build. 6 00:00:17,980 --> 00:00:21,090 So, the first thing we'll do, is we're gonna hop into a program called Figma, 7 00:00:21,090 --> 00:00:24,370 which is a place where I can kind of draw up some wireframes and mockups. 8 00:00:24,370 --> 00:00:27,958 And I'm gonna try to build out some sort of UI where there's a user base, but 9 00:00:27,958 --> 00:00:30,948 there's so many users that we're gonna wanna paginate them. 10 00:00:30,948 --> 00:00:35,543 Meaning, we're gonna wanna have buttons at the very bottom of the screen 11 00:00:35,543 --> 00:00:38,814 where I can click page 1, page 2 and 3, and so on. 12 00:00:38,814 --> 00:00:42,985 Once I have the basic UI down, we're going to hop straight into our text editor and 13 00:00:42,985 --> 00:00:45,640 I'm going to try to code this out. 14 00:00:45,640 --> 00:00:49,419 Probably as much as I can, but just see where GitHub Copilot offers assistance and 15 00:00:49,419 --> 00:00:52,680 how quickly I feel like it can help me build this project out. 16 00:00:52,680 --> 00:00:55,740 I wouldn't follow along with me just simply because GitHub Copilot might offer 17 00:00:55,740 --> 00:00:57,960 you different code and different code examples. 18 00:00:57,960 --> 00:01:00,578 So maybe just sit back, relax, watch as I work, and 19 00:01:00,578 --> 00:01:02,851 maybe give this a try when you're finished. 20 00:01:02,851 --> 00:01:07,342 But to speed things up, I'll probably fast forward through a lot of the wire framing 21 00:01:07,342 --> 00:01:11,029 as well as maybe even adding in some of that data into the JavaScript. 22 00:01:11,029 --> 00:01:14,174 That way you can just kind of see how I work with GitHub Copilot. 23 00:01:14,174 --> 00:01:16,467 But if you wanna follow along, let's get started. 24 00:01:16,467 --> 00:01:26,467 [MUSIC] 25 00:01:46,573 --> 00:01:50,865 Okay, so my wireframing and prototyping is pretty much finished. 26 00:01:50,865 --> 00:01:54,140 I'm not really a designer, so this isn't the best thing ever, but 27 00:01:54,140 --> 00:01:58,300 this is just to give me somewhat of an idea of what we're gonna build. 28 00:01:58,300 --> 00:02:00,330 So let's go over it real fast. 29 00:02:00,330 --> 00:02:04,347 So we basically just have this little header section here that has a title and 30 00:02:04,347 --> 00:02:04,926 a button. 31 00:02:04,926 --> 00:02:08,039 And the idea is that we're gonna click on a button, and 32 00:02:08,039 --> 00:02:10,689 it's just gonna add a new friend to this list. 33 00:02:10,689 --> 00:02:14,658 And I was gonna build out some sort of database with all this info, 34 00:02:14,658 --> 00:02:18,644 but then I decided, why not show you guys how to connect to an API. 35 00:02:18,644 --> 00:02:22,661 We're gonna use the random user API, it's extremely easy to use, so 36 00:02:22,661 --> 00:02:24,919 I'll show you exactly how to use that. 37 00:02:24,919 --> 00:02:28,322 But yeah we'll click this plus button, it'll generate a new user and 38 00:02:28,322 --> 00:02:29,253 add it to the list. 39 00:02:29,253 --> 00:02:35,349 And after so many people are in the list, we want to start paginating the list. 40 00:02:35,349 --> 00:02:37,617 Meaning, we want to only show, 41 00:02:37,617 --> 00:02:42,747 let's say we do what we have in the UI which is just five users or friends. 42 00:02:42,747 --> 00:02:47,056 And once we hit that limit all the rest of them are gonna show on another page. 43 00:02:47,056 --> 00:02:51,619 And we'll be able to click these buttons down here to navigate to those pages and 44 00:02:51,619 --> 00:02:55,174 the should all work pretty seamlessly when we're finished. 45 00:02:55,174 --> 00:02:57,433 This seems like quite an easy build, so 46 00:02:57,433 --> 00:03:01,479 I'm assuming GitHub Copilot should be able to do this pretty easily. 47 00:03:01,479 --> 00:03:05,754 So let's hop into the code and get started. 48 00:03:05,754 --> 00:03:10,461 I'm going to just open up VS Code, and we're gonna open up a brand new project. 49 00:03:10,461 --> 00:03:14,473 So I'm gonna go to my desktop, and I'm gonna click on New Folder, and 50 00:03:14,473 --> 00:03:16,525 I'll just title this Friends App. 51 00:03:16,525 --> 00:03:19,105 And I'll hit Create, and we'll open it up. 52 00:03:19,105 --> 00:03:25,019 And we'll just get this started with an index.html file, 53 00:03:25,019 --> 00:03:29,050 a styles.css file and an app.js file. 54 00:03:29,050 --> 00:03:35,497 And we'll quickly come in the HTML file and type in some boilerplate code here. 55 00:03:35,497 --> 00:03:42,818 I'll link up our CSS style sheet as well as our JavaScript file. 56 00:03:42,818 --> 00:03:46,483 And I'll change the title to Friends App. 57 00:03:46,483 --> 00:03:50,772 So let's open this up in the browser and make sure everything's working 58 00:03:52,752 --> 00:03:56,479 And we don't see anything, so obviously, 59 00:03:56,479 --> 00:04:01,226 let's create an h1 with our favorites, Hello World. 60 00:04:01,226 --> 00:04:02,830 And awesome, we see that here. 61 00:04:02,830 --> 00:04:05,518 So we know everything's working. 62 00:04:05,518 --> 00:04:09,445 I am going to actually probably speed through the HTML and CSS, 63 00:04:09,445 --> 00:04:13,520 because the meat and potatoes of this project is really just using 64 00:04:13,520 --> 00:04:18,240 GitHub Copilot to help us with the pagination and the JavaScript logic. 65 00:04:18,240 --> 00:04:20,210 So, I'm gonna work on that later, and 66 00:04:20,210 --> 00:04:23,920 right now I'm just gonna speed through the HTML and CSS. 67 00:04:23,920 --> 00:04:29,280 But before I do that, I do wanna go over the random user API that we're gonna use. 68 00:04:29,280 --> 00:04:32,810 So, this is a super simple API to use. 69 00:04:32,810 --> 00:04:36,294 Just go to randomuser.me. 70 00:04:36,294 --> 00:04:39,476 And this is the Random User API. 71 00:04:39,476 --> 00:04:44,312 You'll just wanna scroll down to this very first code block and 72 00:04:44,312 --> 00:04:47,336 grab this first link that's in green. 73 00:04:47,336 --> 00:04:49,065 This is the link to the API. 74 00:04:49,065 --> 00:04:53,060 I wouldn't copy this entire syntax here just because it's a little outdated. 75 00:04:53,060 --> 00:04:55,240 I'll show you a much easier way to use this. 76 00:04:55,240 --> 00:05:01,030 So, back in the JavaScript file, I'm gonna just type in fetch as a method. 77 00:05:01,030 --> 00:05:05,010 And I'm going to provide some quotes and paste in that URL. 78 00:05:06,090 --> 00:05:10,412 And because this is promise-based, we can chain on a .then. 79 00:05:10,412 --> 00:05:14,810 And as you can see, GitHub Copilot already knows I wanna take our response and 80 00:05:14,810 --> 00:05:19,478 format it in JSON, but I'll write that myself cuz I rather use res than response, 81 00:05:19,478 --> 00:05:21,460 it's just personal preference. 82 00:05:21,460 --> 00:05:26,110 And then we want to take our data that we're getting back from that. 83 00:05:26,110 --> 00:05:29,514 For now, let's just console.log the data so 84 00:05:29,514 --> 00:05:33,390 I can show you what this API returns us. 85 00:05:33,390 --> 00:05:36,733 So if we go back to our project and hit Refresh and 86 00:05:36,733 --> 00:05:41,070 then click Inspect, we'll go over to the console. 87 00:05:41,070 --> 00:05:42,880 And you'll see that there's an object in here now. 88 00:05:42,880 --> 00:05:47,160 And if we click on it, you'll see that we get this results array back. 89 00:05:47,160 --> 00:05:50,450 And inside of this, we have one object. 90 00:05:50,450 --> 00:05:53,498 And this is our random user that we're getting back from the API. 91 00:05:53,498 --> 00:05:57,597 And if you click on it, you get all this information from this random user, 92 00:05:57,597 --> 00:06:01,372 we get a cell phone number, we get a date of birth, email, a gender, 93 00:06:01,372 --> 00:06:05,510 id, location, login name, picture, all that awesome stuff. 94 00:06:05,510 --> 00:06:10,087 We're not gonna use all of it though, I think in the UI, I am just using 95 00:06:10,087 --> 00:06:14,950 the firstName, the lastName, a username, as well as an email address. 96 00:06:14,950 --> 00:06:19,351 And this little dot here is gonna be the image for the person. 97 00:06:19,351 --> 00:06:23,952 So, we're gonna be using one, two, three, four, 98 00:06:23,952 --> 00:06:29,190 five bits of data from this, so let's go back to the editor. 99 00:06:30,600 --> 00:06:33,456 And each time that we click on this Add button, 100 00:06:33,456 --> 00:06:36,200 we're just gonna generate one user. 101 00:06:36,200 --> 00:06:38,187 But just to give you a cool tip, 102 00:06:38,187 --> 00:06:43,370 if you wanted to get back more users from this API, it's super simple. 103 00:06:43,370 --> 00:06:45,890 So you see this URL here, right? 104 00:06:45,890 --> 00:06:49,155 All we need to do is, add a question mark, results, 105 00:06:49,155 --> 00:06:53,849 and get copilot already knows which is awesome, equals, we'll do 10. 106 00:06:53,849 --> 00:06:57,400 And if you hit Save, check out the console and 107 00:06:57,400 --> 00:07:01,434 now our results array actually has ten items in it. 108 00:07:01,434 --> 00:07:07,070 So ten different users with different amounts of data, which is super awesome. 109 00:07:07,070 --> 00:07:09,731 But that's just a little tip, we're gonna remove that, 110 00:07:09,731 --> 00:07:12,530 we're only gonna need to return one for now. 111 00:07:12,530 --> 00:07:16,062 So yeah, I just wanted to give you that little bit of a tip and 112 00:07:16,062 --> 00:07:19,110 kind of show you the API that we're gonna be using. 113 00:07:19,110 --> 00:07:21,479 So now I'm gonna speed through the HTML and CSS and 114 00:07:21,479 --> 00:07:24,710 I will come back when it's time for the JavaScript, the fun stuff. 115 00:07:24,710 --> 00:07:26,630 So let's get started with that. 116 00:07:26,630 --> 00:07:36,630 [MUSIC] 117 00:07:53,429 --> 00:07:56,630 Okay, so, I just wanted to show you what we've got so far. 118 00:07:56,630 --> 00:08:01,069 I didn't do any styles, all I did was some HTML. 119 00:08:01,069 --> 00:08:05,117 I just wanna go over this real fast since we are gonna be using some of these HTML 120 00:08:05,117 --> 00:08:06,680 in the JavaScript. 121 00:08:06,680 --> 00:08:10,339 So basically, all I have in my HTML file is a container and 122 00:08:10,339 --> 00:08:13,324 inside of the container, holds everything. 123 00:08:13,324 --> 00:08:17,232 We have this header section that has a h1 that says Friends App, and 124 00:08:17,232 --> 00:08:19,810 then a button that says addFriend. 125 00:08:19,810 --> 00:08:24,401 So if you look at the markups that I made, 126 00:08:24,401 --> 00:08:30,180 that is basically this section right here. 127 00:08:30,180 --> 00:08:33,910 And then we're gonna have a userList which is gonna be an unordered list. 128 00:08:33,910 --> 00:08:38,209 And then each one of these users will be an li inside of the unordered list. 129 00:08:39,230 --> 00:08:40,110 And that is right here. 130 00:08:40,110 --> 00:08:44,300 So we have our ul with a class of friends-list and id of friendsList. 131 00:08:44,300 --> 00:08:46,953 And I just have one user in here right now. 132 00:08:46,953 --> 00:08:50,212 [MUSIC] 133 00:08:50,212 --> 00:08:53,956 We have the image, the firstName, the lastName, the username and 134 00:08:53,956 --> 00:08:55,080 the example email. 135 00:08:55,080 --> 00:08:59,961 Which if you look at the wireframe that's exactly what each one of 136 00:08:59,961 --> 00:09:02,012 these list items has in it. 137 00:09:02,012 --> 00:09:07,068 And outside of our friends-list ul we just have a pagination container that 138 00:09:07,068 --> 00:09:11,887 has three buttons, and they each have their respective number inside, 139 00:09:11,887 --> 00:09:16,080 and one of them, which is the first one, has a class of active. 140 00:09:16,080 --> 00:09:21,310 That way we can show the user that, hey, we are on page 1. 141 00:09:22,760 --> 00:09:26,477 But these buttons will be rendered dynamically based on the amount of users 142 00:09:26,477 --> 00:09:28,190 or friends that we have in our app. 143 00:09:28,190 --> 00:09:32,884 So, yeah, we didn't do any styles yet, we just have the basic structure down. 144 00:09:32,884 --> 00:09:36,148 And I just kinda wanted to go over that so that you understand a little bit of 145 00:09:36,148 --> 00:09:39,904 the HTML and the relationship between that and the JavaScript a little bit later on. 146 00:09:39,904 --> 00:09:41,913 So I'm gonna get back into the CSS now. 147 00:09:41,913 --> 00:09:45,106 So, I'll come back when it's time for the JavaScript. 148 00:09:45,106 --> 00:09:49,060 [MUSIC] 149 00:09:49,060 --> 00:09:59,060 [MUSIC] 150 00:10:24,898 --> 00:10:29,922 Okay, so we basically have all of the HTML and the CSS finished. 151 00:10:29,922 --> 00:10:33,777 And if you'd like to follow along and get this exact same UI as me with all 152 00:10:33,777 --> 00:10:38,083 the code, you could either slow me down and replay that last bit, or I will leave 153 00:10:38,083 --> 00:10:42,692 a link down below for a GitHub repo that's gonna have all the finished code in there. 154 00:10:42,692 --> 00:10:43,985 So whichever you'd like to do. 155 00:10:43,985 --> 00:10:48,332 I recommend just using the GitHub code, it'll be a little bit easier, and 156 00:10:48,332 --> 00:10:52,679 I feel it's a better idea for you to just kind of sit back and kind of watch and 157 00:10:52,679 --> 00:10:54,980 follow along that way to this content. 158 00:10:54,980 --> 00:10:58,015 So, yeah, we basically have our UI now. 159 00:10:58,015 --> 00:11:03,930 I'm pretty confident it looks as close to the wireframes as I would like for it to. 160 00:11:03,930 --> 00:11:07,710 So let's open that up, look at them side by side, 161 00:11:07,710 --> 00:11:11,043 make this a little bit smaller so we can see. 162 00:11:11,043 --> 00:11:15,790 So we have basically our header with our button, just like we do here. 163 00:11:15,790 --> 00:11:20,326 We also have our list items which has a first name, a last name and 164 00:11:20,326 --> 00:11:25,282 a username, our user's image, and then our user's email address. 165 00:11:25,282 --> 00:11:28,396 Now, all of these are hardcoded, we didn't write any JavaScript yet, so 166 00:11:28,396 --> 00:11:30,180 we're gonna do that next. 167 00:11:30,180 --> 00:11:30,763 And yeah, so 168 00:11:30,763 --> 00:11:34,374 I think this is a really great starting point to get started with the JavaScript. 169 00:11:34,374 --> 00:11:36,970 So let's hop into the JavaScript. 170 00:11:36,970 --> 00:11:43,448 First things first, let's just, okay, so we do have our fetch call still in here. 171 00:11:43,448 --> 00:11:47,620 And if you remember, this actually fetches us a random user. 172 00:11:47,620 --> 00:11:50,094 So what I wanna do is add an event listener for this button, 173 00:11:50,094 --> 00:11:51,466 we're gonna start off simple. 174 00:11:51,466 --> 00:11:55,169 We're gonna add an event listener to this button, and 175 00:11:55,169 --> 00:12:00,280 when it is clicked, we're going to log a random user to the console. 176 00:12:00,280 --> 00:12:01,497 So let's start there. 177 00:12:01,497 --> 00:12:05,549 I'm going to cut that bit of code, and I'm gonna create some variables. 178 00:12:05,549 --> 00:12:12,741 So const addNewFriendBtn = document.querysSelector, 179 00:12:12,741 --> 00:12:16,850 and let's grab the button. 180 00:12:16,850 --> 00:12:22,162 So if we go into the HTML, we see that it has an id of addFriendBtn. 181 00:12:22,162 --> 00:12:23,830 So I'm gonna pop that in there. 182 00:12:23,830 --> 00:12:26,261 And let's do addNewFriend. 183 00:12:26,261 --> 00:12:30,516 Okay, so GitHub Copilot already knows I want to add an event listener for 184 00:12:30,516 --> 00:12:33,394 clicks on this button, so we're gonna do that. 185 00:12:33,394 --> 00:12:35,394 And I'm going to paste in. 186 00:12:35,394 --> 00:12:40,761 So I copied our id over, so we don't have the fetch code anymore, 187 00:12:40,761 --> 00:12:43,898 so let's just write it from scratch. 188 00:12:43,898 --> 00:12:49,859 We'll do fetch, and we'll do random, I forget what that actually was. 189 00:12:49,859 --> 00:12:54,121 Let's undo some of these changes, get back to our original code. 190 00:12:54,121 --> 00:12:57,975 We'll copy that [LAUGH] and we'll just go all the way back, so, sweet. 191 00:12:57,975 --> 00:13:02,885 Now, I'll just paste in that bit of code and 192 00:13:02,885 --> 00:13:07,930 I'm going to close off our button function, 193 00:13:07,930 --> 00:13:11,008 I mean our event listener. 194 00:13:11,008 --> 00:13:14,034 So now let's go and see if this actually works. 195 00:13:14,034 --> 00:13:18,249 Let's go to our app, let's go to the console, and 196 00:13:18,249 --> 00:13:23,652 if I hit addNewFriend button, we get a new user into the console. 197 00:13:23,652 --> 00:13:29,071 So let's start off simple, let's break this up into chunks. 198 00:13:29,071 --> 00:13:34,254 So we do know that whenever we click this button, we want a new user 199 00:13:34,254 --> 00:13:40,499 to be added to the user's list, right, which we are calling friends-list. 200 00:13:40,499 --> 00:13:46,211 So let's grab this friendsList and create a variable for it. 201 00:13:46,211 --> 00:13:48,338 I'll write const friends, 202 00:13:48,338 --> 00:13:52,693 [LAUGH] it already knows I wanna do this, which is awesome. 203 00:13:52,693 --> 00:13:54,091 So I'll just hit Tab, 204 00:13:54,091 --> 00:13:59,520 it wrote const friendList = document.querySelector( "friendList"). 205 00:13:59,520 --> 00:14:03,529 The only issue with that is we're calling it friends, plural, 206 00:14:03,529 --> 00:14:06,920 not singular, so let's add an s in there, awesome. 207 00:14:06,920 --> 00:14:09,836 So now we have a reference to our UL. 208 00:14:09,836 --> 00:14:14,718 And basically, what we wanna do is add a new list item to 209 00:14:14,718 --> 00:14:17,913 the UL with all this user data in it. 210 00:14:17,913 --> 00:14:21,809 And we want that HTML to mimic the list item here. 211 00:14:21,809 --> 00:14:25,572 So I'm gonna go over here and I'm gonna copy this list item. 212 00:14:25,572 --> 00:14:30,012 And for now, let's do a variable called html, and 213 00:14:30,012 --> 00:14:34,149 we're just gonna paste that right on in there. 214 00:14:34,149 --> 00:14:38,441 I'm gonna use backticks since we're having a bit of a syntax 215 00:14:38,441 --> 00:14:41,313 error with some of the quotation marks. 216 00:14:41,313 --> 00:14:45,995 So, right now, this doesn't do anything, let's actually put it up here. 217 00:14:45,995 --> 00:14:50,130 And instead of console.logging this data, 218 00:14:50,130 --> 00:14:54,373 let's run a function called createUser, and 219 00:14:54,373 --> 00:14:58,633 we're gonna pass that data in as an argument. 220 00:14:58,633 --> 00:15:05,266 So what we'll do is, actually, we know that data returns a results array. 221 00:15:05,266 --> 00:15:10,122 So let's actually do data.results, I think that'll work. 222 00:15:10,122 --> 00:15:15,724 And what we can do is we can create this function now, so we'll write function. 223 00:15:15,724 --> 00:15:20,542 Okay, so GitHub Copilot already knows that we wanna do this. 224 00:15:20,542 --> 00:15:24,717 I'm gonna hit Tab, and looks like it gave me some unfinished code. 225 00:15:24,717 --> 00:15:27,731 Let's try that again, see if that actually, 226 00:15:27,731 --> 00:15:31,301 no, it's giving me unfinished code for some reason. 227 00:15:31,301 --> 00:15:36,445 And I'm not really too sure what any of this is, so [LAUGH] let's not use it. 228 00:15:36,445 --> 00:15:40,151 So we do know that we only get back one item, so 229 00:15:40,151 --> 00:15:45,041 GitHub Copilot wants me to use that data at the first index. 230 00:15:45,041 --> 00:15:48,605 We're not gonna do that, we're gonna write our own logic in here. 231 00:15:48,605 --> 00:15:53,176 So we do know that data.results is basically data. 232 00:15:53,176 --> 00:15:58,356 So what we can do in here is let's console.log(data) and 233 00:15:58,356 --> 00:16:04,375 see if we're getting back just our result when we click this button. 234 00:16:04,375 --> 00:16:10,024 And we are, we get back our one result with our one random person, 235 00:16:10,024 --> 00:16:14,145 which is perfect, it's exactly what we want. 236 00:16:14,145 --> 00:16:19,113 So let's actually do friendsList.append.html. 237 00:16:19,113 --> 00:16:25,644 So let's try that, we'll do friendsList.appendChild(html), 238 00:16:25,644 --> 00:16:28,417 and let's see what happens. 239 00:16:28,417 --> 00:16:30,036 Let's close down the console. 240 00:16:30,036 --> 00:16:34,205 And nothing happens, [LAUGH] so let's see what happened. 241 00:16:34,205 --> 00:16:36,286 Looks like we have some errors. 242 00:16:36,286 --> 00:16:38,655 Failed to execute 'appendChild' on 'Node'. 243 00:16:38,655 --> 00:16:40,895 Parameter 1 is not type of 'Node'. 244 00:16:40,895 --> 00:16:41,919 Okay, 245 00:16:41,919 --> 00:16:48,016 [MUSIC] 246 00:16:48,016 --> 00:16:51,820 Okay, so this is just technically a string. 247 00:16:51,820 --> 00:16:57,610 So first, let's do friendsList.innerHTML = html, 248 00:16:57,610 --> 00:17:01,313 that's what we should do instead. 249 00:17:01,313 --> 00:17:04,596 And if we hit +, we get a new list item, and 250 00:17:04,596 --> 00:17:10,072 this is still our basic static information, because if you remember, 251 00:17:10,072 --> 00:17:14,080 I just copy and pasted that markup into here. 252 00:17:14,080 --> 00:17:16,260 But I will show you how to make this dynamic. 253 00:17:17,790 --> 00:17:23,312 What we'll do is we are going to, since we are using backticks here, 254 00:17:23,312 --> 00:17:28,267 actually you know what, let's completely just copy that and 255 00:17:28,267 --> 00:17:31,144 remove this variable altogether. 256 00:17:31,144 --> 00:17:35,119 And what we'll do is we'll write innerHTML +=, 257 00:17:35,119 --> 00:17:36,047 [MUSIC] 258 00:17:36,047 --> 00:17:39,915 And we are going to actually just paste in our markup. 259 00:17:39,915 --> 00:17:45,052 And let's fix the indentation just a little bit so 260 00:17:45,052 --> 00:17:50,443 it's a little easier to kinda see what's going on. 261 00:17:50,443 --> 00:17:55,428 Okay, so basically, what's going on is when we click our Add button, 262 00:17:55,428 --> 00:17:59,513 we are calling this API and we're getting some data back. 263 00:17:59,513 --> 00:18:02,681 And with that data, we are running this function createUser, and 264 00:18:02,681 --> 00:18:03,763 this is the function. 265 00:18:03,763 --> 00:18:08,778 The function basically adds some innerHTML to our friendsList. 266 00:18:08,778 --> 00:18:13,484 But we did write +=, so if we hit Save and now I hit +, it's just gonna add it down 267 00:18:13,484 --> 00:18:18,860 here at the bottom, and it's gonna keep on adding it, and adding it, and adding it. 268 00:18:18,860 --> 00:18:22,446 So what we should do now that we kinda have our HTML 269 00:18:22,446 --> 00:18:27,010 is let's remove all these hard-coded list items, okay? 270 00:18:27,010 --> 00:18:31,200 And what I like to do is just write a comment that says something like dynamic 271 00:18:31,200 --> 00:18:33,110 in the HTML so that we know. 272 00:18:33,110 --> 00:18:36,000 So now, our page looks pretty empty. 273 00:18:36,000 --> 00:18:39,888 But if we hit +, we see a new list item pop up each time. 274 00:18:39,888 --> 00:18:42,130 But we wannna get random data, right? 275 00:18:42,130 --> 00:18:43,519 So this is really easy to do. 276 00:18:43,519 --> 00:18:47,255 Since we're using backticks here, we can interpolate some values. 277 00:18:47,255 --> 00:18:53,340 So we have this data argument in our function that we can use. 278 00:18:53,340 --> 00:19:00,143 And if you remember, data is basically a representation of data.results, 279 00:19:00,143 --> 00:19:05,270 and data.results is basically our random user. 280 00:19:05,270 --> 00:19:10,517 So inside of the image source, what we can do is Backspace, and 281 00:19:10,517 --> 00:19:15,863 we will type in a, oops, a dollar sign and a set of curly braces, 282 00:19:15,863 --> 00:19:20,190 and this will allow us to interpolate a value. 283 00:19:20,190 --> 00:19:24,742 So we can do data.picture, and I think the property was large, 284 00:19:24,742 --> 00:19:28,462 medium, and thumbnail, so let's just do medium. 285 00:19:28,462 --> 00:19:32,791 Let's hit Save and just see if that worked. 286 00:19:32,791 --> 00:19:37,150 It did not, so cannot read properties of undefined (reading 'medium'). 287 00:19:37,150 --> 00:19:43,285 So I don't like that, so let's actually console.log(data) and 288 00:19:43,285 --> 00:19:46,045 see exactly what's going on. 289 00:19:46,045 --> 00:19:48,003 And let's also just remove this so we don't get an error. 290 00:19:48,003 --> 00:19:49,980 [MUSIC] 291 00:19:49,980 --> 00:19:52,243 And yeah, we got to remove that too. 292 00:19:52,243 --> 00:19:56,753 Okay, so if we hit this, we get this back. 293 00:19:56,753 --> 00:20:01,680 And if we go down to, okay, so I think I get what's going on. 294 00:20:01,680 --> 00:20:03,948 So even though we're getting back the array, 295 00:20:03,948 --> 00:20:07,040 I think we still need to let it know that we want the first index. 296 00:20:08,490 --> 00:20:12,906 I could be wrong, but let's try it because if we come down here we see picture, and 297 00:20:12,906 --> 00:20:15,820 we see medium, which I think is what we had, right? 298 00:20:15,820 --> 00:20:17,260 Yeah, data.picture.medium. 299 00:20:17,260 --> 00:20:21,530 So let's see. 300 00:20:21,530 --> 00:20:22,870 We'll do results. 301 00:20:22,870 --> 00:20:26,700 The 0 that we're grabbing our first index. 302 00:20:26,700 --> 00:20:29,205 And now if we hit Save, let's see if this works. 303 00:20:29,205 --> 00:20:30,339 [MUSIC] 304 00:20:30,339 --> 00:20:31,386 So it does work. 305 00:20:31,386 --> 00:20:32,250 Awesome. 306 00:20:32,250 --> 00:20:34,850 And we have a random image here for our person. 307 00:20:34,850 --> 00:20:38,035 So if we click this again we should get another random person. 308 00:20:38,035 --> 00:20:39,443 This is actually really cool. 309 00:20:39,443 --> 00:20:44,989 It's an easy way to work with random users to work with large complex UIs and 310 00:20:44,989 --> 00:20:48,500 things like that where you need data. 311 00:20:48,500 --> 00:20:52,430 So now let's update the first name and last name. 312 00:20:53,510 --> 00:21:00,570 So I'm going to write two sets of dollar signs and curly braces to interpolate. 313 00:21:01,780 --> 00:21:05,650 And this is because we don't just get the full name. 314 00:21:05,650 --> 00:21:09,930 If we go down to the name property, we'll have first, last, and title. 315 00:21:09,930 --> 00:21:16,800 So what we need to do here is write data.name.first. 316 00:21:16,800 --> 00:21:21,190 And then in here we need to write data.name.last. 317 00:21:21,190 --> 00:21:28,850 And as far as the user name, if we let's see where that's at. 318 00:21:28,850 --> 00:21:33,837 I don't see username I thought we had a username property, but maybe not. 319 00:21:33,837 --> 00:21:35,513 Wait, is it login? 320 00:21:35,513 --> 00:21:37,550 Yeah, so login and then username. 321 00:21:37,550 --> 00:21:40,974 So what we can do here is interpolate. 322 00:21:40,974 --> 00:21:41,809 [MUSIC] 323 00:21:41,809 --> 00:21:48,789 All right, data.login.username and if we hit Save, we also have our e-mail address. 324 00:21:48,789 --> 00:21:50,290 So let's do that too. 325 00:21:50,290 --> 00:21:52,030 And I think that one is pretty simple. 326 00:21:52,030 --> 00:21:54,280 I'm not gonna check the console. 327 00:21:54,280 --> 00:21:57,410 I think it's just data.email. 328 00:21:57,410 --> 00:21:57,940 We'll see. 329 00:21:57,940 --> 00:22:00,030 So if we hit Plus, awesome. 330 00:22:00,030 --> 00:22:05,649 We get email address, which looks like it's root.pelto@example.com, 331 00:22:05,649 --> 00:22:10,584 and his name is Roope Pelto, and here is his username and his image. 332 00:22:10,584 --> 00:22:17,150 So, we hit Plus again, we get another random user, and another, and another. 333 00:22:17,150 --> 00:22:18,938 So now that we know that this is kind of working, 334 00:22:18,938 --> 00:22:21,320 let's remove our console.log statement. 335 00:22:21,320 --> 00:22:23,740 And now let's figure out what we wanna work on next. 336 00:22:25,010 --> 00:22:28,603 So I think what we need to do next is probably start working on some of 337 00:22:28,603 --> 00:22:31,670 the logic, or maybe even just the rules with our app. 338 00:22:31,670 --> 00:22:36,575 And what I mean by rules is basically how many people do we wanna show per page, 339 00:22:36,575 --> 00:22:38,220 and all that good stuff. 340 00:22:38,220 --> 00:22:41,210 So let's maybe start setting up some variables. 341 00:22:41,210 --> 00:22:44,930 Now remember, GitHub Copilot works better with the more context that it has. 342 00:22:44,930 --> 00:22:48,612 So setting up variables like amount of people to show per page or 343 00:22:48,612 --> 00:22:53,406 things like that, it's gonna really help kind of give GitHub Copilot some idea of 344 00:22:53,406 --> 00:22:57,446 what we wanna do, and it'll offer us some better code completions. 345 00:22:57,446 --> 00:22:58,475 So, in theory, 346 00:22:58,475 --> 00:23:03,633 because I actually have not built this out with GitHub Copilot yet, so we'll see. 347 00:23:03,633 --> 00:23:06,911 But let's do const number of, 348 00:23:06,911 --> 00:23:11,578 let's do numberOfFriendsPerPage = 5 and 349 00:23:11,578 --> 00:23:16,999 maybe this will let GitHub Copilot know that we're 350 00:23:16,999 --> 00:23:22,435 going to start doing some pagination, who knows? 351 00:23:22,435 --> 00:23:25,313 One thing I do know is we're gonna need a function for pagination. 352 00:23:25,313 --> 00:23:32,586 So let's write function handlePagination. 353 00:23:32,586 --> 00:23:34,960 Actually, let's just write. 354 00:23:34,960 --> 00:23:36,530 [MUSIC] 355 00:23:36,530 --> 00:23:41,731 Yeah, let's do function and see if it offers any completions first. 356 00:23:41,731 --> 00:23:45,225 PaginateList, so it wants to create a function for paginateList. 357 00:23:45,225 --> 00:23:49,020 I'm gonna hit Tab, and let's take a look at the code that it offered us. 358 00:23:49,020 --> 00:23:53,479 So paginationList, and it gives us a pageNumber as a argument. 359 00:23:55,040 --> 00:23:58,208 And it wants to create a variable for list items, and 360 00:23:58,208 --> 00:24:01,470 that is friendslist.querySelectorAllli. 361 00:24:01,470 --> 00:24:06,065 So when this function runs, this variable is gonna hold basically 362 00:24:06,065 --> 00:24:10,837 a reference to every single list item inside of our friends list app. 363 00:24:10,837 --> 00:24:12,442 [MUSIC] 364 00:24:12,442 --> 00:24:15,875 And then it wants to loop over each one, okay? 365 00:24:15,875 --> 00:24:21,160 And basically as it loops over each one, it wants to run this conditional If index. 366 00:24:21,160 --> 00:24:25,896 And if you don't know what index is in a forEach loop is 367 00:24:25,896 --> 00:24:30,213 each time the items in the array get looped over, 368 00:24:30,213 --> 00:24:35,498 the current item being processed or worked on is the index. 369 00:24:35,498 --> 00:24:40,113 So the first time through an array index equals zero which is the first index of 370 00:24:40,113 --> 00:24:43,529 an array and then one and two and then three and then so on. 371 00:24:43,529 --> 00:24:49,156 So if index is greater than or equal to the numberOfFriendsPerPage so 372 00:24:49,156 --> 00:24:54,402 it's grabbing this variable that we set up up here on line four. 373 00:24:54,402 --> 00:24:57,728 So it wants to do index, if it's greater than or 374 00:24:57,728 --> 00:25:02,486 equal to numberOfFriendsPerPage multiplied by pageNumber- 1. 375 00:25:02,486 --> 00:25:06,422 And index is less than numberOfFriendsPerPage times 376 00:25:06,422 --> 00:25:11,319 the pageNumber, then it wants to run this logic where it basically 377 00:25:11,319 --> 00:25:15,087 takes that item and displays it or, else hides it. 378 00:25:15,087 --> 00:25:17,030 So this makes sense. 379 00:25:17,030 --> 00:25:19,960 The only issue that I see here is this pageNumber. 380 00:25:19,960 --> 00:25:23,060 So we're gonna need to figure out a way to get this pageNumber. 381 00:25:24,290 --> 00:25:26,251 So, what I think this is, 382 00:25:26,251 --> 00:25:31,750 is a function that is called as you click on a pagination button. 383 00:25:31,750 --> 00:25:34,690 So we don't have these buttons made yet. 384 00:25:34,690 --> 00:25:37,906 I do know we see these buttons here, 1, 2, and 3, but 385 00:25:37,906 --> 00:25:43,210 these are hard-coded in here, so let's go ahead and finally remove these. 386 00:25:43,210 --> 00:25:46,910 And now what we wanna do is create a function, I guess, 387 00:25:46,910 --> 00:25:49,570 to handle the creation of the buttons. 388 00:25:49,570 --> 00:25:54,398 Because the buttons are gonna be needing to be appended to the page dynamically, 389 00:25:54,398 --> 00:25:59,090 based on the amount of people versus the amount of people per page. 390 00:25:59,090 --> 00:26:02,410 So let's see if GitHub Copilot can help us with that. 391 00:26:02,410 --> 00:26:07,150 So if I just hit enter and I type in function, let's see if it offers this for 392 00:26:07,150 --> 00:26:08,366 us out of the gate. 393 00:26:08,366 --> 00:26:10,127 That would be awesome if it did, and 394 00:26:10,127 --> 00:26:13,769 you can always tell if it's working at the very bottom of the screen here, 395 00:26:13,769 --> 00:26:17,686 you'll see like the little circle which kind of lets you know it's thinking. 396 00:26:17,686 --> 00:26:21,060 And now it looks like it thought. 397 00:26:21,060 --> 00:26:24,980 So it's basically just giving us a paginate List function again, so 398 00:26:24,980 --> 00:26:26,730 it doesn't. 399 00:26:26,730 --> 00:26:28,900 In my assumption, it doesn't know what we wanna do. 400 00:26:28,900 --> 00:26:35,622 So let's create a function called createPaginationButtons and 401 00:26:35,622 --> 00:26:40,030 see if it offers us any code that we can use. 402 00:26:40,030 --> 00:26:41,961 So it is thinking, okay, cool. 403 00:26:41,961 --> 00:26:45,590 So let's hit Tab and let's see what happens here. 404 00:26:45,590 --> 00:26:50,733 So const numberOfFriends, which, okay, now I was just making sure we 405 00:26:50,733 --> 00:26:56,590 weren't reusing a variable here, but this is numberOfFriendsPerPage. 406 00:26:56,590 --> 00:27:02,490 So const numberOfFriends equals our friendsList.querySelectorAll li.length. 407 00:27:02,490 --> 00:27:07,023 So this right here, let's create a comment, 408 00:27:07,023 --> 00:27:13,800 this here returns the numberOfFriends and the numberOfPages. 409 00:27:13,800 --> 00:27:19,522 And basically it looks like it's using this built in function here to round or 410 00:27:19,522 --> 00:27:25,349 I guess to round up the numberOfFriends divided by numberOfFriendsPerPage. 411 00:27:25,349 --> 00:27:28,400 Okay, that makes sense. 412 00:27:28,400 --> 00:27:32,610 Then it's looping over, so it says for let i equal 1 and 413 00:27:32,610 --> 00:27:37,357 while i is less than or equal to number of pages increment by 1, 414 00:27:37,357 --> 00:27:41,141 so it's gonna run this until this becomes false. 415 00:27:41,141 --> 00:27:44,219 So const button equals document.createElement button, 416 00:27:44,219 --> 00:27:45,210 which is awesome. 417 00:27:45,210 --> 00:27:49,000 It's creating our buttons for us, and then button intertext equals i. 418 00:27:49,000 --> 00:27:52,015 So the first time through this for loop, i equals 1. 419 00:27:52,015 --> 00:27:53,247 And the second time, 2, then 3. 420 00:27:53,247 --> 00:27:55,733 So it's gonna create each of our buttons for us. 421 00:27:55,733 --> 00:27:59,550 And then it's gonna add an event listener for clicks on each button. 422 00:27:59,550 --> 00:28:05,620 And it's gonna call this paginateList function that it just created for us. 423 00:28:05,620 --> 00:28:09,022 And it's giving us our argument, which is the pageNumber, 424 00:28:09,022 --> 00:28:14,100 which is actually the buttonNumber, which actually is the button that it's creating. 425 00:28:14,100 --> 00:28:15,970 This is actually really cool. 426 00:28:15,970 --> 00:28:20,540 And then document.querySelector pagination.appendchild button. 427 00:28:20,540 --> 00:28:23,120 So this is where it's adding the button to the UI. 428 00:28:23,120 --> 00:28:27,740 And this is where we have a little bit of an error here because Pagination, 429 00:28:27,740 --> 00:28:30,060 the id of pagination does not exist. 430 00:28:32,300 --> 00:28:35,500 We actually have a pagination container here. 431 00:28:35,500 --> 00:28:39,250 But we don't have an id on this, so let's actually add an id. 432 00:28:39,250 --> 00:28:41,140 And we'll say pagination. 433 00:28:41,140 --> 00:28:44,150 And now the code that it offered us works. 434 00:28:44,150 --> 00:28:47,352 So if I hit Save, you probably won't notice anything, even if I click 435 00:28:47,352 --> 00:28:51,100 the plus button, and that's because we need to actually call these functions. 436 00:28:51,100 --> 00:28:53,590 All we did was create these functions. 437 00:28:53,590 --> 00:28:55,905 I'm actually seeing an error in the console, so 438 00:28:55,905 --> 00:28:58,769 let's make sure we don't have anything going on here. 439 00:28:58,769 --> 00:29:00,211 These aren't actually errors. 440 00:29:00,211 --> 00:29:02,120 Okay, never mind. 441 00:29:02,120 --> 00:29:06,942 Okay, so basically, this all starts when we hit the plus button and 442 00:29:06,942 --> 00:29:09,790 then we create a new user. 443 00:29:09,790 --> 00:29:14,480 So we click that we create a new user, it adds the user to our UI. 444 00:29:15,760 --> 00:29:18,687 Actually, let's go ahead and create a few. 445 00:29:18,687 --> 00:29:20,963 Okay, yeah, well, we have more than five users in here. 446 00:29:20,963 --> 00:29:24,430 So we should be getting pagination now, but we're not. 447 00:29:24,430 --> 00:29:28,038 So let's figure out where we need to call our functions. 448 00:29:28,038 --> 00:29:32,327 So what I'm going to do is inside of our Create User function, 449 00:29:32,327 --> 00:29:36,780 basically once our user is created, we now have a new list item, 450 00:29:36,780 --> 00:29:41,579 which if you remember, that's what these two functions are using. 451 00:29:41,579 --> 00:29:43,244 They're using our list items. 452 00:29:43,244 --> 00:29:46,016 So I'm wondering if I hit Enter here if it's gonna, 453 00:29:46,016 --> 00:29:48,540 yep, it's gonna actually call our function. 454 00:29:48,540 --> 00:29:50,292 So this is a great place to call it. 455 00:29:50,292 --> 00:29:51,930 According to GitHub Copilot. 456 00:29:51,930 --> 00:29:54,166 So let's actually see if that does anything. 457 00:29:54,166 --> 00:29:58,544 I'm going to, and remember that the create pagination buttons function calls our 458 00:29:58,544 --> 00:30:02,811 paginate list function, so we don't actually need to call this anywhere else. 459 00:30:02,811 --> 00:30:04,693 See at the very bottom it calls it. 460 00:30:04,693 --> 00:30:06,221 So let's see if this works. 461 00:30:06,221 --> 00:30:10,069 So if we hit plus, we have a brand new user and 462 00:30:10,069 --> 00:30:13,925 we now have a button which is super awesome. 463 00:30:13,925 --> 00:30:18,611 Okay, so now we have an issue, it's creating a button each time and 464 00:30:18,611 --> 00:30:20,102 we don't want that. 465 00:30:20,102 --> 00:30:25,105 We only want a new button when our logic makes sense, which means once we have 466 00:30:25,105 --> 00:30:30,079 more than five per page that's when we want to display another button. 467 00:30:30,079 --> 00:30:33,780 And clicking on the buttons completely messes some things up, so 468 00:30:33,780 --> 00:30:36,349 we need to figure out why that's happening. 469 00:30:36,349 --> 00:30:40,337 I'm pretty sure i know exactly why our list items are looking 470 00:30:40,337 --> 00:30:44,246 pretty different and I'm pretty sure it's gonna be inside 471 00:30:44,246 --> 00:30:48,719 of this function here where it changes the display to block or none. 472 00:30:48,719 --> 00:30:53,079 So what we need to do is change this to flex because we are using 473 00:30:53,079 --> 00:30:55,651 a display of flex on the list items. 474 00:30:55,651 --> 00:30:59,239 So if we hit this, and then we hit a button, cool, everything stays the same. 475 00:30:59,239 --> 00:31:05,317 So one other thing that I noticed that I think we can fix is the buttons. 476 00:31:05,317 --> 00:31:10,609 So it seems like every single time this function runs which every time we 477 00:31:10,609 --> 00:31:16,956 create a new user, it does, it basically pins a button to the pagination container, 478 00:31:16,956 --> 00:31:20,408 which is what we wanna do, but not every time. 479 00:31:20,408 --> 00:31:24,620 So what I think we should do is right before we add a new button, 480 00:31:24,620 --> 00:31:27,945 let's actually clear out the HTML inside of it. 481 00:31:27,945 --> 00:31:31,743 So Since we're gonna be using this multiple times, 482 00:31:31,743 --> 00:31:34,341 let's create a variable for this. 483 00:31:34,341 --> 00:31:41,667 So up here I'll type in const pagination equals document.querySelector pagination. 484 00:31:41,667 --> 00:31:46,789 And what we can do down here is just write pagination, and 485 00:31:46,789 --> 00:31:53,319 then just above it we'll do pagination.enterHTML = an empty string. 486 00:31:53,319 --> 00:31:57,360 Let's see if this works, hopefully it does. 487 00:31:57,360 --> 00:31:59,481 Awesome, so we clicked on a new user. 488 00:31:59,481 --> 00:32:03,563 And we clicked on another one and another one, 489 00:32:03,563 --> 00:32:07,345 another one, another one, another one. 490 00:32:07,345 --> 00:32:09,481 Okay, cool, so after we hit five, 491 00:32:09,481 --> 00:32:12,917 we noticed that now we're only getting one button here. 492 00:32:12,917 --> 00:32:17,633 And it now has the number 2, which is the amount of buttons we should be having. 493 00:32:17,633 --> 00:32:22,434 So it's kinda working, but it's kinda not, which is a really good reason and 494 00:32:22,434 --> 00:32:27,309 a really good way to show that you can't fully rely on things like GitHub Copilot 495 00:32:27,309 --> 00:32:29,592 or Chat GPT or any other AI software. 496 00:32:29,592 --> 00:32:34,721 You should definitely be able to understand the code you're writing and 497 00:32:34,721 --> 00:32:36,580 implement it correctly. 498 00:32:36,580 --> 00:32:39,317 So let's figure out how we can fix this issue. 499 00:32:39,317 --> 00:32:41,412 So this is actually a pretty easy fix, 500 00:32:41,412 --> 00:32:45,471 I think all we'll need to do is just remove this line of code that we just put 501 00:32:45,471 --> 00:32:49,529 and instead of putting it every single time that we run through this loop, 502 00:32:49,529 --> 00:32:52,357 let's actually do it when the function is called. 503 00:32:52,357 --> 00:32:57,216 So at the very beginning of the function right after the variables 504 00:32:57,216 --> 00:32:59,875 that we declare, let's hit Save. 505 00:32:59,875 --> 00:33:01,863 And in theory, I think this should work. 506 00:33:01,863 --> 00:33:08,119 So 2,3,4,5 now let's see. 507 00:33:08,119 --> 00:33:10,697 Awesome, cool. So we keep our first button and 508 00:33:10,697 --> 00:33:13,051 then we now have a second button, 509 00:33:13,051 --> 00:33:17,441 and that's because this person should be on a whole new list. 510 00:33:17,441 --> 00:33:20,416 So this kinda brings us to another bug, so 511 00:33:20,416 --> 00:33:23,906 I'm noticing he's here he shouldn't be here. 512 00:33:23,906 --> 00:33:28,487 But if we click on page 2 he is there and if we go back to page 1, 513 00:33:28,487 --> 00:33:33,532 he's not there, so this sort of works but it sort of doesn't work. 514 00:33:33,532 --> 00:33:37,839 If we add more people let's just see how well this works or 515 00:33:37,839 --> 00:33:42,684 doesn't work so if we click on a button click on another button so 516 00:33:42,684 --> 00:33:48,540 this works great except we have to click these buttons down here to navigate. 517 00:33:48,540 --> 00:33:53,500 So that tells me that whatever logic is inside of these should also 518 00:33:53,500 --> 00:33:58,115 somehow be working before we click the pagination buttons. 519 00:33:58,115 --> 00:34:01,970 So let's check out the paginate list function and 520 00:34:01,970 --> 00:34:05,285 see if we can update this just a little bit. 521 00:34:05,285 --> 00:34:11,597 Let's see if we can create a new function to update the list items. 522 00:34:11,597 --> 00:34:14,307 But we'll see if GitHub Copilot can do this for us. 523 00:34:14,307 --> 00:34:15,778 So if I write function, 524 00:34:15,778 --> 00:34:19,467 let's see if it maybe even offers this right out of the box. 525 00:34:19,467 --> 00:34:22,591 Paginate list, no, it just wants to redo the paginate list. 526 00:34:22,591 --> 00:34:26,598 So let's do update list items and 527 00:34:26,598 --> 00:34:30,468 see if it knows what we wanna do. 528 00:34:30,468 --> 00:34:32,287 So const list items and 529 00:34:32,287 --> 00:34:37,654 it basically creates another variable to hold all the list items. 530 00:34:37,654 --> 00:34:42,178 And then it wants to loop over them. 531 00:34:42,178 --> 00:34:45,098 Okay, so this is just updating the actual names. 532 00:34:45,098 --> 00:34:48,794 So maybe we should be a little bit more descriptive with what we want to call this 533 00:34:48,794 --> 00:34:49,358 function. 534 00:34:49,358 --> 00:34:57,858 Actually, this might even be better if we tried to create this function. 535 00:34:57,858 --> 00:35:03,454 Well, no, we would still probably wanna call this function in the paginate list. 536 00:35:03,454 --> 00:35:06,718 Yeah, in the paginate list function, so 537 00:35:06,718 --> 00:35:12,514 maybe we can do a function call in here and then go to create it afterwards. 538 00:35:12,514 --> 00:35:15,075 So that it has a little bit more context. 539 00:35:15,075 --> 00:35:18,224 Maybe we can try it at the very end. 540 00:35:18,224 --> 00:35:22,809 So we'll do update list items, and it wants to give us a page 541 00:35:22,809 --> 00:35:27,210 number as the parameter, so let's go up here, okay, so 542 00:35:27,210 --> 00:35:32,163 it already knows we wanna create this function and it gives us our 543 00:35:32,163 --> 00:35:37,786 argument Const buttons equals pagination query selector all buttons. 544 00:35:37,786 --> 00:35:39,830 So it's grabbing all the buttons. 545 00:35:39,830 --> 00:35:44,992 Button.forEach button if parseInt which is button.innerText is equal 546 00:35:44,992 --> 00:35:50,082 to the page number button.classlist.add active, which is awesome. 547 00:35:50,082 --> 00:35:53,105 We definitely wanna do that, that was another feature I was gonna add later. 548 00:35:53,105 --> 00:35:58,085 But this isn't doing what I wanted it to do, so let's just keep going and 549 00:35:58,085 --> 00:36:01,282 see, else we remove the active class button. 550 00:36:01,282 --> 00:36:06,004 Okay, so that's all it wants to do for us with this. 551 00:36:06,004 --> 00:36:07,854 Let's keep it and just see what happens. 552 00:36:07,854 --> 00:36:13,853 So we do this we create a few different places, I mean pages. 553 00:36:13,853 --> 00:36:16,719 Okay, cool. So it definitely wants us, I mean, 554 00:36:16,719 --> 00:36:21,209 it definitely gives us the code that we need to add that active class 555 00:36:21,209 --> 00:36:23,470 to our buttons, which is great. 556 00:36:23,470 --> 00:36:31,517 Actually you know what? 557 00:36:31,517 --> 00:36:38,760 Create pagination buttons, where is this function being called? 558 00:36:38,760 --> 00:36:41,750 Let's see. 559 00:36:41,750 --> 00:36:47,121 It's being called right after createUser, which, 560 00:36:47,121 --> 00:36:52,976 I guess, is where we'd wanna call it, that makes sense. 561 00:36:52,976 --> 00:36:58,284 And inside of here we are running the page list. 562 00:36:58,284 --> 00:37:05,094 I wonder if we call our page list, Function in here. 563 00:37:05,094 --> 00:37:09,352 The only issue is that we don't have our argument for it. 564 00:37:09,352 --> 00:37:16,863 Because page list takes in an argument, which is our page number. 565 00:37:19,395 --> 00:37:21,582 Let's see what happens. 566 00:37:21,582 --> 00:37:23,904 We'll probably get an error, yeah, we got an error. 567 00:37:23,904 --> 00:37:25,054 Yeah, I didn't think that would work. 568 00:37:25,054 --> 00:37:33,779 So, what we need to do is we need to figure out How to remove that. 569 00:37:33,779 --> 00:37:36,955 Basically, after the button is clicked. 570 00:37:36,955 --> 00:37:40,197 So basically, let's kinda start from the beginning. 571 00:37:40,197 --> 00:37:41,572 We click our button, okay? 572 00:37:41,572 --> 00:37:45,571 And when we click our button, we're creating a new list item, 573 00:37:45,571 --> 00:37:48,973 and then we're calling create pagination buttons. 574 00:37:48,973 --> 00:37:55,074 And the createPaginationButtons function, let's close out all these other functions. 575 00:37:55,074 --> 00:38:01,549 Oops, so the createPaginationButtons function basically creates our 576 00:38:01,549 --> 00:38:07,080 buttons based off of the logic and then it appends it to the UI. 577 00:38:07,080 --> 00:38:11,850 And as it appends it, it also adds an event listener to each of 578 00:38:11,850 --> 00:38:16,912 those buttons and basically calls the paginateList function. 579 00:38:16,912 --> 00:38:22,932 So the paginateList function is down here. 580 00:38:22,932 --> 00:38:28,132 And this is basically showing all of this so I get why this is not working. 581 00:38:28,132 --> 00:38:32,269 This bit of logic that hides or shows each of these list items 582 00:38:32,269 --> 00:38:35,929 only happens when one of these buttons are clicked. 583 00:38:35,929 --> 00:38:40,728 So it's working, but we need to basically call this before, and 584 00:38:40,728 --> 00:38:43,097 I think I know how we can do this. 585 00:38:43,097 --> 00:38:48,732 Maybe we could actually take this bit of logic, oops, I don't wanna cut it [LAUGH]. 586 00:38:48,732 --> 00:38:51,783 Let's copy this bit of logic and 587 00:38:51,783 --> 00:38:56,419 all we basically need is our list items, right? 588 00:38:56,419 --> 00:39:04,272 Yeah, so this function works using a page number, but we don't need that. 589 00:39:07,542 --> 00:39:10,810 Yeah, we do, we do actually need that. 590 00:39:10,810 --> 00:39:13,535 Hmm, this is interesting. 591 00:39:13,535 --> 00:39:17,693 So what I think we could do though is let's see, so 592 00:39:17,693 --> 00:39:22,359 createPaginationButtons, it's being called here. 593 00:39:22,359 --> 00:39:25,657 So inside of our createPaginationButtons, 594 00:39:25,657 --> 00:39:30,512 what I wanna do at the very end of this function, let's paste in our 595 00:39:30,512 --> 00:39:35,390 list items that for each and we also are giving a reference to that. 596 00:39:35,390 --> 00:39:42,555 Let's put this up here keep all of our variables kinda in the same place. 597 00:39:42,555 --> 00:39:45,659 And basically we're gonna loop through each list item. 598 00:39:45,659 --> 00:39:47,062 And we're gonna hide, and 599 00:39:47,062 --> 00:39:51,163 show the only issue is that it needs this page number which we're not giving it. 600 00:39:53,075 --> 00:39:57,236 So we're definitely gonna hit an error. 601 00:39:59,067 --> 00:39:59,893 Or are we? 602 00:40:01,071 --> 00:40:06,121 Well, it's still working so. 603 00:40:06,121 --> 00:40:08,359 yeah, I knew we'd hit errors [LAUGH]. 604 00:40:08,359 --> 00:40:14,550 Okay, so in promise list items is not defined on 43 list items is not defined. 605 00:40:14,550 --> 00:40:18,715 What do you mean list items is not defined? 606 00:40:18,715 --> 00:40:21,449 We are grabbing these list items. 607 00:40:21,449 --> 00:40:25,390 It's a scoping issue, all right so let's save that. 608 00:40:25,390 --> 00:40:31,285 I was actually I was creating that list items variable inside of our for loop and 609 00:40:31,285 --> 00:40:37,109 then running the logic needed for it outside of it, so it was a scoping issue. 610 00:40:37,109 --> 00:40:43,040 So now if we hit that we should get errors, yeah, page number is not defined. 611 00:40:43,040 --> 00:40:44,938 Okay so let's figure this out. 612 00:40:44,938 --> 00:40:49,893 So I think I know what we can do. 613 00:40:49,893 --> 00:40:54,877 Let's set up a new variable, we'll do num of pages equals, and it wants to 614 00:40:54,877 --> 00:40:59,867 give me pagination.querySelector all button.length, which I guess it 615 00:40:59,867 --> 00:41:05,115 wants to gimme that because of the variable name, but that's not what I want. 616 00:41:05,115 --> 00:41:10,369 I want to basically get the number of friends. 617 00:41:11,493 --> 00:41:14,589 There we go, so it knows what I want. 618 00:41:14,589 --> 00:41:19,107 So I wanna do number of friends divided by the number of friends per page. 619 00:41:19,107 --> 00:41:24,815 And what we can do is we can replace this page number with this variable. 620 00:41:24,815 --> 00:41:29,627 And in theory, this should work, this should fix our problems. 621 00:41:29,627 --> 00:41:33,536 So Let's give it a try, let's see. 622 00:41:33,536 --> 00:41:38,275 So, if we add a friend, add another, and then another, and another, and 623 00:41:38,275 --> 00:41:39,792 then our fifth friend. 624 00:41:39,792 --> 00:41:42,039 So, let's see. 625 00:41:42,039 --> 00:41:44,842 Awesome, so, we have our second button. 626 00:41:44,842 --> 00:41:46,721 We click it, we have our one person there. 627 00:41:46,721 --> 00:41:49,828 We go back to our first page, we only have our first five. 628 00:41:49,828 --> 00:41:50,869 So great. 629 00:41:50,869 --> 00:41:55,037 And if we keep adding and adding, then we go, 630 00:41:55,037 --> 00:41:59,554 we should see our extra people on the extra page. 631 00:41:59,554 --> 00:42:01,216 And if we keep adding, 632 00:42:01,216 --> 00:42:05,597 we should get another page thrown into the UI at some point. 633 00:42:05,597 --> 00:42:06,540 And we do, awesome. 634 00:42:06,540 --> 00:42:10,701 So we have our first page, second page, third page, and 635 00:42:10,701 --> 00:42:14,527 if we add more we have a fourth page now, so awesome. 636 00:42:14,527 --> 00:42:17,882 So we actually were able to get this working with GitHub Copilot, 637 00:42:17,882 --> 00:42:20,017 it's still somewhat a little buggy, but 638 00:42:20,017 --> 00:42:24,059 this is basically what we wanted to build and I don't know, what do you think? 639 00:42:24,059 --> 00:42:28,139 Do you think you could have built this quicker without GitHub Copilot or 640 00:42:28,139 --> 00:42:31,743 do you think this is a little bit outside of your comfort zone and 641 00:42:31,743 --> 00:42:35,426 you need to rely on GitHub Copilot to build something like this. 642 00:42:35,426 --> 00:42:36,858 Let us know down below. 643 00:42:36,858 --> 00:42:39,584 But I think this was a really good use case for 644 00:42:39,584 --> 00:42:42,468 GitHub Copilot to help us where we struggled. 645 00:42:42,468 --> 00:42:43,480 But as you can see, 646 00:42:43,480 --> 00:42:47,150 you definitely still need to understand the code you're writing and 647 00:42:47,150 --> 00:42:51,277 be able to fix and troubleshoot any bugs and issues that come up along the way. 648 00:42:51,277 --> 00:42:53,994 So I hope you enjoyed this video and I'll see you the next one, 649 00:42:53,994 --> 00:42:55,570 until then have fun and happy coding