1 00:00:00,090 --> 00:00:00,720 Welcome back. 2 00:00:00,750 --> 00:00:03,510 How's your generator looking in this lesson? 3 00:00:03,510 --> 00:00:08,070 We're going to do some tweaks and updates to make the application even better. 4 00:00:08,370 --> 00:00:12,230 So it's looking at how the text is generated out. 5 00:00:12,450 --> 00:00:15,600 So we've got visit plus blogging dot com. 6 00:00:15,810 --> 00:00:17,400 So instead of spaces. 7 00:00:17,400 --> 00:00:24,120 And if we do add in a space, it turns out and it looks OK, but the format is not exactly the same 8 00:00:24,120 --> 00:00:26,150 as we've got within placeholder dot com. 9 00:00:26,490 --> 00:00:32,910 So usually, even though it works, it's usually it's a good idea to add in the spaces as plus signs. 10 00:00:33,060 --> 00:00:35,390 And with JavaScript, that's really easy to do. 11 00:00:35,670 --> 00:00:42,270 So setting up another function that we're going to use and we're going to call this spacers passing 12 00:00:42,270 --> 00:00:48,480 in a string value and the same as what we did with where we were turning back the hash for cleaning 13 00:00:48,480 --> 00:00:49,050 out the hash. 14 00:00:49,170 --> 00:00:53,340 We're going to return back a value and this one is going to be a little bit different because we're 15 00:00:53,340 --> 00:01:01,290 going to take our string and we're going to split by space and then we're going to join it back together. 16 00:01:01,530 --> 00:01:07,230 And we saw earlier that what split does is it turns it into an array, so it turns the string into an 17 00:01:07,230 --> 00:01:07,530 array. 18 00:01:07,770 --> 00:01:13,200 So what will happen here is when we've got test where we could have test one, test two, it'll split 19 00:01:13,200 --> 00:01:14,070 up by the space. 20 00:01:14,220 --> 00:01:16,580 So it'll create an array with two items in it. 21 00:01:16,800 --> 00:01:19,470 So the first one and the second one splitting it by the space. 22 00:01:19,650 --> 00:01:27,300 And then we want to join that back together using the joint method, which brings an array into a string 23 00:01:27,300 --> 00:01:30,070 and joining it back together, using the plus. 24 00:01:30,390 --> 00:01:36,240 So effectively, what will happen here when we pass on a value into spacers is it will be returned back 25 00:01:36,240 --> 00:01:37,090 with the plus. 26 00:01:37,350 --> 00:01:43,260 So let's wrap that input value with the function spacers and see what happens. 27 00:01:43,260 --> 00:01:49,890 Refresh and we've got test one test to test three as soon as we click off of it. 28 00:01:50,070 --> 00:01:54,120 You see that now we're generating that path and it looks a lot more proper. 29 00:01:54,120 --> 00:01:58,380 It looks a lot more like what is on placeholder dot com. 30 00:01:58,710 --> 00:02:07,050 We also needed to add in a way to be able to select that value so we can use an input for this one or 31 00:02:07,050 --> 00:02:09,080 we can use a text area to be different. 32 00:02:09,090 --> 00:02:16,620 And this text area is where we can start adding in some rows to that, adding in columns to that. 33 00:02:16,620 --> 00:02:18,300 And we'll leave it blank for now. 34 00:02:18,810 --> 00:02:26,340 And the idea is that once we create our path, I want the user to be able to select this text area and 35 00:02:26,340 --> 00:02:32,580 place it into their clipboard, selecting another object that we're going to use in order to hold the 36 00:02:32,580 --> 00:02:33,470 text area. 37 00:02:33,630 --> 00:02:38,910 And since there's only one of them, we can use query selector and select it by the tag. 38 00:02:39,070 --> 00:02:41,790 So taking our tag of text area. 39 00:02:41,970 --> 00:02:45,930 So now we've got it within the text area object and we can use that. 40 00:02:46,800 --> 00:02:54,390 And also setting we're setting our image path source and we're also updating the value to be equal to 41 00:02:54,390 --> 00:02:55,230 the iPad. 42 00:02:55,680 --> 00:02:57,160 So now try that out. 43 00:02:57,180 --> 00:03:01,290 And if we have any changes and you can see that now we're outputting it here. 44 00:03:01,410 --> 00:03:05,040 And what I also want to be able to do is select that area. 45 00:03:05,280 --> 00:03:12,360 So let's select that area using the select option select method. 46 00:03:12,660 --> 00:03:15,430 We can also add focus to that area. 47 00:03:15,450 --> 00:03:18,110 So putting the focus on that as well. 48 00:03:18,120 --> 00:03:19,040 So try that out. 49 00:03:19,410 --> 00:03:23,070 So now whenever we make any updates, we've got focus on there. 50 00:03:23,070 --> 00:03:27,690 We've got it selected and we could also copy it to the clipboard as well. 51 00:03:28,050 --> 00:03:34,020 So using the document exec come in and that command is copy. 52 00:03:34,920 --> 00:03:37,440 We're going to copy that selected item. 53 00:03:38,510 --> 00:03:44,720 So one more time, we'll try that and now we've got that copied, so if I take that and if I paste that, 54 00:03:44,900 --> 00:03:48,680 you can see that I've already copied that in and I can paste it anywhere I want. 55 00:03:48,900 --> 00:03:54,260 So if I want it to paste it within a URL, I could paste that and we can see that that image is now 56 00:03:54,260 --> 00:03:54,920 popping up. 57 00:03:55,070 --> 00:03:57,020 So this is the same one that we've generated. 58 00:03:57,290 --> 00:04:04,040 So it's nice, neat usability for the user in order to be able to simply generate that and already gets 59 00:04:04,040 --> 00:04:05,420 copied into their clipboard. 60 00:04:05,430 --> 00:04:10,520 So as soon as they click off of that, it generates it and it's already copied into the clipboard, 61 00:04:10,520 --> 00:04:14,870 ready to go and ready for them to use and paste into any project that they want. 62 00:04:15,020 --> 00:04:20,270 And as you can see, once again, once we've made the changes, if I paste it, this is that new one 63 00:04:20,300 --> 00:04:21,500 that we've just created. 64 00:04:21,770 --> 00:04:27,850 And that was just a simple demonstration that work and paste it in and we've already got it in our clipboard. 65 00:04:28,220 --> 00:04:29,510 So that's the application. 66 00:04:29,510 --> 00:04:34,250 And coming up next, we'll do a quick run through in a code review of all of the functionality that 67 00:04:34,250 --> 00:04:35,650 we've built in the earlier lessons. 68 00:04:36,140 --> 00:04:40,520 So go ahead and add this new option into your project. 69 00:04:40,880 --> 00:04:49,130 So this is the ability to output that as a text area, as a selectable area that the user can select 70 00:04:49,310 --> 00:04:52,220 as well as copy it automatically into their clipboard.