1 00:00:00,560 --> 00:00:07,170 All right guys in this mini project we're going to build a profile scroller using a javascript iterator 2 00:00:07,170 --> 00:00:08,680 and iOS 6 iterator. 3 00:00:08,790 --> 00:00:14,500 And I'm doing this because a lot of people see things like generators and iterators new features of 4 00:00:14,510 --> 00:00:21,480 VSX and it's hard to kind of figure out what they could be used for in real life in a real application. 5 00:00:21,510 --> 00:00:25,740 So we're going to integrate it with the Dom and we're going to create a little profile scroll that you'd 6 00:00:25,740 --> 00:00:27,210 see on like a dating site. 7 00:00:27,240 --> 00:00:30,410 So you'd see a picture of someone with some information. 8 00:00:30,480 --> 00:00:33,470 Click next go to the next profile and so on. 9 00:00:33,480 --> 00:00:36,590 So we're going to do that with an iOS 6 iterator. 10 00:00:36,810 --> 00:00:37,150 All right. 11 00:00:37,170 --> 00:00:41,220 We're going to make it look pretty decent so we're going to use bootstrap. 12 00:00:41,280 --> 00:00:44,510 We're going to go to get bootstrapped dot com go to get started. 13 00:00:44,730 --> 00:00:48,530 And we're going to grab the starter template here. 14 00:00:48,530 --> 00:00:48,860 All right. 15 00:00:48,870 --> 00:00:56,250 Now I have a folder called Profiles scroll or with an empty index M L and an empty apt J as files so 16 00:00:56,250 --> 00:00:57,940 just go and create those. 17 00:00:58,110 --> 00:01:01,060 And we'll go ahead and paste in. 18 00:01:01,080 --> 00:01:05,330 All right we'll change the title here to profile. 19 00:01:05,530 --> 00:01:06,450 Scroller. 20 00:01:06,840 --> 00:01:12,290 And then we want to make sure at the bottom we go ahead and put in our app J.S. script. 21 00:01:16,900 --> 00:01:17,390 All right. 22 00:01:17,390 --> 00:01:25,190 Now for the body it's not going to be too bad we're just going to first of all put a container of everything 23 00:01:25,220 --> 00:01:30,830 to the middle and then I want I want it to be a really narrow application. 24 00:01:30,830 --> 00:01:34,300 So just a six column div and then we'll push it to the middle. 25 00:01:34,760 --> 00:01:39,320 So we're going to use a road class here and then a six column div. 26 00:01:39,320 --> 00:01:45,980 So call em D6 and then to push it to the middle we'll use em x Otto which will give us margin. 27 00:01:45,980 --> 00:01:51,950 Auto on the right and the left or right and then inside here will have an H one I'm going to give it 28 00:01:51,950 --> 00:02:00,070 a class of m b dash 3 to give it some margin bottom and we're going to save profiles scroller. 29 00:02:00,250 --> 00:02:00,670 All right. 30 00:02:00,680 --> 00:02:07,900 And then underneath that we're going to have a div with the idea of image image display. 31 00:02:08,960 --> 00:02:14,160 Nothing inside the div it's basically just a placeholder for where the image will pop up. 32 00:02:14,390 --> 00:02:21,350 That will have a line break and then let's have another idea of profile display which will have the 33 00:02:21,350 --> 00:02:23,170 rest of the data. 34 00:02:23,330 --> 00:02:26,590 All right then we'll have a line break and then we'll have the next button. 35 00:02:26,600 --> 00:02:29,110 So it'll save button given an idea. 36 00:02:29,120 --> 00:02:37,580 Next a class of between a class of between dash dark and a class of DTN dash. 37 00:02:37,580 --> 00:02:41,740 BLOCK OK all bootstrap classes and we'll say next. 38 00:02:41,780 --> 00:02:43,080 So let's save that. 39 00:02:43,490 --> 00:02:51,030 And let's go ahead and open this up with live server and it should look like this. 40 00:02:51,050 --> 00:02:51,340 All right. 41 00:02:51,350 --> 00:02:58,940 So now we're going to go to our app J.S. file and first thing we'll do here is create the iterator itself. 42 00:02:58,940 --> 00:02:59,270 All right. 43 00:02:59,270 --> 00:03:05,200 So we're going to go actually before we do that let's let's create the data. 44 00:03:05,220 --> 00:03:13,400 Now usually the data would come from like an API or a database or some kind of back end. 45 00:03:13,400 --> 00:03:16,340 But in this case it's just going to be hard coded. 46 00:03:17,100 --> 00:03:17,510 OK. 47 00:03:17,550 --> 00:03:23,130 So I mean if later on if you wanted to create your own API and linked to that that's fine but we're 48 00:03:23,130 --> 00:03:24,110 just going to hardcoded. 49 00:03:24,120 --> 00:03:28,730 So let's say name to our first person here. 50 00:03:29,190 --> 00:03:34,880 Of course it's John Doe famous John Doe age. 51 00:03:35,030 --> 00:03:36,780 He's 32 today. 52 00:03:37,540 --> 00:03:43,490 It's a gender male. 53 00:03:43,560 --> 00:03:45,630 And they're also going to have looking for 54 00:03:48,170 --> 00:03:54,840 female and let's say location. 55 00:03:54,840 --> 00:04:02,830 Boston Mass and then image now the image I'm actually using an API called Random User. 56 00:04:03,090 --> 00:04:10,140 And we can get these Yarl's that are formatted like this random user api portraits and we can say woman 57 00:04:10,140 --> 00:04:13,530 or men and then an ID dot jpeg. 58 00:04:13,530 --> 00:04:20,400 So in this case if we look at this image and gives us this guy here and if we were to change this man 59 00:04:20,400 --> 00:04:25,080 to woman we get a picture of a woman and we can change the number. 60 00:04:25,370 --> 00:04:28,080 I could say three and it will give us another picture. 61 00:04:28,320 --> 00:04:31,530 All right so we're just going to put some random images in here. 62 00:04:32,190 --> 00:04:36,880 So let's go ahead and copy this and let's put it in two more times. 63 00:04:37,170 --> 00:04:48,720 And this next one here let's say it's Jan Smith and let's say she's 26 female will say looking for male 64 00:04:50,160 --> 00:04:50,920 City. 65 00:04:51,000 --> 00:04:59,610 Let's our location let's say Miami Florida and we'll just change this to woman slash a to J peg and 66 00:04:59,610 --> 00:05:10,890 then this last one here let's say William Johnson age thirty eight male looking for female and location 67 00:05:11,530 --> 00:05:15,680 we'll just say I don't know when last. 68 00:05:15,820 --> 00:05:19,680 And then let's just change the ID here to 83. 69 00:05:19,680 --> 00:05:19,950 All right. 70 00:05:19,950 --> 00:05:24,610 So that's our data and we can pretend that that's coming from some kind of API. 71 00:05:24,660 --> 00:05:29,400 So now all we'll do is create the actual iterator function. 72 00:05:29,400 --> 00:05:31,140 So it's a profile 73 00:05:33,930 --> 00:05:35,190 iterator. 74 00:05:35,190 --> 00:05:36,600 So just function 75 00:05:41,790 --> 00:05:43,770 profile iterator. 76 00:05:44,250 --> 00:05:49,940 And this is going to take in profile's which is going to end up being this data. 77 00:05:49,950 --> 00:05:57,060 And then what we want to do is first of all create a variable called next index that's going to initially 78 00:05:57,060 --> 00:05:58,610 be set to zero. 79 00:05:58,860 --> 00:06:00,720 All right so that's like our counter. 80 00:06:00,720 --> 00:06:06,130 And then we want to return an object with a next function. 81 00:06:09,170 --> 00:06:09,620 All right. 82 00:06:09,640 --> 00:06:12,860 And then we want to return from here. 83 00:06:12,860 --> 00:06:22,810 We want to return either the value or or done OK so value and done false or just done true depending 84 00:06:22,810 --> 00:06:23,950 on a certain condition. 85 00:06:23,950 --> 00:06:29,220 So we're going to use a turn or the operator here are going to say next index. 86 00:06:29,800 --> 00:06:36,810 OK so next index if it is less than profile's which is being passed in length. 87 00:06:37,030 --> 00:06:41,620 OK so in this case it would be three because we're going to be passing this data in. 88 00:06:41,950 --> 00:06:51,970 OK so if it's less then if this is less than the length then we want to return an object with the value 89 00:06:53,740 --> 00:07:00,820 and then profiles and then for the index it will be next index plus 1. 90 00:07:00,820 --> 00:07:08,410 So next index plus plus OK and then we also want to send along done as false because it's not done it's 91 00:07:08,410 --> 00:07:12,310 not we didn't iterate through the whole thing else. 92 00:07:12,340 --> 00:07:16,440 So we use the colon for else. 93 00:07:16,450 --> 00:07:21,310 Actually let's format this a little better go like this. 94 00:07:22,950 --> 00:07:28,600 OK so else then we want to just return value. 95 00:07:28,600 --> 00:07:33,130 Or I'm sorry not value done as true. 96 00:07:33,200 --> 00:07:33,990 All right and that's it. 97 00:07:34,010 --> 00:07:42,280 That's our iterator so let's go ahead and actually put a semi-colon right here. 98 00:07:42,680 --> 00:07:44,710 Let's go ahead and save this. 99 00:07:45,320 --> 00:07:50,720 Actually it doesn't matter you don't need to save it because we're not done yet but we want to now go 100 00:07:50,720 --> 00:08:00,850 under the data and we want to create a variable here called Profiles and set it to the profile iterator. 101 00:08:01,340 --> 00:08:01,790 OK. 102 00:08:01,790 --> 00:08:08,010 And we want to pass in here the data so that data is being passed in here. 103 00:08:08,010 --> 00:08:08,450 All right. 104 00:08:08,460 --> 00:08:14,930 Now we need to create a click event for this next when we click this next we basically want to iterate 105 00:08:15,050 --> 00:08:17,870 through the profiles so let's say 106 00:08:20,840 --> 00:08:29,370 next event and we'll say document dot get element by ID that button has an idea next. 107 00:08:29,630 --> 00:08:31,550 And we want to add an event listener 108 00:08:35,210 --> 00:08:37,190 say click. 109 00:08:37,190 --> 00:08:43,030 So when it's clicked we want to call a function called next profile. 110 00:08:43,040 --> 00:08:43,370 All right. 111 00:08:43,370 --> 00:08:55,600 So we'll create that function and say next profile display function next profile. 112 00:08:56,900 --> 00:09:06,880 And in here what we want to do is we want to get the member we have this profile display an image display. 113 00:09:06,890 --> 00:09:09,830 That's where we want to put the content. 114 00:09:09,830 --> 00:09:10,160 All right. 115 00:09:10,160 --> 00:09:22,460 So it's a document dot get element by the profile display and then we want to add in our page DML equals 116 00:09:22,530 --> 00:09:23,340 tactics. 117 00:09:23,360 --> 00:09:30,050 We're going to use a template literal here and we're going to put in a UL give it a class of list group 118 00:09:30,050 --> 00:09:34,150 because we're using bootstrap. 119 00:09:34,730 --> 00:09:43,420 All right and then we want to put in an ally with a class of lists group item. 120 00:09:45,820 --> 00:09:52,940 And here we want to put the name and we'll be able to access that with. 121 00:09:52,940 --> 00:09:54,920 Actually no I didn't even do it yet. 122 00:09:54,940 --> 00:10:00,870 So right right at the beginning of next profile we need to actually call. 123 00:10:00,880 --> 00:10:08,530 We need to iterate with profiles dot next dot value OK because we have this profiles right here that's 124 00:10:08,530 --> 00:10:10,180 set to the iterator. 125 00:10:10,180 --> 00:10:12,310 So we need to call next. 126 00:10:12,340 --> 00:10:20,540 So it's create a variable called current profile set it to profile's dot next 127 00:10:23,090 --> 00:10:25,530 dot value. 128 00:10:26,030 --> 00:10:33,590 All right so now here we can say current profile name. 129 00:10:34,020 --> 00:10:34,930 All right. 130 00:10:34,940 --> 00:10:36,290 And then we'll just copy this 131 00:10:39,300 --> 00:10:41,230 face some more stuff here. 132 00:10:41,240 --> 00:10:42,620 So this will be the age 133 00:10:46,240 --> 00:10:47,930 and let's do the location 134 00:10:55,120 --> 00:10:56,850 and let's see. 135 00:10:56,860 --> 00:11:00,700 So this will be the preference. 136 00:11:01,680 --> 00:11:08,050 So for preference I'm going to put the gender of the person will say gender and then we'll say looking 137 00:11:08,380 --> 00:11:12,700 for and then the current profile 138 00:11:16,960 --> 00:11:21,130 current profile Daut looking for. 139 00:11:21,130 --> 00:11:21,370 All right. 140 00:11:21,380 --> 00:11:23,580 And we don't need this last one. 141 00:11:24,550 --> 00:11:25,900 OK. 142 00:11:25,930 --> 00:11:28,600 So that will be the profile display. 143 00:11:28,600 --> 00:11:30,710 Now we also have the image display. 144 00:11:31,000 --> 00:11:36,650 So it's a document dot get element by the image display 145 00:11:42,270 --> 00:11:52,260 and Dot enraged him now equals and then this is just going to be an image tag and the source is going 146 00:11:52,260 --> 00:12:00,940 to go to the current profile dot image OK. 147 00:12:01,340 --> 00:12:09,060 So let's go ahead and save this and let's click Next one of them is happening looks like we have some 148 00:12:09,060 --> 00:12:10,860 kind of syntax error. 149 00:12:10,860 --> 00:12:13,380 Forty six. 150 00:12:13,650 --> 00:12:15,420 What do they do here. 151 00:12:15,420 --> 00:12:16,280 Image 152 00:12:20,480 --> 00:12:23,550 How do you get out. 153 00:12:23,640 --> 00:12:25,290 That should be in there. 154 00:12:26,060 --> 00:12:26,970 Let's try it again. 155 00:12:26,970 --> 00:12:27,700 Click next. 156 00:12:27,720 --> 00:12:29,210 And there we go. 157 00:12:29,240 --> 00:12:37,340 Actually I want to add a tech center on this div right here. 158 00:12:37,530 --> 00:12:38,400 Try that. 159 00:12:38,400 --> 00:12:38,930 There you go. 160 00:12:38,940 --> 00:12:40,490 Now everything's in the center. 161 00:12:40,680 --> 00:12:43,770 So we have our first profile I click next. 162 00:12:43,770 --> 00:12:46,070 There's our second one Jen Smith. 163 00:12:46,260 --> 00:12:48,780 Next one William Johnson. 164 00:12:48,780 --> 00:12:51,180 Now remember William Johnson's The last one. 165 00:12:51,190 --> 00:12:55,590 Let's click Next again and we're going to get an error that says cannot read properly. 166 00:12:55,620 --> 00:12:59,810 Name of undefine because there's no more current profiles. 167 00:12:59,810 --> 00:13:04,750 All right and it's trying to read name right here of something that doesn't exist. 168 00:13:04,770 --> 00:13:09,690 It's not the current profile becomes undefined once we iterate through all of everything. 169 00:13:09,900 --> 00:13:15,130 So what we'll do here is wrap this in an IF statement. 170 00:13:18,660 --> 00:13:25,120 Let's end it right here and then we'll put an else like that. 171 00:13:27,020 --> 00:13:27,920 Tab that over. 172 00:13:27,920 --> 00:13:40,100 So we're going to say if current profile is not equal to undefined then we want to load the next person 173 00:13:40,460 --> 00:13:41,210 else. 174 00:13:41,240 --> 00:13:48,150 Then we just want to reload the page will say no more profiles. 175 00:13:48,200 --> 00:13:55,020 So we'll say window DOS window data location reload. 176 00:13:55,430 --> 00:14:01,290 OK remember the location object which is part of the window object has a method called reload. 177 00:14:01,520 --> 00:14:04,710 So it's save now will go through. 178 00:14:05,060 --> 00:14:08,670 OK we're out WM now we click next and it starts over now. 179 00:14:08,840 --> 00:14:16,370 I want the first person or the first profile to be displayed automatically. 180 00:14:16,370 --> 00:14:22,930 Now remember this next profile function is what does that and this event listener calls that function. 181 00:14:23,120 --> 00:14:28,280 But let's call it manually first just so it loads the first person. 182 00:14:28,310 --> 00:14:37,990 So we'll say right here call first profile and we'll just say next profile. 183 00:14:37,990 --> 00:14:39,070 All right save. 184 00:14:39,110 --> 00:14:40,350 And there we go. 185 00:14:40,350 --> 00:14:45,020 Jondo shows up like NexGen Smith next to William Johnson. 186 00:14:45,020 --> 00:14:46,000 That's the end. 187 00:14:46,130 --> 00:14:48,330 And it just kind of loops through. 188 00:14:49,160 --> 00:14:50,060 All right. 189 00:14:50,060 --> 00:14:55,370 So you can see here I mean this isn't like a full application or anything but this is part of what could 190 00:14:55,370 --> 00:14:58,190 be like some kind of dating application. 191 00:14:58,400 --> 00:15:02,030 And this is a good use for this iterator. 192 00:15:02,030 --> 00:15:06,510 All right guys so hopefully enjoy this little project and I will see you in the next video.